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