BetterDiscord のようにカスタム CSS の適用を Slack でもしたかったのですが，最新版の v4.3.2 で行う方法を探すのが難しかったので簡単にまとめました．

はじめに

この方法は Slack 公式の機能ではありません．
何らかのデータ破損等が発生しても一切責任は負いませんので，自己責任でお願いします．

方法

Slack がインストールされたディレクトリを開きます．

OS	ディレクトリ
Windows	%LOCALAPPDATA%\slack
macOS	/Applications/Slack.app/Contents
Linux	/usr/lib/slack

app-x.x.x のうち一番バージョンが高いものを開きます．
resources 内の app.asar を以下のコマンドで展開します．

$ npx asar extract app.asar app.asar.tmp

展開された app.asar 内の main-preload-entry-point.bundle.js の末尾に以下を追記します．

main-preload-entry-point.bundle.js

document.addEventListener('DOMContentLoaded', function() {
    document.head.appendChild(
        Object.assign(document.createElement('style'), {
            innerHTML: `
/* 適用したいカスタム CSS */
            `
        })
    );
});

再度 app.asar に戻します．

$ npx asar extract app.asar.tmp app.asar

Slack のアプリで メニュー → ヘルプ → トラブルシューティング → キャッシュを消去して再起動 をクリックします．
これで完了です．

HTMLの要素を重ねるには

HTMLの要素は基本的には重なることはありません。
しかしCSSにおいてposition:absoluteを使うことで、要素を重ねて表示できます。

デフォルトではサイト全体の左上部分を起点として、そこからの位置をtopとleftを用いて、位置を決めます。

基準の位置は、基準としたい親要素に
position:relativeを指定することで、その要素の左上部分を起点に変更できます。

ここでposition:relativeの他の利用方法も紹介します。

要素の位置を変更する際に使用できる。
つまり先程と同様にtopとleftを使用することで、その要素を本来の位置から移動させることができます。

インライン要素とブロック要素

インライン要素：　改行されない要素
ブロック要素　：　改行される要素

aタグなどのインライン要素はwidthやheightを指定できず不便な点がある。

しかしdisplayプロパティを使用することで、インライン要素をインラインブロック要素やブロック要素に変更可能です。
そうすることで、高さや幅を変更することも可能になります。

またtext-alignプロパティを使用することで、テキストなどのインライン要素やブロックの配置を変更できる。

text-align以外にも要素を中心に寄せる方法としてmargin:0 autoがあり、これらを使い分ける必要がある。

広い範囲を囲むようなブロック要素の場合はmarginを使用すべきです。
それに対して、テキストやボタンなどのインライン要素やブロックの場合はtext-alignを使用すべきです。

はじめに

シンプルなヘッダーを作成する時ってどんなプロパティで指定してますか？
僕の場合は楽かつ正確と理由からdisplay:flexで片付けます。
けどサイト修正してるとまだまだfloatを使っているサイトも多く感じるのでfloatの復習するついでに、いろいろ試してみました。
芸の多いコーダーになるためにね。

対象

・要素を横並びさせるとき、flewboxで片付けちゃう人
・古いサイトの修正でfloatに出会っちゃた人。

目標

ロゴ　　　　　　　　　　　　　　　　　　　会社案内　　事業内容　　採用情報　　お問い合わせ

みたいなヘッダーを作る

display:flex;を使う

index.html

  <div class="header__flex">
    <h1>ロゴ</h1>
    <nav>
      <ul>
        <li>会社案内</li>
        <li>事業内容</li>
        <li>採用情報</li>
        <li>お問い合わせ</li>
      </ul>
    </nav>
  </div>

style.css

  * {
 margin: 0;
 padding: 0; 
}
ul {
  list-style:none;
}
div {
  padding: 0 30px;
}
.header__flex {
  display: flex;
  height:60px;
  align-items: center;
}
.header__flex nav {
  margin-left: auto;
}
.header__flex ul {
  display: flex;
}
.header__flex ul li {
  margin-left: 20px;
}

