ここ数日なんか流行っているので悪乗りしてしまおうという魂胆。
http://cpg.hatenablog.com/entry/2016/06/30/193755
http://d.hatena.ne.jp/shi3z/20160701/1467330446
主要でもないプログラミング言語200種を一行で解説 - Qiita
http://daruyanagi.jp/entry/2016/07/01/181803
てかプログラミング言語って200以上もあるんだ……
プログラミング言語はよく知らないのでCSSでいってみよー！
max-width
レスポンシブデザインが主流になってからものすごく出番が増えたプロパティ。
img {
max-width: 100%;
width: auto;
height: auto;
}
ってやると、元画像サイズよりもウィンドウ幅が小さくなったら自動的に縮んでくれます。
たまにレスポンシブ対応を謳っているのにwidth:100%;だけでサイズ指定していて、大画面だと画像が引き延ばされてボヤァ〜ってなっちゃう残念なテンプレートがあったりして悲しくなることもありますね。
display
あらゆる要素の特性を変えてくれたり存在そのものを消去してしまう魔法のプロパティ。
使う値はblock, inline-block, table, table-cell, none, flex が多いですね。
たとえば
a {
display: block;
width: 100%;
height: 100%;
}
って指定すると親要素全体がクリック可能なリンクボタンに化けてくれます。スマートフォンでタップしやすいリンクボタンを作るのに大変重宝します。
また、
td {
display: block;
}
なんてやると、テーブルを崩して横に並んでいるセルを縦並びにしてしまうことができます。パソコンモニタのサイズでは普通の表を、スマートフォンでは縦に並べたい、なんてときに使えますね。
table-cellはtableと組み合わせて、横並びのナビゲーションメニューや文字の上下左右の中央揃えに活用することが多いですね。
さらに、要素ごとなかったことにしたい場合は、display: none; を使うことがあります。
こいつはなかなか凶悪な魔法でして、コードには残って見えるけど、ブラウザ、検索エンジン、スクリーンリーダーなどは完全に無視するようになります。display:none; 内にあるJavaScriptも動かなくなります。
ハンバーガーメニューやタブなど、普段は隠していてクリックしたら表示する、という動作をさせたいときに display: none; を使うのは避けましょう。
デフォルトで非表示のコンテンツは無いものと認識され、インデックスされない恐れがあります。またスクリーンリーダーユーザーにとっては最悪UXになりますので、まともなCSSコーダーは本当に限られた場所でしか使いません。
規約に書いてないのに勝手に広告を挿入されてせっかくのデザインを壊される、なんて場合につかうとよいと思います。
最近はflexが注目株となっています。関連プロパティと値と挙動を覚えるのが大変ですが頑張りましょう。
margin
グリッドレイアウトを作る際、これがないといろいろ大変なことになります。何が？って人は、bootstrapのrowに当てられているCSSを読んでください。幅をちょっと広めにして、そのちょっと広めた分をネガティブマージンでずらすだけで、グリッドを幅ぴったりに合わせてくれるんですよ！ 最高じゃないですか。
float
いくらdisplay: flex; が有用だからと言ってfloatの出番がなくなるわけではありません。用途が違う用途が。
画像にfloat: left; とか適用する場合、親要素がその画像の高さを無視してしまうためデザインが崩れることがあります。親要素にはclearfixを適用することを忘れずに。
box-sizing
border-box最高です。デザインが堅牢になります。あまりに使い勝手が良いのでユニバーサルポインタにborder-box適用したりしてます。
position
かけだしCSSコーダーが恐れる超強力魔法の一つ。うっかり使うとすさまじい勢いでサイトデザインが崩壊します。そして「absoluteこわいabsoluteこわい…」とうわごとを繰り返すほどのダメージ受けてしまいます。
とはいえ関連ルールさえちゃんと把握しておけばデザインの自由度を大きく広げてくれるプロパティです。少し頑張ればレスポンシブのクリッカブルマップだって作れます。
overflow
ハンバーガーメニューを実装する際、親要素に hidden の値を設定しておき、デフォルトではメニューの要素を親要素の外に出しておくと、メニューの出し入れを制御することができます。隠し要素扱いされないようにマウスオーバーやフォーカスで表示するとよいかと思います。ただ、hoverで制御するとiOSのSafariで動いてくれないことがあるので、今のところJavaScriptで制御することが多いです。新しいOSでは解消されてるんでしょうか。
そんなこんなで
主要なというか、自分がよく使うプロパティでした。レスポンシブデザインが主流になってからこれらを使う機会が増えてる気がします。
