title-css
Design

CSS3を知るべし その1

こんにちは!新人森田です。
師匠に影響を受けて土曜日にランニングシューズとジャージを買いました!
さっそくちょっと走ってみたらすぐお腹いたくなりました。
そういえば高校の時も、体育の授業のウォームアップランニング後にお腹いたくてしばらく休んでました。
前途多難です。

とはいえ、形だけでも整えてみるとちょっとモチベ上がりますよね。
NIKEの新品シューズなかなかいい感じです。
形…かたち…スタイル、といえばCSS?!

なかなか強引ですが今回はCSSの中でもCSS3についてまとめてみます。

CSS3とは

CSSはおなじみスタイルシートのことですが、3というのはそのバージョンを意味します。
偉い人たちが日々webの世界の仕組みを作り続けているんですね。
そのおかげで表現の幅も増えて、トレンドも変化していくわけです。

ただ、一言にCSS3といっても「CSS3はこういうものです」みたいに単純なものではありません。
色んな要素がありまくりますので、少しずつ切り分けて見ていきたいと思います。

CSSを使うにあたって

その前に、CSSを便利に使うためのツールについてご紹介します。イケメン揃いです。

イケメンその1:scss

blog-5

css記述における革命児scssさん!
cssは指定するclass等に対して個々に設定を書き込まなければいけませんが、scssは1つのclassの下にある要素のスタイルを入れ子にしてまとめて書くことが出来ます。また、@import、@includeを用いてmixinを使い、記述をコンパクトに。収納上手にお掃除した気分です。

ここまではcssを知るべしの時に書きましたが、実はまだまだあります。

blog-12

こんな風に$で変数を設定してそのまま使用することも出来ます。

他にも、スタイルの中に計算式を埋め込む関数や、複数classに使うスタイルを変数なしで設定出来る継承といった機能も備えています。なんかもうすごくすごいです。

イケメンその2:compass

blog-6

scssに使うmixinをまとめてあるのがcompassさんです。
たとえばfloat解除。floatというのは要素を横に並べる時によく使うスタイルです。が、これは要素を浮かせて並べているイメージなので、その下に来る要素は浮いてるものを無視して重なってきたりします(レイアウトが崩れます)。なのでfloatとセットで使うのがfloat解除です。解除方法にも色々ありますが、便利なのがclearfixというもの。本来何行か書かなければいけないこのclearfixを、compassさんはあらかじめ用意しておいてくれているんです。

まるで…まるで、そう。炊飯ボタンを押したらご飯が炊けるまで全自動ですみたいな。
(繰り返しする作業をワンタッチでお気軽に的な意味で)

イケメンその3:scout

blog-7

ここで満を持しての登場がscoutさん。私は師匠に教えてもらっていきなり使っちゃったりしてます。
compassなどを使って書いたscssを自動的にcssに変換してくれる最強(?)イケメンです。

scss書いただけではhtmlに「cssにして出直して来い」と突き返されてしまいます。この変換はscout以外だと手作業もしくはサーバーにやってもらうという手間や時間のかかる作業です。でもscoutならそんな工程をがっつり省略できちゃうんですね。

炊飯ボタンを押したら最短でご飯が炊けるみたいな。
(昨日作り置きで一気に5合炊いた時のインパクトが凄かったので米ネタがしつこいです)

CSS3の使用例(ハレノヒブログの場合)

では使う準備が出来たところで具体的に見てみましょう。
ハレノヒブログではCSS3の以下の機能を使っています。

  • 角丸処理
  • レスポンシブ対応
  • 不透明度の変更

blog-4

このへんです。さんざん前置きした割に地味です。
でもこういうちょっとしたところが全体の見え方にも影響してくるんです。

[角丸処理]

今までプロフィール画像といえば四角で、丸くするには丸い画像を用意しなければいけませんでした。規模が小さければそれでも対応出来ると思いますが、1つずつ丸く切り抜いて保存し直すっていうのをいちいちやるのは結構面倒です。
それが、border-radiusを使えば四角い画像を丸く見せちゃうことも出来るのです。

blog-2

□い頭が○くなった!

[レスポンシブ対応]

前の記事でも書きましたが、画面サイズを設定してレスポンシブにするのがMedia Queriesです。
これがなかったらすごい複雑なプログラミングとかするんだろうなぁと思うと神機能。

[不透明度の変更]

ハレノヒブログでは画像のhover時にopacityを使って不透明度を変えています。
hoverというのは、リンクが貼られた箇所にカーソルを合わせた時の状態のことです。主にPCでの話になりますが、hover時にちょっと変化をつけることでこの先にリンクがあるよっていう目印になったり、面白い演出になったりします。

不透明度に関しては、差し替え用の画像を用意したり細かく色設定したりしなくても全然オッケーです。

blog-3

compassさんにも助けられつつ、なんとこれだけ!

まとめ

というわけでCSS3の一部を見てみましたが、どれも以前までの作業を楽にしてくれるものばかりでしたね。
インターネット上にはすっごい数のサイトがあるわけで、その中でも目が留まるサイトを作るには沢山の工夫が必要です。そしてその工夫をもっと楽に作るための工夫がCSS3にたくさん搭載されたんだっていうのが、CSS3を実際に使ってみての私の感想です。

森田のweb知識は一昔前のものなので、今はこんなことが楽に出来るんだー!って日々驚きだらけです。
また新機能を使ったら報告したいと思います!ランニングの経過報告も成果があれば報告したいです…
ではでは今回はこの辺で!押忍!

標準
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にコードの書けるクールビューティーになりたいです!押忍!

標準