What's New Qiita

20191218のCSSに関する記事は14件です。

  • 投稿日：2019-12-18T23:58:21+09:00

HTML/CSSで書籍の図を作ってみた

この記事は CSS アドベントカレンダー 2019の19日目の記事です。

フリーランスでデザインやイラストをしている becolomochi と申します。
HTML/CSS で書籍の図を作ったので、図版担当の視点で作成時のテクニック的なものを書きます。

ざっくり言うと、こういう図を作りました。
スクリーンショット 2019-12-19 0.07.22.png

何の本か ＆ なぜやるのか

プログラミング初学者向けの書籍 『Railsの教科書』（著者：五十嵐邦明さん 発行：達人出版会さん）を Rails のバージョンアップで改訂するため、このタイミングで図を HTML/CSS で書き換えたいとのことでした。

以下のリンクで現在改訂中の内容を見ることができます。

メリット

HTML/CSS で図を書くメリットとしては、

  • 図のパーツをコードで管理できるので管理が楽（な気がしました。）
  • コードなので差分を GitHub で確認しやすい
  • ベースをデザイナーが作る必要はあるが、HTML がわかれば分担できる
  • 今後の改版で図を直す必要が出てきても著者さん側で直接修正できる

『Railsの教科書』では HTML/CSS で作成した図はだいたい40個くらいあったようです。
※数え間違いしていなければ……
デザイナーの私がベースとなる20個程度を作成し、残りの半分の図をコピペと調整で著者さんが作成しています。

技術系同人誌の図の作成でも便利そうです〜

デメリット

デメリットを挙げるとすると、

  • 複雑な図は作れない（なので、Illustrator で作った画像もあります）
  • できあがった図はカラーモードが RGB なので紙版をフルカラーで印刷する場合は色味が変わってしまう

が挙げられるかなと思います。

HTML を画像化にするには

  1. HTML/CSS で図をつくる <- この記事ではここについて書きます。
  2. selenium-webdriver + Headless Chrome でスクショを保存（すばらしき自動化〜〜）
  3. 図が中央に来るようにトリミング（これからの作業になります※12/19現在）

HTML/CSS で図をつくる

Headless Chrome ということで、Chrome で表示さえきちんとできていれば問題ない！
クロスブラウザとか気にしなくて済む！
普段のコーディング作業から比べると安心して進められたと感じていますw

サンプル

私が作った部分のコミットコメントがダサダサでお恥ずかしいのですが、
GitHub のこのディレクトリ以下に図が入っています。
rails_textbook/_figures/assets at master · igaiga/rails_textbook

  • 図のサンプル一覧を作りました。figure-sample.html clone なりしていただけると見れます。
  • CSS は SCSS で gulp でコンパイルしています（相談して一番慣れているやり方にさせてもらいました）

デザイナーとして個人的に気をつけたこと

  • テキストの増減にも耐えられるであろう CSS にする
  • CSS でトリッキーな装飾はしない
  • 必要に迫られたときだけ絶対値指定する。その場合は HTML 側で style 属性を使う

2つ目は、今後ブラウザのバージョンが上がったときに表示が崩れる可能性あるためなのですが、
正直なところ今後どうなるか少し心配しています……
3つ目は、矢印の位置を合わせたいときにやってみています。
今後もし位置の調整をしたいときにわざわざ SCSS をいじらなくても済みます。

例えばこれで矢印になるのですが、（コード全体はこちら）

<div class="arrow-right is-memo arrow-right__position" style="top: 170px;"></div>

style 属性で、親要素を基準にして上から170pxのところに来るように絶対値指定しています。

アートボード 1.png

CSSで矢印を作る

さきほどの図で矢印を例に出しましたが、
div に付与した3つのクラスにはそれぞれ以下のような装飾を持たせています。

  • arrow-right 矢印の形状を指定するクラス
  • is-memo メモ用の色（水色）を指定クラス
  • arrow-right__position 位置を絶対値指定する必要があるときのクラス

これがかいてあるコードはココです。
rails_textbook/_arrow-right.scss at master · igaiga/rails_textbook

arrow-rightクラスの矢印の形状を作るのは before と after の疑似要素で作りました。
画像よりコードのほうが大きさや色を変えるときに簡単ですし。
上記リンクから必要なところだけ抜き出したものは以下です。

$arrow-right-width-value: 30px;
$arrow-right-height-value: 50px;

.arrow-right {
  height: $arrow-right-height-value;
  &::before, &::after {
    display: inline-block;
    content: '';
  }
  &::before {
    // 胴体の棒の部分
    width: $arrow-right-width-value + $arrow-right-height-value;
    height: 45%;
    background: $arrow-color;
  }
  &::after {
    // 三角の部分
    width: $arrow-right-height-value;
    height: $arrow-right-height-value;
    border: $arrow-right-height-value / 2 solid transparent;
    border-left-color: $arrow-color;
    margin-bottom: - $arrow-right-height-value / 4;
  }
}

変数も多くだらだらと長いので分割して見てみます。

SCSSを細かく見てみる

$arrow-right-width-value: 30px;
$arrow-right-height-value: 50px;

で、一応でですが縦と横の初期値を設定しています。

  height: $arrow-right-height-value;
  &::before, &::after {
    display: inline-block;
    content: '';
  }

ここで矢印全体の高さを設定し、beforeとafterの疑似要素を召喚しました。
（display プロパティは block でもいいのですが、他でインラインにする必要があってこうなっています）

  &::before {
    // 胴体の棒の部分
    width: $arrow-right-width-value + $arrow-right-height-value; // こう書かなくても良かったかも…
    height: 45%;
    background: $arrow-color;
  }

before 疑似要素で棒の幅と高さ、色を指定しています。
幅は width: $arrow-right-width-value でシンプルに書けば良さそうです。

  &::after {
    // 三角の部分
    width: $arrow-right-height-value;
    height: $arrow-right-height-value;
    border: $arrow-right-height-value / 2 solid transparent;
    border-left-color: $arrow-color;
    margin-bottom: - $arrow-right-height-value / 4;
  }

最後に after 疑似要素で三角の部分を表現しています。
高さの変数 $arrow-right-height-value を基準にして、正方形のボックスを作り、正方形の半分のサイズの透明のborderを指定し、leftだけ色を付けると三角が現れます。

リセット CSS は ress を使っているので、以下が効いてます。

box-sizing: border-box;

これをつけるとボックスの内側に border がつくので、上のサンプルがちゃんと矢印風の表示になってくれます。
疑似要素ごとに分解するとこんな感じになっています。
スクリーンショット 2019-12-18 23.03.39.png

パーツの半透明化

説明する部分を強調するため、他のパーツを半透明にできます。

以下の図は Controller を説明するときの図です。
スクリーンショット 2019-12-18 23.24.50.png

サンプルHTML

<div class="box opacity">
  <h2 class="box__headline">リクエスト</h2>
  ...
</div>

SCSSはこれ

.opacity {
    opacity: 0.3;
}

opacity というクラスをつけるだけで半透明化するようになりました。簡単ですね！

矢印の長さをボックスの長さに追随させる

右側の赤い矢印にご注目ください。
スクリーンショット 2019-12-18 23.15.52.png
内容が増えても伸びるようにしました。
スクリーンショット 2019-12-18 23.14.55.png

サンプルHTML

<div class="wrapper">

<div class="box">
  <h2 class="box__headline">リクエスト</h2>
  ...
</div>

<div class="box app-box relative">
  <h2 class="box__headline">Rails App</h2>
  ...

  <div class="arrow arrow__position-right-top"></div>

</div>

<div class="box">
  <h2 class="box__headline">レスポンス</h2>
  ...
</div>
</div>

SCSS