• 簡単
• 一応ベンダープレフィックスもつける（普段はSassで書くので今回は省略）

floatを使う

flexboxを使った時とHTML構造は同じです。わかりやすいようにクラス名の変更しているだけです。

index.html

  <div class="header__float">
    <h1>ロゴ</h1>
    <nav>
      <ul>
        <li>会社案内</li>
        <li>事業内容</li>
        <li>採用情報</li>
        <li>お問い合わせ</li>
      </ul>
    </nav>
  </div>

style.css

  * {
 margin: 0;
 padding: 0; 
}
ul {
  list-style:none;
}
div {
  padding: 0 30px;
}
.header__float {
  overflow: hidden;
  clear: both;
　/*縦中央揃いにするためにヘッダーの高さを指定する*/
  line-height: 48px;
}
.header__float h1 {
  float: left;
}
.header__float nav {
  float: right;
}
.header__float nav ul li{
  float: left;
  margin-left: 20px;
}

• ロゴを左に浮かせたら、メニュリストを右に浮かせる。そしたら親要素の高さを取り戻すためにoverflow: hidden;を指定するという感じ。（簡単）
• メニューリスト内の
• はdisplay:line-blockで指定してもいいかも。

inline-blockを使う

flexboxを使った時とHTML構造は同じです。わかりやすいようにクラス名の変更しているだけです。

index.html

 <div class="header__inline_block">
    <h1>ロゴ</h1>
    <nav>
      <ul>
        <li>会社案内</li><li>事業内容</li><li>採用情報</li><li>お問い合わせ</li>
      </ul>
    </nav>
  </div>

style.css

  * {
 margin: 0;
 padding: 0; 
}
ul {
  list-style:none;
}
div {
  padding: 0 30px;
}
.header__inline_block{
background-color:#68abc4;
}
.header__inline_block h1{
display: inline-block;
}
.header__inline_block nav{
display: inline-block;
width: 94%;
text-align: right;
}
.header__inline_block nav ul li {
display: inline-block;
margin-left:20px;
}

• ロゴを左寄せ、メニューリストを右寄せするときに大変。今回はメニューリストにwidthを指定してtext-alignで右寄せしたけど、レイアウトはすぐ崩れる。
• inline-blockでやるぐらいならfloatでヘッダー作った方がマシ。
• display:inline-blockって上に変な余白できるし、ロゴとメニューリストの縦中央揃えがシンプルにできない。
• もうやりたくな

まとめ

floatに苦手意識はあったから、復習できてよかったかなと、
lnline-blockにできる空白もう少し深掘りしたいなー暇な時。
自分で新規サイト作ったり、特に指定がなければflexboxで絶対大丈夫だと思います。
ただfloat回り込みを解除するためにoverflow:hidden;をかける。ってまとめ方でオーケー？

今回はプロゲートでHTML、CSSの中級編をやりました。

中級編も昔にやったことがあったのでそんなに苦労しなかったです。ただ、当たり前ですが初級編に比べると難しくなっており、復讐をする必要があると感じました。具体的にはpotisionのところなでが少し理解するのに時間がかかりました。

HTML、CSSの中級編の要約

親要素や子要素、positionなどについて学び、ボタンの作り方やアイコンの作り方について学んで。クラスごとに意識してCSSを適応察せていかないとミスを起こしたりする。

ハマったのでメモ

div style="display:inline-flex"を使う

//haml
= form_tag search_posts_path, method: :get, class: "form-inline" do
  %div{style: "display:inline-flex"}
    = text_field_tag :search, '', class: 'form-control form-control-sm mr-2'
    = image_submit_tag 'search_icon.svg', class: 'search_button'

概要

書いているうちにゴチャゴチャして混乱しがちな animation プロパティの記述をスッキリさせたいので、シンプルなフェードインでCSSアニメーションの基礎を学び直してみました。

