title-css
Design

cssを知るべし

こんにちは!新人森田です。
デザイン情報を集めるために、最近おすすめニュースを自動配信してくれるアプリをDLしてみました。デザイン系ニュースをお気に入りするようにしてるのに、食べ物ネタが日に日に増えてる気がします。切ない。
それでは前回に引き続き、ハレノヒブログリニューアルプロジェクト(長い)の作業工程をまとめますね。

前回はwebページの骨組みであるhtmlタグのことを書いてみました。表記例で見たように<>で囲まれまくっていて、組み立てられてる感がすごくありました。でも、そのままだと実は文章が表示されるだけなんです(後でご紹介)。

骨にはやっぱり肉がついてないとおいしくない!

blog-img-5
(画像は骨付いてないですがめちゃめちゃおいしかったです)

というわけで今回のテーマは、そのhtmlの要素を装飾する=肉付けするスタイルシートについてです。

cssとは

繰り返しになってしまいますが、webページの構造のための記述がhtmlで、その表示を調整する記述がcssです。cssはそれだけだと一人ぼっちなので、htmlとリンクさせて使います。前回のサンプルデータを例に見てみます。

blog-img-3

これで準備完了です。このhtmlにcssで設定されたスタイルが反映されるようになります。

htmlとcssが固い絆で結ばれていることは確かなんですが、cssの中にも書き方の違う兄弟みたいなのもいます。
cssの書き方とほぼ同じで色々ひとまとめに出来るscss、cssと書き方が違うけど上級者なら作業効率上がりそうなsass。その中で何を使うかというと、scssです。文法が同じ方が師匠や未来の自分と情報共有しやすいというのが主な理由。

scssはcssに変換して使うのがお約束です。
私は師匠直伝の[scout]というツールを使いましたがそれはまた別の機会に書くことにします。

htmlとcssの関係

htmlへの肉付けをするのはずばりこの部分です。

blog-img-4

htmlタグの中にclassという名前がついています。この名前に対して設定を書き込むことで、web上の表示をデザインの通りに仕上げていくという仕組みです。

これはタグ自身idclassという3種類の要素に対して有効です。
それぞれの違いをさらっと説明すると、
id:そのページ内で1つしか使えないオンリーワン
class:繰り返し使えて組み合わせも出来るオールラウンダー
タグ:idほど孤高ではないがclassほど器用でもない
って感じでしょうか。
とにかくclass推しってことです。

cssの記述例

それでは実際にcssがどんなものか見てみます。
scssを使う、と書きましたがサンプルは簡単な記述なのであんまりその恩恵は受けてなかったり。

blog-img-1

見るからにhtmlとは違いますね。classに対する設定をひたすら書いてます。@importや@includeというのがscssで出来る便利機能の1つで、繰り返し使うコードをまとめたmixin(ミックスイン)を使ってるということです。

cssをリンクしてない場合とリンクした場合で表示を比較してみます。

blog-img-2

このようにhtmlとcssを組み合わせて使うことで、一枚の画像だったデザインをwebページへと成形していきます。

師匠によると、プログラマは「DRYの原則」に基づいてコードを書いているそうです。これは”Don’t repeat yourself”の頭文字を取ったもので、同じコードを繰り返さず出来るだけ1回の記述でまとめる、ということです。

先ほど紹介したmixinが@import(取り込み)という形式で使われてることや、class推しも同じ理由からです。そうすることで全体の見通しも良くなる(=メンテナンスしやすい)し、共有しやすいし、作業効率大幅アップ!「DRYにコードを書く」とかカッコイイ!

ぺーぺーの森田はハレノヒブログのコードだけでもすごく時間がかかってしまいましたが、本来はこの辺はさくっと済ませたい部分。大量の文字列管理の裏側には色んな工夫がなされているんですね。

そんなこんなでhtmlとcssを使ってwebページという骨付き肉が出来上がりました。ちょっと無理矢理でした。私も早くDRYにコードの書けるクールビューティーになりたいです!押忍!

標準