CSSとは、HTMLと共にWebを支える言語で、その役割は見た目の装飾。
言語とは言っても、実はプログラミング言語ではないのですが．．．
素人目に見て分かるものでもないので、「プログラミングできます」ってイキりたいお年頃にはピッタリの言語。
そして、イキりプログラマーの1人である僕のCSS歴は、今年で3年。
3年間もイキり続けてきた結果、今では自由自在にページを装飾できるようになりました。
今までのイキりを思い返してみると、僕のイキり力は緩やかに成長してきた訳ではなく、ときどき急激に成長している瞬間があることに気づきました。
今回はそんな、僕のCSS覚醒の瞬間についてまとめました。
まず紹介するのはコード外の部分。
コード外なので直接CSSに関わる部分ではありませんが、知っておく事で作業が効率化されたり、コードが上手く反映されたりします。
CSS覚醒の瞬間その1『デベロッパーツール』
開発者ツールやwebインスペクタなど、ブラウザによって呼び方が違うこの機能。
各要素のブロックの大きさから無効化されているCSSまで、開発者であれば知りたい情報が全部見えます。
さらに、ちょっと試すだけならデベロッパーツールの中だけで完結するのもうれしいポイント。
この機能を知るまでは、いちいちCSSを読み込み直してあーでもないこーでもないと試行錯誤しながら上手くいかない原因を探っていました。
そうして時間をかけて探った結果、単にセレクタの指定が間違っているだけだと知った時は流石に、オタク中学生の大好きなこの顔になってしまいました。
CSS覚醒の瞬間その2『キャッシュの削除』
CSSを更新したのにページに反映されない時はだいたい保存忘れかキャッシュが原因。
キャッシュが残っていることに気付かずCSSを更新し続けると、いつのまにか無駄なコードが沢山なんてことも。
キャッシュを削除するためには、先ほどのデベロッパーツールを使用するのが簡単です。
デベロッパーツールを開いた状態で、再読み込みボタンを長押しか右クリックします。
その後、(キャッシュの削除と)ハード再読み込みを選択。
これだけで、キャッシュを削除しつつページを更新できます。
そうだ、キャッシュといえば僕の記事『キャッシュレスの時代、乗り遅れた!』も是非見て行ってください。
CSS覚醒の瞬間その3『リセットCSS』
ブラウザには元々、少しですが装飾があります。
例えばリンクを貼ると、自動的に色が変わって下線が付きます。
他にも、見出しは大きな太字になり、フォームの入力欄には枠が作られます。
そういった元々ある装飾は、使いやすく作られているのですが、見栄えが悪くなってしまう事もあります。
1つずつ要らない装飾を打ち消していっても良いのですが、最初から全部打ち消してあった方が楽な場合も。
その、『最初から全部打ち消す』を叶えるのがリセットCSS。あら便利。
使い方も簡単です。
まずはインターネット上で沢山公開されているリセットCSSの中から、自分の求める機能のものをダウンロードかコピペします。
そうして入手したリセットCSSのファイルをいつものようにlinkタグで読み込ませれば、リセットCSSが適用されて一瞬でブラウザからの好意を無下にする事ができます。
CSS覚醒の瞬間その4『displayプロパティ』
ここからは直接CSSに関わるコード内の部分を紹介します。
まず、HTMLの要素にはそれぞれ表示形式が定められています。
pタグを並べると改行されるのに対し、aタグを並べても改行されないのはこれが理由です。
例に挙げたpタグとaタグはそれぞれブロック要素とインライン要素に分類されていて、表示のされ方や使えるプロパティなどが異なります。
しかし、pタグであっても改行せずに横並びにしたい、つまりpタグをインライン要素として扱いたいという場面もあります。
そういう場面で役に立つのがCSSのdisplayプロパティです。
displayプロパティを使うとHTML要素の表示形式を自由に変更できます。
ブロック要素にしたければblock、インライン要素にしたければinlineを値に入力します。
先ほどのpタグをインライン要素として扱いたいという場面であれば
p{display: inline;}のように記述します。
また、displayプロパティには夏油傑と五条悟がいます。
それが、flexとgridです。
この2つの表示形式は主に親要素に使われるのですが、他の表示形式と比較して段違いにできる事が多いです。
この記事内に収めるのが難しいので紹介のみに留めますが、レイアウトに困ったらこの最強の二つの内どちらかを使えば解決する事がほとんど。
ちなみに、noneとかいう伏黒甚爾もいます。
『呪術廻戦 懐玉・玉折』を観れば、displayプロパティのことはだいたいマスターできますね。
CSS覚醒の瞬間その5『positionプロパティ』
(英辞郎より引用)position【名】〔他と関連した〕位置、場所 〔セックスの〕体位
意外にも、今回扱うpositionは前者の意味です。
前提として、要素の位置を指定するためには、topやleftといったプロパティを扱います。
これらのプロパティはある基準から相対的に要素の位置を指定するので、予め基準を定めておかなくてはいけません。
その基準を定めるのがpositionプロパティ。
基本的な値はrelative、absolute、fixedで、それぞれ本来の位置、親要素、画面を基準にします。
つまり、ヘッダー(class=”header”)を画面上部に固定したい場合は
.header{
position: fixed;
top: 0;
}のように記述します。
また、要素の位置とは少し違う話になりますが、z-indexプロパティを使用することで要素の重ね順も指定できるようになります。
CSS覚醒の瞬間その6『擬似クラス』
『擬似』なのか『疑似』なのか．．．
擬似クラスを使うと、要素の特定の状態のみを指定できるようになります。
擬似クラスの使い方は簡単で、いつものセレクターにコロン（:）と擬似クラス名を付けるだけ。
JavaScript書かなきゃな．．．と憂鬱になっていた時、実は擬似クラスを使えば簡単に実装できると知り、安堵のあまり涙が理科室の水道のように流れ出たことも。
そんなにも便利な擬似クラスなのですが、種類がスマブラSPのキャラくらい多いので今回は僕がよく使う『hover』のみ紹介します。
hoverは、要素の上にカーソルが乗っている状態を指定する擬似クラスで、リンクやボタンなどクリックすることで動作が起こる要素によく使います。
例えばリンクにカーソルが乗っている時だけ、リンクの文字を大きくしたいときは
a:hover{font-size: larger;}のように記述します。
この場合に限らず、見た目だけを変える場合にはJavaScriptを使わなくても良いことが結構あります。
JavaScriptが嫌なときは、まず擬似クラスや要素の属性で実装できないか調べてみましょう。
CSS覚醒の瞬間その7『擬似要素』
『擬似』なのか『疑似』なのか．．．
擬似要素を使うと、要素の特定の部分のみを指定できるようになります。
擬似要素も擬似クラスのように扱い方は簡単。
いつものセレクターにコロン(:)2つと擬似要素名をつけるだけ。
擬似クラスと違い、コロンの数は2つだということに注意が必要です。
僕がよく使うのはbeforeで、この擬似要素は要素の手前の部分を指定するものです。
例えば要素(p)の手前に#を表示したいときには
p::before{content: "#";}のように記述します。
ここで、このcontentの値には空の文字列を入れることも可能ですが、contentが無いと擬似要素が表示されないことに注意が必要です。
そして、webkitが使われているブラウザ限定ですが、スクロールバーを装飾したりもできます。
デフォルトのスクロールバーは、お母さんが買ってきた服のようなもので、嬉しくはあるのですがダサいです。
デザインによっては消してしまっても問題なく使えるし、むしろスッキリして使いやすいという場合も。
そんな時にはスクロールバーを消したい要素(div)に
div::-webkit-scrollbar{
display: none;
}のように記述します。
以上、僕のCSS覚醒の瞬間でした。
CSSの技術が足りないと、HTMLの記述も汚くなります。
スペースを空けるためだけに<br>を3つくらい並べた僕みたいになりたくなければ、CSSの技術は磨いておきましょう。
あとがき
結局、『擬似』なの？それとも『疑似』なの？
コメント