コメントアウト【/* */】
| /* */ | 命令をアウトさせる・注釈を入れる |
この記号で囲まれた部分はコードへの影響がでませんので『一旦この命令は無効にさせたいけど、後で使うかもしれないから残しておきたい』って時に使えます。
もちろん注釈を入れるのにも役立ちます。作ってるときは理解できてても数ヵ月後に見返すと『この命令は一体どこに効いてるんだ…？』っていう事が多々あります。特に僕のような記憶障害にとっては必須。将来の自分の為にも日本語で説明文を挿入しておきましょう。ちなみにphp編集時にも使えます。
絶対命令【!important】
| color:red;!important | 命令の後に付けると絶対命令 |
サイトの中には命令が星の数ほど存在しており、CSSを継ぎ足し続けていると必ずどこかで命令の重複が発生します。重複が起こった場合エラーになるワケではなく優劣がつけられ、弱い方の命令は無視されます。
弱い命令は基本的に日の目を見る事はありませんが『!important』を語尾に付けると『この命令を最優先にする』という大どんでん返しが起こります。ヒトラーも真っ青の強力さを持つ訳です。何をどうやっても命令が通じない時はコレを語尾に着けてみましょう。それでもダメな時はもう知りません。そんな事もあります。
表示方法【display】
| display:inline; | 横に並べて表示 |
| display:block; | 縦に積むように表示 |
| display:inline-block; | 両方の特性を併せ持つ |
| display:none; | 非表示 |
特に良く使うのは非表示です。コンテンツの存在を消し去る事ができるので邪魔な物には容赦なく【display: none!important;】を突き付けましょう。事実上のリストラです。
ちなみに僕は『今どの部分を編集しているのか把握する為』に使う事が多いです。この命令で消えてくれた部分が命令の適応範囲という事になるので分かりやすいです。
テキストのサイズを指定する【font-size】
| font-size:100%; | 親要素からの相対指定 |
| font-size:16px; | 絶対値で指定 |
| font-size:1.0em; | 親要素からの相対指定 |
| font-size:1.0rem; | HTMLからの相対指定 |
| font-size:1.0vw; | ビューポートの幅に対する相対指定 |
| font-size:1.0vh; | ビューポートの高さに対する相対指定 |
100% = 16px =1.0em = 1.0rem = 12pt
テキストを太文字にする【font-weight】
| font-weight:bold; | 文字の太さを指定 |
太さを変える命令は色々ありますが基本的にboldしか使いません。
テキストに線を入れる【text-decoration】
| text-decoration: none; | ライン非表示 |
| text-decoration: underline; | 下線 |
| text-decoration: line-through; | 打消し線 |
| text-decoration: blink; | 文字点滅 |
テキストにアンダーラインや打ち消し線を与える時に使用します。もしくは『テキストリンクへ自動的に与えられるアンダーラインを消す』という使い方もできます。
テキストの色を変更する【color】
| color:black; | テキスト色を指定する |
背景色を変更する【background】
| background:black; | 背景色を指定する |
コンテンツ境界から外側の余白を調整【margin】
| margin:10px; | 全方向 |
| margin-top:10px; | 上方向のみ |
| margin-right:10px; | 右方向のみ |
| margin-left:10px; | 左方向のみ |
| margin-bottom:10px; | 下方向のみ |
コンテンツ境界より内側の余白を調整【padding】
| padding: 10px; | 全方向 |
| padding-top:10px; | 上方向のみ |
| padding-right:10px; | 右方向のみ |
| padding-left:10px; | 左方向のみ |
| padding-bottom:10px; | 下方向のみ |
コンテンツの境界に線を入れる【border】
| border: 2px solid black; | 線の太さ、線の種類、色を指定 |
コンテンツの境界にボーダーラインを引きます。線の種類にも色々なコードがあります。
コンテンツに影を付ける【shadow】
| box-shadow: 5px 5px 5px #848484; | 影の方向等、色を指定 |
コンテンツの角を丸める【border-radius】
| border-radius: 5px; | 角を丸める大きさを指定 |
値にゼロを入力すれば完全な四角形になります。値が大きくなるほど角が丸まります。
状態変化の秒数を指定【transition】
| transition: 0s; | 変化時間を指定 |
通常時からマウスオン時に変わるまでの時間と、マウスオン時から通常にへ戻るまでの時間を指定します。基本的には『hover』との連携で使う事になります。値の秒数で滑らかに変化します。
【transition-duration】という記述でも同様の効果が得られる模様。
画像を拡大【transform】
| transform: scale(1.0); | 値1.0で100％表示 |
マウスオン時に画像を少し拡大させる時などに使用します。
画像を横幅いっぱいに表示【cover】
| background-size:cover; | よくわからん |
マウスオン時を指定【hover】
| ○ a hover{ | マウスオン時を指定 |
○で指定した要素にマウスが乗った状態に起こす変化を作る事ができます。
透明度を指定【opacity】
| opacity:1; | 透明度を指定 |
マウスオン時の透明度を指定します。値をゼロにすれば完全な透明になり、１にすれば完全な不透明になります。半透明にしたければ『0.5』を与えてください。
テキストそのまま・背景に透明度【rgba】
| background:rgba(255,255,255,1) | 色と透明度を指定 |
左３つの値は色を変更できます。一番右の値が透明度です。
画像をグラデーションで白くする【linear-gradient】
linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
これはよくわかりません。