基本のサンプル

3つの円が重なっているものを用意しました。

HTML

<div class="wrapper">
  <div class="item is-1"></div>
  <div class="item is-2"></div>
  <div class="item is-3"></div>
</div>

.wrapper で囲んでいるのは見た目の調整だけなので深い意味はありません。
以降、HTML に変更はないのでサンプルへの記述は省略します。

CSS

.wrapper {
  margin: 20px;
  position: relative;
}

.item {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0.5;
}
.is-1 {
  top: 0;
  left: 0;
  background: blue;
}
.is-2 {
  top: 50px;
  left: 50px;
  background: yellow;
}
.is-3 {
  top: 100px;
  left: 100px;
  background: red;
}

.item クラスに基本のスタイルを指定し、
.is-1 .is-2 .is-3 に位置と色をそれぞれ指定してあります。
この状態だとまだアニメーションしません。

最低限必要なアニメーションのプロパティ

フェードインをさせる前に、CSS アニメーションのプロパティを最低限なものだけ挙げてみます。

animation-duration プロパティ

animation-duration - CSS: カスケーディングスタイルシート | MDN
アニメーションが完了する周期。
値を小さくすればすばやくなり、大きくすればのんびりになる。

今回は1秒（1s）で。

animation-duration: 1s;

animation-name プロパティ

animation-name - CSS: カスケーディングスタイルシート | MDN
要素に適用されるアニメーションの名前を指定する。
アニメーションの名前は、@keyframes で用意する（後述）
複数の指定も可能。

今回はふわっと表示させるフェードインを作るので、

animation-name: fadeIn;

としました。

animation プロパティ

animation - CSS: カスケーディングスタイルシート | MDN
アニメーションのショートハンド。アニメーション系の値をまとめて書ける。
値をを半角スペースで区切って書く。

上記に書いたプロパティをまとめると、

animation: 1s fadeIn;

と書けます。

@keyframes @-規則

@keyframes - CSS: カスケーディングスタイルシート | MDN
アニメーションの流れに沿いつつアニメーション中の中間のステップも制御しながらスタイルを定義する。
CSS トランジションよりも詳細に制御や調整ができる。
キーフレームは from to か、0% 〜 100% で指定する。

パーセンテージのほうが細かく調整できますが、今回は難しいことはしないので、

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

from to を使って、上記のようにしました。
名前は、さきほど animation-name で指定した fadeIn にしてあります。

フェードインができそうでできなかった例

フェードインのシンプルな例は、animation プロパティと @keyframes @-規則 で、