.arrow__position-right-top {
  // 右上から大きく表示する
  $position-value: -40px;
  position: absolute;
  right: 20px;
  top: $position-value;
  height: calc(100% - #{$position-value * 1.6});
}

親要素を基準にして、矢印の位置と矢印の長さを調整できるようにしました。

ファイル構造を作る

スクリーンショット 2019-12-18 23.33.55.png

アイコンは Font Awesome のアイコンです。色をつけると見違えるように図っぽくなりますね。
ファイル構造は当初 ul の入れ子で書いてみたところ、入れ子になりすぎてぱっと見て理解しづらくなってしまったため、div 要素で囲んで margin-left をつけて疑似的な階層をつくりました。Web サイトならコードの意味が大事なのでサイトを作る場合は真似しないでください…⚠️

サンプル HTML

<div class="files__column">
    <div class="files__item is-1">
      1階層
    </div>
    <div class="files__item is-2">
      2階層
    </div>
    <div class="files__item is-3">
      3階層
    </div>
    ...
</div>

まとめ

HTML/CSS で図を作るなんてなかなか無い案件なのでめちゃくちゃ楽しかったです!!!
ちょっと大変だなーと思ったのが、図の中にコードを載せることですね。
タグのエスケープが必要になる箇所を、量がそれほど多くないからと手動で書き換えてました。
半端にアナログ野郎ですみません……。

この記事で書いたことが最善とは思っていません。
もっといい方法があったらぜひ教えていただけますと幸いです:pray:

Railsの教科書について

『Railsの教科書』は現在も販売していて、改訂作業中です。
全作業が終わり次第、新版が購入およびバージョンアップ可能になります。
改訂前に買った方も改訂後に新版をダウンロード可能です。
Railsの教科書 - 達人出版会
2020年2月29日・3月1日に開催される技術書典8の1日目（2/29）でも紙版を頒布予定とのことです。
※電書版はフルカラーですが、紙版の本文はモノクロになるそうです。
デザイン担当からの告知になってしまいましたが、こちらもどうぞよろしくお願いします〜。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T23:58:21+09:00

HTML/CSS で書籍の図を書きました

この記事はCSS アドベントカレンダー 2019の19日目の記事です。

フリーランスでデザインやイラストをしている becolomochi と申します。
HTML/CSS で書籍の図を作ったので、図版担当の視点で作成時のテクニック的なものを書きます。
どちらかというと技術系同人誌向けの内容になります。

ざっくり言うと、こういう図を作りました。
スクリーンショット 2019-12-19 0.07.22.png

何の本か ＆ なぜやるのか

プログラミング初学者向けの書籍 『Railsの教科書』（著者：五十嵐邦明さん 発行：達人出版会さん）を Rails のバージョンアップで改版するため、このタイミングで図を HTML/CSS で書き換えたいとのことでした。

以下のリンクで今改版中の内容を見ることができます。

メリット

図を HTML/CSS で書くメリットとしては、

  • 図のパーツをコードで管理できるので管理が楽（な気がしました。）
  • コードなので差分を GitHub で確認しやすい
  • ベースをデザイナーが作る必要はあるが、HTML さえ分かれば分担できる
  • 今後の改版で図を直す必要が出てきても著者さん側で直接修正できる

『Railsの教科書』では HTML/CSS で作成した図がだいたい40個くらいあったようです。
※数え間違いしていなければ……
デザイナーの私がベースとなる20個程度を作成し、残りの半分の図をコピペと調整で著者さんが作成しています。

デメリット

デメリットを挙げるとすると、

  • 複雑な図は作れない（なので、Illustrator で作った画像もあります）
  • できあがった図はカラーモードが RGB なので紙版をフルカラーで印刷する場合は色味が変わってしまう

が挙げられるかなと思います。

HTML を画像化にするには

  1. HTML/CSS で図をつくる <- この記事ではここについて書きます。
  2. puppeteer でスクショを保存（すばらしき自動化〜〜）
  3. 図が中央に来るようにトリミング（これからの作業になります※12/19現在）

HTML/CSS で図をつくる

puppeteer が Chronium ベースということで、Chrome で表示さえきちんとできていれば問題ない！
クロスブラウザとか気にしなくて済む！
普段のコーディング作業から比べると安心して進められたと感じていますw

サンプル

私が作った部分のコミットコメントがダサダサでお恥ずかしいのですが、
GitHub のこのディレクトリ以下に図が入っています。
rails_textbook/_figures/assets at master · igaiga/rails_textbook

  • 図のサンプル一覧を作りました。figure-sample.html clone なりしていただけると見れます。
  • CSS は SCSS で gulp でコンパイルしています（相談して一番慣れているやり方にさせてもらいました）

デザイナーとして個人的に気をつけたこと

  • テキストの増減にも耐えられるであろう CSS にする
  • CSS でトリッキーな装飾はしない
  • 必要に迫られたときだけ絶対値指定する。その場合は HTML 側で style 属性を使う

2つ目は、今後ブラウザのバージョンが上がったときに表示が崩れる可能性あるためなのですが、
正直なところ今後どうなるか少し心配しています……
3つ目は、矢印の位置を合わせたいときにやってみています。
今後もし位置の調整をしたいときにわざわざ SCSS をいじらなくても済むようにしています。

例えばこれで矢印になるのですが、（コード全体はこちら）

<div class="arrow-right is-memo arrow-right__position" style="top: 170px;"></div>

style 属性で、親要素を基準にして上から170pxのところに来るように絶対値指定しています。

アートボード 1.png

CSSで矢印を作る

さきほどの図で矢印を例に出しましたが、
div に付与した3つのクラスにはそれぞれ以下のような装飾を持たせています。

  • arrow-right 矢印の形状を指定するクラス
  • is-memo メモ用の色（水色）を指定クラス
  • arrow-right__position 位置を絶対値指定する必要があるときのクラス

これがかいてあるコードはココです。
rails_textbook/_arrow-right.scss at master · igaiga/rails_textbook

arrow-right クラスの矢印の形状を作るのは beforeとafterの疑似要素で作りました。
大きさや色を変えるのも画像よりコードでやったほうが楽ですし。
上記リンクから必要なところだけ抜き出したものは以下です。

$arrow-right-width-value: 30px;
$arrow-right-height-value: 50px;

.arrow-right {
  height: $arrow-right-height-value;
  &::before, &::after {
    display: inline-block;
    content: '';
  }
  &::before {
    // 胴体の棒の部分
    width: $arrow-right-width-value + $arrow-right-height-value;
    height: 45%;
    background: $arrow-color;
  }
  &::after {
    // 三角の部分
    width: $arrow-right-height-value;
    height: $arrow-right-height-value;
    border: $arrow-right-height-value / 2 solid transparent;
    border-left-color: $arrow-color;
    margin-bottom: - $arrow-right-height-value / 4;
  }
}

SCSSを細かく見てみる

$arrow-right-width-value: 30px;
$arrow-right-height-value: 50px;

で、一応でですが縦と横の初期値を設定しています。

  height: $arrow-right-height-value;
  &::before, &::after {
    display: inline-block;
    content: '';
  }

ここで矢印全体の高さを設定し、beforeとafterの疑似要素を召喚しました。
（display プロパティは block でもいいのですが、他でインラインにする必要があってこうなっています）

  &::before {
    // 胴体の棒の部分
    width: $arrow-right-width-value + $arrow-right-height-value; // こう書かなくても良かったかも…ｃｃ
    height: 45%;
    background: $arrow-color;
  }

before 疑似要素で棒の幅と高さ、色を指定しています。

  &::after {
    // 三角の部分
    width: $arrow-right-height-value;
    height: $arrow-right-height-value;
    border: $arrow-right-height-value / 2 solid transparent;
    border-left-color: $arrow-color;
    margin-bottom: - $arrow-right-height-value / 4;
  }

最後に after 疑似要素で三角の部分を表現しています。
高さの変数 $arrow-right-height-value を基準にして、正方形のボックスを作り、正方形の半分のサイズの透明のborderを指定し、leftだけ色を付けると三角が現れます。

リセット CSS は ress を使っているので、以下が効いてます。

box-sizing: border-box;

これをつけるとボックスの内側に border がつき、上のサンプルがちゃんと矢印風の表示になってくれます。

スクリーンショット 2019-12-18 23.03.39.png

パーツの半透明化

説明する部分を強調するため、他のパーツを半透明にできます。

以下の図は Controller を説明するときの図です。
スクリーンショット 2019-12-18 23.24.50.png

サンプルHTML

<div class="box opacity">
  <h2 class="box__headline">リクエスト</h2>
  ...
</div>

SCSSはこれ

.opacity {
    opacity: 0.3;
}

opacity というクラスをつけるだけで半透明化するようになりました。簡単ですね！

矢印の長さがボックスに追随するよ

右側の赤い矢印にご注目ください。
スクリーンショット 2019-12-18 23.15.52.png
内容が増えるとちゃんと伸びます。
スクリーンショット 2019-12-18 23.14.55.png

サンプルHTML

<div class="wrapper">

<div class="box">
  <h2 class="box__headline">リクエスト</h2>
  ...
</div>

<div class="box app-box relative">
  <h2 class="box__headline">Rails App</h2>
  ...

  <div class="arrow arrow__position-right-top"></div>

</div>

<div class="box">
  <h2 class="box__headline">レスポンス</h2>
  ...
</div>
</div>

SCSS

.arrow__position-right-top {
  // 右上から大きく表示する
  $position-value: -40px;
  position: absolute;
  right: 20px;
  top: $position-value;
  margin-top: 0;
  height: calc(100% - #{$position-value * 1.6});
}

wrapper に position: relative を指定してあり、矢印の height を 100% から余白の分を引くようにするとできるようです〜。

ファイル構造を作る

スクリーンショット 2019-12-18 23.33.55.png

アイコンは Font Awesome のアイコンです。色をつけると見違えるように図っぽくなりますね。
ファイル構造はulの入れ子で進めようと書いてみたところ、入れ子になりすぎてコード量が半端なくなってしまったので margin-left で疑似的な階層をつくりました。Web サイトならコードの意味が大事ですが、今回はコードは適当でも図さえちゃんとしていればいいので。。。

サンプル HTML

<div class="files__column">
    <div class="files__item is-1">
    1階層
    </div>
    <div class="files__item is-2">
      2階層
    </div>
    <div class="files__item is-3">
      3階層
    </div>
    ...
</div>

まとめ

HTML/CSS で図を作るなんてなかなか無い案件なのでめちゃくちゃ楽しかったです!!!
ちょっと大変だなーと思ったのが、図の中にコードを載せることですね。
タグのエスケープが必要になるところをそんなに量が多くないからと手動で書き換えてました。半端にアナログ野郎ですみません……。
この記事で書いたことが最善とは思っていません。
もっといい方法があったらぜひ教えていただけますと……:pray:

表紙も作って販売が決まれば、達人出版会さんから電子書籍（EPUB, PDF）が発売されます。
Railsの教科書 - 達人出版会
2020年2月29日・3月1日に開催される技術書典8の1日目（2/29）でも紙版を頒布予定とのことです。
※電書版はフルカラーですが、紙版の本文はモノクロになるそうです。
デザイン担当からの告知になってしまいましたが、こちらもどうぞよろしくお願いします〜。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T21:28:52+09:00

[Rails6]ActionTextの入力フォームが伸びて困る

はじめに

就活のポートフォリオサイトとしてAsobiというWebサイトを作成しました。(QiitaにAsobiに関しての記事を書いています。就活用ポートフォリオとしてWebサービス「Asobi」を作りました。)
このサイトの中でRails6から新しく導入されたActionTextを使っているのですが、入力フォームが行数に応じて伸びてしまいます。

今回はそんなActionTextの入力フォームをいい感じにするためにやったことをご紹介します。

実行環境

  • Ruby 2.6.5
  • Rails 6.0.2

ActionTextとは

Rails6から実装されたリッチテキストコンテンツと編集機能を導入する機能です。

ActionTextのインストールと導入したいモデルとカラムの用意を行い、少しコードを書くだけでブログのようなリッチテキストエディタが導入できます。

actiontext_test.gif

Ajaxを利用した画像のアップロードも実装されており、アップロードされた画像はActiveStorageを利用して保存されます。

actiontext_pic.gif

今回ActionTextの導入に関しては割愛させていただきます。
導入に関しては下記の記事が参考になるかと思います。

Rails6新機能 ActionText使用方法
Rails 6 と Action text を使ってみる - もふもふ技術部

伸びて困る

ActionTextで生成されるリッチテキストエディタの入力フォームは、行数に応じて高さが伸びるようになっています。

デフォルトの挙動

actiontext_default.gif

これをQiitaやはてなブログのような、はみ出た部分をスクロールバーで表示するように実装します。

こんな風な挙動にしたい

actiontext_custom.gif

実装

Rails側でこれを実装する方法を見つけられなかったため、CSSで実装します。

Trixについて

実装の前に、ActionTextに含まれるTrixについて説明します。
Trixとはリッチテキストエディタを実装するJavascriptのライブラリです。(ちなみに開発元はRuby on Railsと同じBasecampです)
Trixのドキュメントを見てみると、

Place an empty <trix-editor></trix-editor> tag on the page. Trix will automatically insert a separate <trix-toolbar> before the editor.
Like an HTML <textarea>, <trix-editor> accepts autofocus and placeholder attributes. Unlike a <textarea>, <trix-editor> automatically expands vertically to fit its contents.

とのことで、ページのTrixのエディタを入れたい場所にtrix-editorタグを書き込むことで使えるようになります。

ActionTextの場合、erbファイルに

<%= form.rich_text_area :body %>

と記述することでtrix-editorタグが生成されます。
そしてリッチテキストエリアへの入力はtrix-editorタグの子要素にDOMとなって反映されていきます。

actiontext_dom.gif

なので、入力フォームのスタイルは親要素であるtrix-editorタグのCSSを記述することで調整できそうです。

CSSの記述

入力フォームの高さを固定するためにmin-heightとmax-heightを、そして入力フォームからはみ出した部分はoverflow-y: auto;を設定することでスクロールバーで表示できるようにします。

以下のCSSを記述します。(actiontext.scssが/app/assetsか/app/javascriptに生成されていると思うので、そこに追記することをオススメします)

trix-editor {
  min-height: 20em;
  max-height: 20em;
  overflow-y: auto;
}

以上で目指す挙動の入力フォームになっていると思います。

まとめ

ActionTextは新しい機能のため中々情報が出てきません。もしかしたらActionTextの設定ファイルか何かでうまいことやれるかもしれないです。

何か直すべき点、間違った記述があればコメント等で指摘していただければと思います。

参考文献

Trix
https://railsguides.jp/action_text_overview.html

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T20:47:22+09:00

初心者によるプログラミング学習ログ 187日目

100日チャレンジの187日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

187日目は

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T18:47:50+09:00

WordpressのDBから自作SQLを使ってアイキャッチ画像を取得した結果わかったこと

１はじめに

Wordpressを勉強する人が最初にやることは、環境構築と管理画面の使い方だと思いますが！私はなんとデータベースから入りまして、管理画面⇒フォルダ構成と、なぜか逆走しながらWordpressを勉強中。今回は自作SQLを使ってアイキャッチ画像を取得したときのアハ体験をまとめました。

Wordpressのデータの全てはWP_POSTSが握っている！？

Wordpressの便利なところは、ネットで検索すればなんでも出てくるところ。それだけユーザが多く、みんな困ったことを共有しているからなのでしょう。
Wordpressのデータベース（以下、DB）は、全部で12テーブルしかないとてもシンプルなもの。こんなにいろいろ出来るのに、12テーブルしか持ってないことに驚きを隠せないのですが、本当すごいですね…。（※でもこの後、データベースの構造的には否定的な見解になってきたのでそれはまた後日。）
Wordpressの主となるデータは全てWP_POSTSにあると言ってもいいくらい、このテーブルはとっても重要なテーブルです。固定ページ・記事ページ・画像など、画面で見えるページのほとんどをこのテーブルで管理しています。

※参考：Wordpress Codex 日本語版（データベース構造）
http://wpdocs.osdn.jp/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E6%A7%8B%E9%80%A0

記事とアイキャッチ画像の紐づけはWP_POSTMETAで管理！

今回、記事に使われているアイキャッチ画像のURLを取得するためネットで調べていたのですが、どのサイトもPHPの処理ありきで書いてあるではありませんか。いやいや、私はSQL1本でとってきたいのです。だって、PHP分かんないんだもん(´;ω;｀)
でも、どの方法を見てもWP_POSTMETAのmeta_key="_thumnail"を条件に何かをみているではありませんか！（そういうのは分かる。笑）
どうやら、記事に使われているアイキャッチ画像の居場所を教えてくれているみたい…。ってか！数字しか書いてない！！どゆこと？と思ったら、どうやらその数字は、WP_POSTSのID情報だということが分かりました。（さすが！すべてを握っているテーブル！！）

アイキャッチ画像自体の情報はやっぱりWP_POSTSにある！

さっそくアイキャッチ画像のIDを指定して表示したところ、見事！WP_POSTSのguidにアイキャッチ画像のURLが格納されていました。神！これで、記事に使われているアイキャッチ画像の保存先を特定することが出来ました。

アイキャッチ画像取得のために作成した鬼SQLがこちら↓↓↓

下記に記載するSQLは、アイキャッチ画像を取得するためだけのSQLではなく、「現在公開中の記事＆ある特定のタグが付いている記事」という条件も追加しているSQLになっています。なので、途中ごちゃごちゃやっててすみません。
※[xxxxx]のところは、限定したいタグのタグIDを記載するところなので、このまま実行しても動かないのでご注意ください。

select
    post_list.id,
    post_list.term_id,
    post_list.name,
    post_list.post_title,
    post_list.post_date,
    img_list.guid
from
    (select
         post.meta_id,
         post.id,
         tag.term_id,
         tag.name,
         post.post_title,
         post.post_date
     from
         (select
              wp_postmeta.meta_id,
              wp_posts.ID,
              wp_posts.post_title,
              wp_posts.post_date
          from
              wp_postmeta left join wp_posts on wp_postmeta.post_id = wp_posts.id
          where
              wp_postmeta.meta_key = '_thumbnail_id'
         ) as post left join (select
                                  wp_posts.id,
                                  wp_terms.term_id,
                                  wp_terms.name
                              from
                                  wp_posts left join wp_term_relationships on wp_posts.ID = wp_term_relationships.object_id
                                           left join wp_term_taxonomy on wp_term_relationships.term_taxonomy_id = wp_term_taxonomy.term_taxonomy_id
                                           left join wp_terms on wp_term_taxonomy.term_id = wp_terms.term_id 
                              where
                                  wp_posts.post_status = 'publish' and
                                  wp_term_taxonomy.taxonomy = 'post_tag'
                             ) as tag on post.id = tag.id
    ) as post_list left join (select
                                  wp_postmeta.meta_id,
                                  wp_postmeta.meta_value,
                                  wp_posts.guid
                              from
                                  wp_postmeta left join wp_posts on wp_postmeta.meta_value = wp_posts.id 
                              where wp_postmeta.meta_key = '_thumbnail_id'
                             ) as img_list on post_list.meta_id = img_list.meta_id
where
post_list.term_id = '[xxxxx]' order by post_list.post_date DESC;

「長くて読む気にならん…汗」と近くに座っている人に言われたのですが（笑）、WP_POSTSが記事ページやら画像情報やらを全部レコード単位で保持しているのでややこしいだけで、実は結構考え方は簡単です。
上記SQLでは大きく分けて、post_listという私が勝手に名前を付けたSQL内のテーブルと、img_listというこれまた私が勝手に名前を付けたSQL内のテーブルが結合されています。それぞれのテーブルは、どちらもWP_POSTSから必要なデータを取得しています。つまり！WP_POSTSテーブル同士を結合させ、記事とアイキャッチ画像を紐づけているWP_POSTMETAで繋いでいる、そんなイメージで作成しました。（何言ってるか分からなかったらすみません…。）

WP_POSTSにあるpost_parentに騙されてはいけない！

はい、ここが今回のアハ体験によって声を大にして言いたいところです！！！
アイキャッチ画像のレコードを眺めていると、WP_POSTSのpost_parentに設定されている記事のIDが記載されているではありませんか！おお！WP_POSTMETAで確認しなくても、ここで見ればええやん！って早とちりしてまんまとハマりました。
このpost_paretには、確かにアイキャッチ画像を設定した記事IDが入ることもあるのですが、100%アイキャッチ画像として設定されている記事IDがセットされているわけではないのです。

アイキャッチ画像の場合、WP_POSTSのpost_parentの格納IDは管理画面の操作によって異なる

今となってはちょっとずつ理解できているのでなんとなく分かることも多いですが、これを調べていた時の私はWordpress Codexの各テーブルのフィールド解説を読んでもチンプンカン。親ってなんや！添付ファイルが所属する記事IDってなんや！何がどう違うんやっ！！！ってほぼほぼ半泣き。笑
アイキャッチ画像の登録をいろいろな方法で試してみた結果、post_parentに格納されるIDが3パターン存在することが分かりました。

パターン1：記事編集画面にあるところからアイキャッチ画像を新規登録
⇒この場合は記事IDが格納されます。

パターン2：メディアに新規登録したあと、記事編集画面からアイキャッチ画像を登録
⇒この場合は記事に依存しない画像という扱いになるので、一律ゼロが格納されます。

パターン3：他の記事で使用・登録された画像を作成中記事のアイキャッチ画像として使う
⇒この場合、流用元の記事IDが格納されます。

まとめ

WordpressはDBやプログラムが分からなくても簡単にWebサイトが作成出来るのが売りなのに、完全無視してDBを穴が開くほど見た結果、ちょっと楽しくなってきちゃいました。（今となっては前職の経験に感謝！笑）おそらく需要はないと思いますが、まだまだ同じようなアハ体験がけっこうあるので、ちょこちょこまとめて行きたいと思います。

おまけ

現在、絶賛中途採用募集中です！
もしご興味ありましたら、中途採用ページよりご応募ください。
※小声）一生懸命、中途採用ページをリニューアルしたので見に来てください！笑

■株式会社サンシーア@上野（最寄り駅：銀座線 稲荷町駅）
https://www.sunseer.co.jp/recruit/careers/position.html

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T18:35:00+09:00

@contentを使って、@mixinにスタイルセットを渡す

@mixin（ミックスイン）おさらい

Mixin（ミックスイン）は関数に近く、
CSSスニペットに名前を付けていつでもどこでも呼び出せるというイメージ。

mixの呼び出しは@include で呼び出す。

app.css
/*
ミックスイン
よく使うものをスニペットとして保存しておこう
*/

/* 
ミックスインの作り方
頭に@mixinを付ける

@mixin 名前($変数1,$変数2,...){

    プロパティ1:$変数1;
    プロパティ2:$変数2;
    プロパティ3:$変数1 $変数2 ...;
}
*/

/*
ミックスインの使い方 
頭に@includeを付ける

@include 名前(値1,値2,...);
*/

（例）

@mixin btn() {
  display: block;
  padding: 20px 30px;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  background-color: #20aee5;
  text: {
    decoration: none;
    align: center;
  }
}

.footer__sns__btn {
  @include btn(); // 『@include class名()』で呼び出し
}

@content の使い方

・ @mixinの中で@content;と記述するとコンテントブロックを渡すことができる
・ これにより1つのmixinで呼び出し側に合わせた処理が可能

例えば、mixin,scssというscssファイルに
スマートフォンでのレスポンシブを@mixin似て呼び出せるようにしておきます。

mixin.scss
@mixin sp {
  @media screen and (max-width: 767px) {
    @content;
  }
}
例.scss
.p-top-training {
  margin: 60px auto;
  padding-bottom: 98px;
  position: reltive;
  @include sp {
    margin-top: .8rem;
    padding: 0 .2rem .6rem 0;
  }
&-content {
    background: url(/xxx/xxx.jpg) no-repeat center/cover;
    width: 1120px;
    height: 600px;
    padding: 100px 100px 155px 420px;
    @include sp {
      background: url(/xxx/xxx.jpg) no-repeat center/content;
      height: 5rem;
      padding: .6rem .4rem .8rem;
      width: 355px;
    }
  }
  &-background {
    background: url(/xxx/xxx.png) no-repeat center/contain;
    width: 1276px;
    height: 240px;
    position: absolute;
    right: 0;
    bottom: -29px;
    z-index: -5;
  }
  &-title {
    font-size: 60px;
    letter-spacing: 6px;
    color: #fff;
    text-align: center;
    @include sp {
      font-size: .4rem;
      letter-spacing: .04rem;
    }
  }

こうすることによって各クラスに対して記述した
@include sp {}の部分が@contentの部分に挿入されて行きます。
レスポンシブ対応などは、下にまとめて記述するより、タブレットごとの相違が一目瞭然になるのでわかりやすくなります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T15:03:19+09:00

flexboxを使用した横スクロール可能なレイアウト

概要

cssのflexboxを使用しつつ、横スクロールが可能なレイアウトのサンプルです。flexの設定ですこし手間取ったので記録しておきます。要件は以下の通り。

  • 横幅を縮めると横スクロールになる
  • 横幅を広げると中身の数で均等に分かれる
  • 中身の文字列が多い時は、改行せずに横幅が広がる

サンプル

See the Pen scroll-x flexbox by T_Y (@y___k) on CodePen.

flexboxの外側でoverflow-x: autoして、中身にflex設定をするだけです。
flexは、flex-grow, flex-shrink, flex-basis の一括指定プロパティです。（MDN）

flex.scss
.item {
  flex: 1 0 200px;
  // flex-grow: 1; … 横幅を広げた時にいっぱいまで広がるように設定
  // flex-shrink: 0; … 横幅が調整されて縮まらないように設定
  // flex-basis: 200px … 基本の幅を指定
}

備考

IE、Edgeは未確認です。確認後に追記します。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T14:41:38+09:00

オリジナルWebサービス -Lunches- (フルスクラッチ開発)

はじめに

フロントエンジニアを目指してプログラミング学習をしている小林と申します。
本記事ではオリジナルWebサービス「Lunches」の概要や制作過程について説明します。

スクリーンショット 2019-11-08 午後5.15.02.png

URL

リンク:Lunches

目的

  • フルスクラッチ開発でPHP、SQLの言語理解を深める
  • Webサービスの基本的な構成、動作を把握する

スペック

プログラミング言語:HTML５/ CSS3 / Javascript / PHP

データベース言語:MySQL

開発環境:macOS Catalina 10.15.1

バージョン管理:SourceTree

本番環境:さくらサーバー

機能

ユーザー管理機能
　・ユーザー登録
　・ログイン
　・プロフィール編集
　・ユーザー削除機能
　・退会

イベント機能(メインサービス)
　・イベント投稿
　・イベント詳細
　・イベント一覧(ページネーション)
　・カテゴリー検索、日付検索

サービス概要

「Lunches」はランチタイムに恋愛やビジネス、友達作りなどもイベントを気軽に開催することができる　
Webサービスです。
インターネットを通じて人との交流を活性化させることを目的として制作しました。

開発手順

1.ワイヤーフレーム作成

7つブラウザ画面をノートに手書きでワイヤーフレームを作成しました。

2.テーブル設計

実装させたい機能から必要な情報を洗い出し、それに応じてテーブルを作成しました。
作成したテーブルは以下の3つです。

users
users.png

event
event.png

category
category.png

3.画面モック作成

ワイヤーフレームを元にHTML・CSSでコーディングを行い画面モックを作成しました。

セキュリティ

バリデーションチェック

　・未入力チェック
　・Email型式チェック(正規表現)
　・Email重複チェック
　・最大、最小文字数チェック
　・半角英数字チェック
　・同値チェック

＊コード一部抜粋
スクリーンショット 2019-11-27 22.18.15.png

例外処理

DBへ接続する際にはエラーで接続できない可能性を考慮して「try」「catch」で例外処理を行っています。
スクリーンショット 2019-11-29 21.11.58.png

セッションIDの再生成

セッションハイジャックによって第三者による乗っ取りを防ぐためにsession_regenerate_idを使用
この関数をコールすることで現在のセッションデータを保持したまま、セッションIDを新しくすることができる。
session.png

パスワードハッシュ

スクリーンショット 2019-11-29 22.20.27.png
DB側でユーザーのパスワードが漏れないようにパスワードをpassword_hashでセキュリティを高めています。

スクリーンショット 2019-12-04 19.54.15.png

ログイン時にはpassword_verifyを使用してハッシュ化されたパスワードと照合しています。
このとき第一引数である$passにはフォームからpostされたパスワード
そして、第二引数にはDBから配列形式で取り出した情報を$resultに詰め
array_shiftを使って先頭のパスワードを取り出しています。

SQLインジェクション対策

DB接続時にはプレースホルダーを使用し、SQL文を作成。
値をバインドすることでSQLインジェクション対策を行っています。
スクリーンショット 2019-12-04 21.30.56.png

Lunchesの使い方

①イベントの登録・　プロフィール編集

スクリーンショット 2019-12-18 14.18.27.png
イベント投稿、プロフィール編集の画像登録ではjQueryを使用し、ドラック&ドロップでファイルをinputすることができます。

②イベント一覧・検索機能

スクリーンショット 2019-12-18 14.25.58.png
イベント一覧ページではGETパラメータを使用して、ページネーションと検索機能を実装しています。
検索機能はカテゴリー検索、投稿日時のソート順検索ができます。

今後の課題

・スマートフォンにも対応したレスポンシブデザイン
・オブジェクト指向に基づく、保守性の高いコード設計
・FLOCSSをベースとしたCSS設計

主に以上の３点です。
特に様々なデバイスからアクセスされるユーザーを想定したレスポンシブデザインでの設計は
現在のWebサービスでは必要不可欠な物だと思いました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T14:24:07+09:00

Vue Fes Japan 2019 公式サイトから学ぶ CSS コーディングの知見

この記事は CSS Advent Calendar 2019 の 20日目の記事です。

Vue Fes Japan 2019 が開催中止になってしまい、大変残念だったのですが... :cry:
（私は Vue.js 日本ユーザーグループのコアスタッフで、今回は Web サイト制作班として少しコミットしていたのでした）

先日公式サイトのソースコードが無事公開されました :tada:
そこで、Web サイト制作で得た CSS の知見がとてもためになったので、いくつかご紹介していきたいと思います。

Vue Fes Japan 2019 公式サイト

公式サイト： https://vuefes.jp/2019/
GitHub： https://github.com/vuejs-jp/vuefes-2019

2019 の公式サイトも、2018 の公式サイトと同様に、Nuxt.js の静的ファイルの生成機能を使って作成しています。

CSS の構成について

このように、「グローバルな CSS」と「閉じられた CSS（Scoped CSS）」で構成されています。

ちなみにこのプロジェクトでは UI フレームワークや CSS フレームワークは使っていません。

コーディングするときにとても嬉しかったポイント

Web サイトデザイン主担当の沖さん（@448jp）が、Web サイトの仕様をドキュメント化して共有してくれました。

スクリーンショット 2019-12-18 5.04.40.png

これがとても詳細まで定義されており、ブレークポイントごとの余白や、フォント・色などを CSS プロパティで指定してくださったおかげで、悩まずにすばやく実装することができました。

つよい... :muscle:

私は普段デザインカンプをもらってコーディングをするとき、ブレークポイント付近のデザインをエスパーしてコーディングしたり、仕様を自分で決めたりしていたのですが、そうするとデザイナーさんと齟齬が生まれたり手戻りが発生したりして、開発に余計な時間がかかってしまうことがあります。

沖さんのようなデザイナーがいる環境というのは、なかなか恵まれていると思うのですが、Web サイトをデザインする人は詳細な仕様を明文化することで、実装側がとても助かるということを知ってもらえると良いなと思いました :pray:

CSS コーディングの知見

グローバルな CSS の設計について

CSS の各レイヤーをディレクトリやファイルごとに分類することで、どんな意味を持った CSS をどこに配置するか、共同開発する際にメンバーと認識が合うようになります。

  • foundation
    • colors.scss ... 色の変数
    • reset.scss ... normalize.css によってブラウザごとの差異を整えた後に、さらにリセットしたいブラウザのデフォルトのスタイル
    • typography.scss ... タイポグラフィのスタイル
    • variables.scss ... 共通化して使える変数
  • main.scss ... 各 SCSS ファイルを import しているファイル
  • media_queries.scss ... メディアクエリによって要素を表示させるか否かを制御できるクラス
  • utilities.scss ... 各画面で共通して使えるクラス

また、foundation 配下の CSS を開発初期の段階で固めておくことで、CSS フレームワークを使わずとも統一感のとれた CSS を書いていくことができます。

ブレークポイントの名称は sp pc ではなく sm md lg を使う

私は今まで、ブレークポイントの切り替えで使う変数名の表記には sp pc を使っていたのですが、この 2パターンだと中間層のサイズのブレークポイントを書きたい際に困ることがありました。

ブレークポイントの名前をサイズの名前にすると、中間層のサイズも柔軟に表すことができるようになるのでオススメです。

https://github.com/vuejs-jp/vuefes-2019/blob/master/src/assets/stylesheets/foundation/variables.scss#L1-L4

$layout-breakpoint--is-small: 768px !default;
$layout-breakpoint--is-small-up: 769px !default;
$layout-breakpoint--is-medium: 980px !default;
$layout-breakpoint--is-medium-up: 981px !default;

sm （モバイル）サイズの要素の指定を相対指定にする

モバイル端末の違いによって、文字やコンテンツの幅が大きく変わってしまう問題については、サイズを相対指定（vw）にすることで解決しています。

スクリーンショット 2019-12-18 5.47.43.png

スクリーンショット 2019-12-18 5.48.07.png

文字やコンテンツの幅を相対指定にすることで、iPad と iPhone SE というような画面幅が違う端末でも、画崩れを起こさずに表現することができます。

ちなみにデスクトップサイズ以上の文字については、固定で指定しています（さすがにラップトップと大きいサイズのモニターでは幅が違いすぎるため）

計算が簡単なカードリストレイアウトの実装方法

SPONSORS セクションでは、スポンサープランごとに 1列に並ぶカードの幅を変える必要がありました。

  • ゴールドは 1列 4カード、シルバーは 1列 5カード... というように並ぶ
  • それぞれ 20px のガター（余白）がついている

スクリーンショット 2019-12-18 6.44.43.png

当初、これを実装するために考えていたこととしては、

  • スポンサープランごとのカードの幅を計算する
  • カードの margin-right と margin-bottom に 20px を設定する
  • 右端に来る n 番目のカードは、 margin-right: 0; を設定する
    • n 番目の n の値は、スポンサープランごとに変わる

というようなことを書こうとしましたが、計算と実装が複雑になるため、別の方法をとることにしました。

計算が簡単になる方法として、ネガティブマージンと calc() を使うやり方があります。

template
    <ul
      v-for="sponsorPlan in sponsorPlansHavingSponsors"
      :key="sponsorPlan.plan"
    >
      <li class="sponsor-group" :class="sponsorPlan.plan">
        <h3 class="sponsor-plan">
          {{ sponsorPlan.name }}
        </h3>

        <ul>
          <li
            v-for="sponsor in sponsorsByPlan(sponsorPlan.plan)"
            :key="sponsor.sys.id"
            class="sponsor"
          >
            <!-- ... -->
          </li>
        </ul>
      </li>
    </ul>
scss
.sponsor-group {
  ul {
    display: flex; // flexbox で実装する
    flex-wrap: wrap; // アイテムがはみ出したときに折り返すようにする
    justify-content: center; // 中央揃えにする
    width: calc(100% + 20px); // ?幅を左右のガター分プラスする
    margin: -10px; // ?ネガティブマージンを使って余白を広めにとる
  }
  .sponsor {
    margin: 10px; // ?ガターの半分の幅を指定する（要素が隣り合うとガターの幅になる）
    width: calc((100% / 5) - 20px); // 普通サイズ（シルバー）の Sponsor バナーの横幅
  }
}
.sponsor-group.bronze {
  .sponsor {
    width: calc((100% / 6) - 20px); // ブロンズのバナーのときの横幅
  }
}
.sponsor-group.gold,
.sponsor-group.special {
  .sponsor {
    width: calc((100% / 4) - 20px); // ゴールド、スペシャルのバナーのときの横幅
  }
}

まず .sponsor-group にネガティブマージンを使って、ガターの幅分だけ要素の幅を広めに指定します。

次に、カードの上下左右にガター分の margin を指定します（このときガターの半分の幅を指定することで、カードが隣り合うとガターの幅になります）

そして、カードの幅を calc() で計算して、flexbox で要素を並べると、簡単にカードリストが出来上がります。

ちなみにカードの幅の calc((100% / 5) - 20px); という部分は、

(sponsor-group の幅 / 1列に入るカードの数) - ガターの幅

という計算式になります。

こうするとことで、 1列に入るカードの数 を変更すればカードの幅が変わるので、とても計算が簡単になります。

vuefes-2019/TheSponsorListSection.vue at master · vuejs-jp/vuefes-2019

↑のコードは TheSponsorListSection の簡略版ですが、コードだけではネガティブマージンをとっているあたりが分かりにくいと思うので、CodePen を用意しました。

See the Pen CSS coding for card list layout by rry (@ryamakuchi) on CodePen.

https://codepen.io/ryamakuchi/pen/LYExRpa

  • group
    • ネガティブマージンを width を使って、全体的にガターの幅分を広めにとる
  • card
    • 上下左右にガターをつけて、calc() で幅ぴったりにする

当初考えていた、左側と下にガターをつける方法と比べると、右端に来る n 番目のカードのスタイルの上書きをするということがなくなるため、計算が簡単になります。

補足：ちなみに calc() は、IE 10 / IE 11 では一部うまく機能しない場合もあるため、実装するときは気をつけてください。

まとめ

CSS の設計をきちんと行うことで、フレームワークを使うことなく、メンテナンスしやすい＆共同開発しやすいサイト作成ができました。

もし CSS / UI フレームワークを使うことを検討しているのであれば、

create-nuxt-app で利用できる UI フレームワークを比較する - Qiita

も、あわせてご覧いただければ幸いです。

メリークリスマス！ :christmas_tree:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T13:58:23+09:00

コーディング初心者卒業！BEMを使用して簡単にCSS設計をしてみよう。

Ateam cyma Advent Calendar 2019、22日目です！
本日は株式会社エイチームでcymaのデザイナーをしている @ryo_cy が担当します。
今回はBEMというCSSの命名規則について、画像を使いながらわかりやすく説明していこうと思います！

BEMとは？

BEMとはBlock、Element、Modifierという3つの要素の頭文字を取ったものになります。
命名の書き方はblock__element--modifierとblockを先頭に記述します。
いきなりBlock、Element、Modifierと言われても何かよくわからないので、簡単に図にまとめてみました。
オレンジ色の枠で囲んでいる塊がBlock。
緑色の枠で囲んでいる要素がElement。
紫色で囲んでいる装飾部分がModifier。
以下の図を参考にしてBlock、Element、Modifierをより詳しく見ていきたいと思います。
Component.png

Block

Blockは、要素をまとめているメイン、サイドバー、記事のリスト一覧など、大きな塊部分を示します。
先程の図でいうと以下のオレンジ色の部分になります。
ComponentBlock.png
図のカード型コンテンツのフレームがBlockになります。
htmlとscssは以下のようになります。

html
<div class="card">
</div>
scss
.card {
  border: 1px solid #ccc;
  padding: 20px;
}

Element

Elementは、大きな塊の中に入っているタイトルやボタン、説明文などの細かな部品を示しています。
先程の図でいうと以下の緑色の部分になります。
ComponentElement.png
図のカード型コンテンツのフレームに入っている各要素がElementになります。
htmlとscssは以下のようになります。

html
<div class="card">
  <img class="card__image" src='a.jpg'>
  <h1 class="card__title">Title</h1>
  <p class="card__description">Lorem ipsum dolor ...</p>
  <a class="card__link">More</a>
</div>

クラス名を記載するときは以下のようにblock__elementという規則で命名します。

scss
.card {
  border: 1px solid #ccc;
  padding: 20px;
  &__image {
    width: 100%;
  }
  &__title {
    font-size: 24px;
  }
  &__description {
    margin-top: 10px;
  }
  &__link {
    padding: 5px 30px;
    border: 1px solid #ccc;
  }
}

scssを記載するときはblockの中に&__をつけてElement名を記載します。

このように記載することで可読性が上がることと、コンパイル時に一つのクラスとしてcssが書き出されるため、その他のクラス名と重複することがありません。
例としてblockとtitleがCSSで出力されるときは以下のようになります。

css
.card {
  border: 1px solid #ccc;
  padding: 20px;
}
.card__title {
  font-size: 24px;
}

Modifier

Modifierは、ボタンやタイトルに色をつけたりと、各要素の装飾を行う際に使用します。
例えば、先程の図の右側コンテンツのボタンだけ青くしたいときなどに使用します。
下の図の紫色の部分がModifierです。
ComponentModifier.png

今回はボタンの色を変化させるので、ボタンのクラス名にModifierを追記します。
htmlとscssは以下のようになります。

html
<div class="card">
  <img class="card__image" src='a.jpg'>
  <h1 class="card__title">Title</h1>
  <p class="card__description">Lorem ipsum dolor ...</p>
  <a class="card__link card__link--feature">More</a>
</div>

クラス名を記載するときは上記のようにblock__element--modifierという規則で命名します。

scss
.card {
  border: 1px solid #ccc;
  padding: 20px;
  &__image {
    width: 100%;
  }
  &__title {
    font-size: 24px;
  }
  &__description {
    margin-top: 10px;
  }
  &__link {
    padding: 5px 30px;
    border: 1px solid #ccc;
    &--feature {
      color: #fff;
      background: #55C0E1;
      border: 1px solid #55C0E1;
    }
  }
}

Modifierを記載するときはblockもしくはElementの階層中に&--をつけてModifier名を記載します。

BEMの必要性

BEMについて簡単に説明しましたが、なぜBEMを使用する必要があるのでしょうか。
私が思うに、以下の点が挙げられます。
- 保守性が高くなる
- 可読性が上がる
- 再利用がしやすい

保守性が高くなる

一番の理由とも言える部分です。
命名を規則化する事によって、保守性が高くなります。
BEMの規則上block要素が1つになるので、各要素のまとまりごとに管理することができ、要素の追加、削除を簡単に行うことができます。

ComponentMaintainability.png

可読性が上がる

BEMはblock__element--modifierと、記述する規則があるため、SCSSで記載する際にネストが深くなりすぎず、すぐに読み解くことができます。

ComponentReadability.png

再利用がしやすい

BEMはblockを起点として1つの塊で使用しているため、ページ内でコンテンツを移動したときや、同じデザインでコンテンツを追加した際に、他のスタイルによる影響を受けないため再利用がしやすくなります。

ComponentReuse.png

BEMをもう少し実用的に使用してみる

簡単にBEMの書き方、特徴を説明してきたので、ここからはもう少し深掘りして見ていきたいと思います。
先程までの説明は、1つのブロックに対しての説明のみでしたので、複数の要素が関わる場合どのように考え、記述していくのかを把握することによってよりイメージがしやすくなると思います。
まずは以下のようなデザインがあったとします。

ComponentMix.png

このデザインを制作する場合、どのようにBlockとElementを分けていくのか最初に考えてみましょう。

デザインをBlock、Elementに分けてみる

先程のデザインを分けてみると以下の3つのブロックに分けることができます。

ComponentMixBEM.png

ポイントはボタンをBlockとして分けて考えているというところです。
Blockを分けて考えることによって、デザインパターンが違っても1度作ったソースコードを簡単に再利用することが可能になります。
それでは実際にソースを見ていきましょう。
(SCSSはセレクタの構造を見やすくするため、プロパティを簡素化しています。)

HTML

html
<div class="feature">
  <img class="feature__image" src="a.jpg">
  <div class="feature__copy">
    <h1 class="feature__title">Lorem ipsum dolor sit amet consectetuer adipiscing elit</h1>
    <p class="feature__description">Lorem ipsum dolor sit amet consectetuer adipiscing elit...</p>
    <a class="button" href="#">More</a>
  </div>
</div>

<ul class="cardList">
  <li class="cardList__item">
    <img class="cardList__image" src="b.jpg">
    <h2 class="cardList__title">Title</h2>
    <p class="cardList__description">Lorem ipsum dolor sit amet consectetuer adipiscing elit...</p>
    <a class="button" href="#">More</a>
  </li>
  <li class="cardList__item">
    <img class="cardList__image" src="c.jpg">
    <h2 class="cardList__title">Title</h2>
    <p class="cardList__description">Lorem ipsum dolor sit amet consectetuer adipiscing elit...</p>
    <a class="button" href="#">More</a>
  </li>
  <li class="cardList__item">
    <img class="cardList__image" src="d.jpg">
    <h2 class="cardList__title">Title</h2>
    <p class="cardList__description">Lorem ipsum dolor sit amet consectetuer adipiscing elit...</p>
    <a class="button" href="#">More</a>
  </li>
</ul>

SCSS

scss
.feature {
  overflow: hidden;
  position: relative;
  &__image {
    float: right;
    width: 60%;
  }
  &__copy {
    position: absolute;
    top: 45px;
    left: 0;
  }
  &__title {
    font-size: 1.5rem;
  }
  &__description {
    font-size: 0.875rem;
    margin: 20px 0 40px;
  }
}

.cardList {
  display: flex;
  justify-content: space-between;
  &__item {
    width: 32%;
    border: 1px solid #ccc;
  }
  &__image {
    width: 100%;
  }
  &__title {
    font-size: 1.5rem;
  }
  &__description {
    font-size: 0.875rem;
    margin: 5px 0 20px;
  }
}

.button {
  padding: 5px 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

再利用するデザイン要素がある場合は、上記のようにブロックを分けることでソースコードが理解しやすくなるとともに、管理も簡単になります。

まとめ

BEMを使ったCSS設計の考え方や書き方について紹介させていただきました。
ごく一部のデザイン例を参考に記載しましたが、今回の内容を意識してサイトの構築をしてもらえれば管理のしやすい構造になっていくことでしょう！
最初のうちはどこでBlockを切り分けたらいいのか戸惑うかもしれませんが、デザイン全体を見たときに再利用できる部分を1つのまとまりとして認識していくことによって、徐々に慣れていくと思います。

今回は有名で考え方も簡単なBEMを紹介しましたが、CSS設計はBEMの他にもFLOCSS、SMACSS、OOCSSなど様々な手法があるので、サイトの規模やチームによって何を選択していくのかが、構築・運用していく上で大切になっていきます。
この記事が皆さんのCSS構築の参考になったら幸いです。

おわりに

Ateam cyma Advent Calendar 2019の22日目、いかがでしたか？
23日目は@sakura523さんがゲームUIデザイナーからWebデザイナーにジョブチェンした話をしてくれますのでお楽しみに！

株式会社エイチームでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。

エンジニアで興味を持った方はcymaのQiita Jobsをご覧ください。

そのほかの職種は、エイチームグループ採用サイトをご覧ください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T10:42:19+09:00

フィーリングでHTMLとCSSを書いていた新卒が模写コーディングをやった話

Ateam Lifestyle Advent Calendar 2019の21日目は
株式会社エイチームライフスタイル @kmfjが担当します！
初めての投稿で至らぬ点もありますがよろしくお願いします。

はじめに

新卒でwebデザイナーをやっています。
普段はビジュアル〜マークアップ領域までを業務として行なっています。

きっかけ

一からサイトを作った経験はあるものの独学で生き抜いてきたため、入社前までは

  • コピペで組み立て
  • コードの意味はなんとなく理解
  • 見た目を見ながら無理やり調整

のパワー型脳筋コーディングでなんとか組み立てていました。

なんとなくは理解しているため、ProgateのHTML、CSSコースなどは問題なくクリアできました。
ですが、いざ実務レベルでコーディングとなると「どう構造化して実装したら良いか」がわかりませんでした。
その対策として取り組んだ模写コーディングが勉強になったと思っているので、どのように行なって、何がよかったかを記載したいと思います。

やったこと

行ったことは以下の通りです。

1. 模写するサイトを選ぶ

選んだ基準としては、サイト構造が自社のサイトに近く、今後活かせそうなものを選びました。デザインが好みのサイトなど、自分が楽しんでできるサイトなどでもいいそうです。

2. 同じ見た目になるよう自分なりにコードを書く

どうしたら同じようになるか考えながらHTMLとCSSでコードを書いていきます。

3. 本物のサイトと比較する

Chromeの検証機能などを活用して、自分が書いたコードとどこが違うか？違う場合はどうして違うか？を考えます。

気をつけた点

模写元のコードは基本的に見ない

自分で構成することを身に付けることが目的なので、極力コードは見ないようにしました。ですが、画像やカラーコードなど考えても意味のないものはコピペしたり省略したりしました。

px単位での正確性は追求しない

見た目からコードに落とし込むことが重要なので、サイズや余白などは全体レイアウトが合っていれば問題ないと思います。
「良いレイアウトを学ぶこと」や「デザインに対して完璧なコードを書くこと」が目的であればもちろんpx単位で合わせるべきですが、今回の目的とはズレるためこのルールを設定しています。

よかったこと

見た目からHTMLの組み立て方がわかってくる

ここはこういう構造にするとうまくいきそう、という勘所がわかってきます。

単純に実装パターンの幅が広がる

これが表現したい時はこうすればいいのか、が調べながら制作するうちにわかってきました。

学んだこと

上記に書いた「よかったこと」以外にも、自分で書いたコードと模写元のコードを比較すると気づくことも多かったです。大きく感じた差異は以下の2点です。

意味を考えてタグを選ぶこと

意味に合わせてタグを選ぶことで、共同作業者も理解しやすく、機械も理解しやすいコードになるのだと分かりました。
例えば、似たようなリンク要素が並んでいるコードに以下のような違いがありました。

私の書いたコード
<div class="p-content__list">
  <a href="/" class="p-card">
    <img src="images/xx.png" alt="ほげ" class="p-card__img" />
    <div class="p-card__caption">
      <span class="c-textS">ほげ</span>
    </div>
  </a>
  <a href="/" class="p-card">
    <img src="images/yy.png" alt="ほげほげ" class="p-card__img" />
    <div class="p-card__caption">
      <span class="c-textS">ほげほげ</span>
    </div>
  </a>
</div>
模写したサイトのコード
<ul>
  <li>
    <div class="category">
      <a href="/" class="item">
        <p class="thumb">
          <img src="images/xx.png" alt="ほげ">
        </p>
        <div class="categoryLabel">
          <span>ほげ</span>
        </div>
      </a>
    </div>
  </li>
  <li>
    <div class="category">
      <a href="/" class="item">
        <p class="thumb">
          <img src="images/yy.png" alt="ほげほげ">
        </p>
        <div class="categoryLabel">
          <span>ほげほげ</span>
        </div>
      </a>
    </div>
  </li>
</ul>

※内容を変更しています

いくつか異なる点がありますが、例えば複数の要素が並列で並んでいる場合、私は単純に<div>で囲んでいましたが、模写元のサイトでは<ul>要素で囲んでいました。意味を考えると、<ul>要素でくくるべきだと思います。

要素が単体で存在できるような記述

長期的に運用していく場合は、要素が入れ替わったり、無くなったりしても崩れないコードが理想だと思います。現在利用されているサイトでは、そういった今後の運用を見越した実装になっていると思いました。

例えば私が書いたコードは周りを囲う要素にpaddingを持たせていましたが、模写元は要素それぞれにpaddingを持たせていました。要素が入れ替わる可能性のある場合、そちらの方がいいかもしれません。

それ以外にも、コーディングだけでなくレイアウトや命名の仕方で学ぶ点も多々ありました。

まとめ

部分部分でのコードはかけるけど、一から作ることが苦手な人にとっては、組み立て方を学ぶいい手段になると思います。
また、実際に利用されているサイトのコードと比較することで、気づかされることも多くあると思いました。

最後に

ここまで読んでいただきありがとうございました！

Ateam Lifestyle Advent Calendar 2019の22日目は、@hytkgamiがお送りします！

"挑戦"を大事にするエイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。
https://www.a-tm.co.jp/recruit/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T08:43:47+09:00

HTML/CSS復習　marginの相殺及びmarginの無効化について

はじめに

現在自分はHTMLとCSSをもう一度復習しようと思い、HTML・CSSのモダンコーディングという技術書で復習をしています。
今回は、その復習途中で出会った、新しく覚えたことや重要な部分をまとめていきたいと思います。

marginの相殺

marginとは、borderの外側の余白のことを言い、上下のmarginが隣接する別のmarginと重なってしまった場合、marginの総裁が起きてしまいます。

marginの無効化

今まで気づかなかったのですが、小要素の上下のmarginは無効化されてしまいます。
その解決策としては、親要素にborderプロパティで明確なborderを作ることや、小要素に実際にmarginを設定するのではなく親要素のpaddingを設定することで解決することができます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T02:20:57+09:00

エヴァ感のあるエラー画面をCSSアニメーションで作った話

ブラウザで表示するページを作るとき、つい作り込むのが面倒でサボりがちなのが 「エラーが発生した際にユーザに通知する画面表示」

特に私はインフラエンジニアなので、普段CLI経由での操作が多いため、ちょっとしたコードのエラーハンドリングなどは 「最悪コンソールに表示すればいいや」 くらいの感覚であまり「エラーをユーザに通知する部分」の実装に力を入れた経験がありませんでした

この記事ではこちらで紹介したOSSに「サーバで実行したShellScriptと、その実行結果をブラウザに表示する」という機能を追加する際に「ShellScriptがエラー終了したときの画面」を作る必要があったので、その実装方法を紹介します

実際の画面

まずは実際に作った画面を見てみましょう

error-submarine.gif

背景には実際にエラーが発生した際に catch されるオブジェクトをJSONに変換して表示しています

画面の中央で点滅しているのがエヴァ感を演出するメッセージになります

エラーメッセージが英語なので「警告」の文字だけ日本語にするのも統一感がないかと思い、英語でERRORと表示することにしました

エヴァ感について

エラー画面を作る際に、デザインの経験が全くない私が「エラーのような異常事態が発生したときに表示される画面」で、最初に思いついたのが、エヴァの「警告」画面でした

丸パクりするわけにはいかないので、エヴァのあの画面の「警告」感とは、いったいどういった要素で構成されているのか、というのを私なりに考え、以下のポイントをおさえて実装するようにしました

  • 赤or黄のような警戒色 + 黒で画面を埋める
  • 文字(メッセージ)が際立つようになっている(ここでは太くした)
  • 点滅などの比較的動きが早く、注意を引くアニメーションがある

実際の HTML / CSS を見てみる

HTMLタグは単に div 要素を使っています。内側の文字は h2 p です

error.html
<div id="error_baner">
  <h2>ERROR</h2>
  <p>Something wrong occurred</p>
</div>

cssは少し長いです。 flex-box で文字をレイアウトしていますが、CSSアニメーションとはあまり関係ないので、説明は割愛します

error.css
  <style>
    #error_baner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      position: fixed;

      padding: 17px 17px 17px 17px;

      border-style: solid;
      border-width: 4px;
      border-color: rgba(255,0,0,1.0);
      border-radius: 17px 17px 17px 17px;

      background-color: rgba(0,0,0,1.0);
      ...(続く)...

ここからが CSSアニメーション にかかわる部分です

error.css
      ...(続く)...
      animation: flicker 0.85s linear 0s infinite alternate none running;
    }
    @keyframes flicker {
      0% {
        opacity: 0.0;
      }
      50% {
        opacity: 0.34;
      }
      100% {
        opacity: 0.85;
      }
    }

    #error h2 {
      font-size: 34px;
    }
    #error p {
      font-size: 17px;
    }

@keyframe flicker の中で時間変化(%で表現)にともなって opacity (要素の不透明度) を変化させるように定義しておいて、それを実際の要素に適用するときには animation: flicker ... と指定します

そしてアニメーションのスピードや開始時間の遅延などをのパラメータを設定すれば、完成です

CSSアニメーションの使い方の説明は、探せばより詳しい記事が出てきますので、こちらでは簡単に説明します

animation:
  <animation-name アニメーションの名前(@keyframesで指定した名前)>
  <animation-duration アニメーション開始から終了までの時間>
  <animation-delay アニメーション開始までの遅延時間>
  <animation-iteration-count アニメーションを繰り返す回数>
  <animation-direction アニメーションの再生方向(0% -> 100%, 100% -> 0%など)>
  <animation-timing-function アニメーションの緩急の付け方>
  <animation-fill-mode アニメーション終了後にもcssを適用したままにするか>
  <animation-play-state アニメーションを実行するか>

おわりに

CSSアニメーションが登場したおかげで、デザイナーでもフロントエンドエンジニアでもない私でも、JavaScriptをこねくり回すことも無く、凝った表現を実現する敷居がかなり下がったように思います

今後エラー画面を実装する方に、何らかのインスピレーションになればと思います

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-18T01:23:41+09:00

【JavaScript/CSS】スクロールしたら順番に要素を表示するデモ（IntersectionObserver使用）

はじめに

Webページで良く見る、スクロールしたら順番に要素が表示される演出のデモを作成してみました。

JavaScriptのIntersectionObserverを使っています。

環境

OS: macOS Catalina 10.15.1

結論：デモ

各要素の数字は、data-delayを何秒に設定したかです。
参考までに表示してあります。

See the Pen PowbvVx by terufumi (@terufumi1122) on CodePen.

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

どなたかの参考になれば幸いです:relaxed:

参考にさせて頂いたサイト（いつもありがとうございます）

IntersectionObserver?! Scroll Activated Animations & More with No Dependencies - YouTube

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