(アニメーションさせたいセレクタ) {
  animation: 1s fadeIn;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

このような書き方で行けそうですが、落とし穴がありました…

ダメだったサンプル

上のコードをサンプルに適用します。

CSS

• opacity の初期値をゼロに
• アニメーションの記述を追加

.wrapper {
  margin: 20px;
  position: relative;
}

.item {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0; /* ←初期値を変更。透明に。*/
  animation: 1s fadeIn; /* ←追加 */
}

.is-1 {
  top: 0;
  left: 0;
  background: blue;
}
.is-2 {
  top: 50px;
  left: 50px;
  background: yellow;
}
.is-3 {
  top: 100px;
  left: 100px;
  background: red;
}

@keyframes fadeIn { /* ←追加 */
  from { opacity: 0; }
  to { opacity: 0.5; }
}

やってみると、

消える……。
※GIFはループしていますが実際は1回きりです。
CodePen のサンプルはこちら
終了時のスタイル指定をしていないため、初期値の opacity: 0 が効いてしまうためです。

フェードインをフェードインらしく改善

プロパティ animation-fill-mode を使います。

animation-fill-mode プロパティ

animation-fill-mode - CSS: カスケーディングスタイルシート | MDN
CSS アニメーションの開始と終了時にどういったスタイルを適用するかを指定できる。

今回は、表示されたままにしたい＝最後で止めたいので、forwards を指定します。
ショートハンドで書かない場合は、

animation-fill-mode: forwards;

animation ショートハンドなら、以下のように値を追加します。

(アニメーションさせたいセレクタ) {
  animation: 1s fadeIn forwards;
}

正しいサンプル

以下のサンプルで3つの円をフェードインすることができました。

CodePen のサンプルはこちら

CSS

.wrapper {
  margin: 20px;
  position: relative;
}

.item {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0; /* ←初期値を変更。透明に。*/
  animation: 1s fadeIn forwards; /* ←追加 */
}

.is-1 {
  top: 0;
  left: 0;
  background: blue;
}
.is-2 {
  top: 50px;
  left: 50px;
  background: yellow;
}
.is-3 {
  top: 100px;
  left: 100px;
  background: red;
}

@keyframes fadeIn { /* ←追加 */
  from { opacity: 0; }
  to { opacity: 0.5; }
}

誰もが想像できるフェードインになりました。

フェードインでばらばらと表示させたい

3つもアイテムがあるのでばらばらと表示させてみます。
必要なプロパティは、animation-delay です。

animation-delay プロパティ

animation-delay - CSS: カスケーディングスタイルシート | MDN
アニメーションをいつ開始するかを秒数で指定できる。

animation-delay: 3s;

ショートハンドなら、

(アニメーションさせたいセレクタ) {
  animation: 1s fadeIn 3s forwards;
}

と書けます。
今回のサンプルではショートハンドは使わず、ひとつひとつに数値を与えます。

サンプル

CodePen のサンプルはこちら

CSS

• 1つ目の青い円が1秒遅れ
• 2つ目の黄色い円が2秒遅れ
• 3つ目の赤い円が3秒遅れ

にしてみます。

.wrapper {
  margin: 20px;
  position: relative;
}

.item {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0; /* ←初期値を変更。透明に。*/
  animation: 1s fadeIn forwards; /* ←追加 */
}

.is-1 {
  top: 0;
  left: 0;
  background: blue;
  animation-delay: 1s; /* ←さらに追加 */
}
.is-2 {
  top: 50px;
  left: 50px;
  background: yellow;
  animation-delay: 2s; /* ←さらに追加 */
}
.is-3 {
  top: 100px;
  left: 100px;
  background: red;
  animation-delay: 3s; /* ←さらに追加 */
}

@keyframes fadeIn { /* ←追加 */
  from { opacity: 0; }
  to { opacity: 0.5; }
}

ひとつずつ順番に表示されるようになりました。

今後

他にもアニメーションを制御するプロパティがあるのでこちらも調べてみます。

参考

animation - CSS: カスケーディングスタイルシート | MDN

はじめに

自分の使っているPCにAtomをインストールしたので、その際に入れたパッケージの備忘録です。

Japanese Menu

Atomのメニューバーとコンテキストメニュー、設定画面を日本語に翻訳してくれるパッケージ

Show Ideographic Space

全角スペースを見えるようにしてくれるパッケージ
調べものをしながらコーディングをすると、やってしまうことがあるため入れました

File Icons

開いているファイルの種類をアイコンで表示してくれるパッケージ

autocomplete+paths suggestions

ディレクトリのパスを自動補完してくれるパッケージ

atom-beautify

自動的にコードのインデントなどを整形してくれるパッケージ

Vue.js用のパッケージ

language-vue-component

vue用のシンタックスハイライトが追加されるパッケージ

vue-autocomplete

vue component用の入力の自動補完をしてくれるパッケージ

vue-hyperclick

vue componentから定義元へジャンプできるパッケージ
※hyperclick,js-hyperclick,language-vue-componentを入れてないといけません

最後に

今回、AtomをインストールしたのはこれからVue.jsの勉強をしようと思ったからです。
今まではサーバーサイドよりのことを勉強してきたので、これからフロントを多めに勉強していきたいと思います。