【用語解説】CSS

見えてはいるけどなかなか越える気にならないハードル。

それがかの有名な【HTML】と【CSS】ですね。

僕も未だに何がなんなのかよく分かっていませんが、漠然と以下の様なイメージで接しています。ネットにそう書いてあったので。

ワードプレステーマは最初から『HTML』による骨組みが完成している状態で配布されているのでまだ勉強しなくてもOK。深いカスタマイズをする場合は必要になってきますが、それは遠い未来の話。

今早急に必要なのは『CSSの知識』です。これは直接的に骨組みを触らないので、基本的に『いじったら壊れた』という事はありませんし、初心者でも簡単に手を加える事ができます。

では『CSSの使い方』を知る前に『CSSでどんな事ができるか？』を知って欲しいと思います。具体的に何ができるか分からない物を覚える気にはなりませんからね。

最後の方で１つだけコードの解説しときます。

CSSで『見出し』を装飾する

見出しには『h1』～『h6』までありますが、それぞれの見出しを全部まとめて装飾可能。ちょっと意味分かりにくいですね。下をみてください。

これは僕のワードプレスのデフォルト『h3』の見出しです。別にこのデザインが好きならこのままでも構いませんが、ちょっと変えてみます。

パッと見『この見出しだけ』変わっている様にみえますが、実際は『僕のワードプレスで使用しているh3の見出し全て』を一括変更しています。

それの何がお得かっていうと、たとえば一年後・・・

『見出しのデザインを変えたい！！』

・・・という気持ちの変化が起こっても記事１つ１つ回って修正する必要はありません。CSSをいじるだけで過去の記事を含め全ての『h3』が変更されるのです。

背景色や文字の色を変えるのも一瞬。

文字の大きさも思い通り。

完全な長方形にしたり。

本当どうにでもできます。

影も付きます。知識さえあれば５分もかけずに色々なバリエーションの見出しを自分の手で生み出す事ができます。

僕も最初は『見出しを自分好みに装飾したい』っていうキッカケでCSSの勉強に入りました。勉強ってほど何もやってませんが、初心者の方も『見出しの装飾』から入ると分かりやすくておススメです。

CSSで画像に『枠と影』を付ける

画像をアップロードして記事に載せた時、コンテンツとの境目が曖昧になって見にくくなる場合があります。僕はそんな時わざわざ【画像をWordに読み込む】【画像に枠線の効果を付ける】【更に影の効果を付ける】【パソコン画面をキャプチャする】【トリミングした画像をアップロードする】というすんごい手間がかかる作業をやっていましたが、CSSを使えばそんな面倒とおさらばできます。例えば。

どこからどこがコンテンツなのか？画像なのか？背景に溶け込んで分かりませんよね。境界線をハッキリさせたい時には。

はい。この画像に枠と影をつけるのに３秒しかかかりません。CSSの力を借りて、そういうシステムを作り上げているからです。やり方は下のリンクに記載してます。

さらに応用した技はこちらに記載してます。

CSSでウィジェットを装飾する

『ウィジェット』と言っても色々ありますので、ここでお見せするのは『タグクラウド』のカスタマイズにしましょうか。

デフォルトではこういうタグクラウドです。CSSで装飾すれば。

こんな感じ。もちろん『見出し』同様、文字の大きさ、色、幅、マウスオン時の色・色が変わるまでの時間、自分の好きな様に変える事ができます。やり方はリンク先を参照。

CSSで表示させる画像を変える

百聞は一見にしかず。下の図をご覧ください。

何の変哲もないただの変な画像ですよね。

でも実はこれ『パソコンで見るか』『スマホで見るか』によって表示される画像が変わります。用途が限定されるのでほとんどの人には不要な技かもしれませんが、知っておいて損はありません。実際エディタを見るとこんな感じ。

普通に２つの画像を用意しておいて、上の画像には『パソコンだけに表示しろよ』という命令を。下の画像には『スマホだけに表示しろよ』という命令を与えています。これもCSSの力で実現可能です。やり方はリンク参照。

CSSの使い方

ざっくりこんな感じの『装飾』を可能にするのがCSSです。

骨組みを触らず『肉だけを切り貼りする』ってイメージ。

『コード』を使って命令を与えてあげるのですが、だからと言ってコードを暗記する必要は全くありません。ネットでそこらじゅうに転がってます。

後は応用、応用、応用を繰り返していけば勝手に頭の中に入ってきます。適当にCSSコードまとめたメモもあるので参考程度にどうぞ。

では１つだけ。

最初に触れた『見出し装飾』のコードを解説しときます。

この見出しには上記の『CSSコード』で命令を与えています。

まず最初の【h3】っていう部分で【見出し３】を指定してます。この数字を【h2】に変えれば【見出し２】が装飾ターゲットに変わります。まあ後は中学生程度の英語が読めれば（僕もそれぐらいのレベル）何となく分かります。

【フォントサイズ】で文字の大きさを指定

【バックグラウンド】で背景色を指定

【カラー】で文字色を指定

【パディング】これはちょっと複雑であまり理解してないんですが、この場合で言うと数字をいじれば『背景色の大きさ』が変わります。似た様な命令で【マージン（margin）】ってのもあります

【ラインヘイー】文字の高さというか幅？２行になった時にどれだけ上下の文字を離すかみたいな。すんません英語読みも説明も適当で。

【ボーダーラディウス】背景色の４隅にどれだけ丸みを与えるか決めます

【ボーダーレフトなんちゃらかんちゃら】デフォルトで表示される左側の黒い線を消す命令です。下図がデフォルトの見出し。CSSで装飾しても左側の線は残ってしまうので、これを上書きの命令で消してます。

もし消さなかったらこんな感じ。

左側になんか名残みたいなヤツが残ります。

これは『CSSコードはどんどん追加されていく』っていう習性で『後からコードを追加しても、もともとあるCSSを上書きできるワケじゃない』って事（だと勝手に解釈）

なので『絶対命令コード』を語尾に加える必要があります。

僕の大好きなコード。それが

【!important】

コードの語尾に付け加える事で威力を発揮します。これを語尾に装備したコードは『絶対の強さ』を持ちます（絶対とか言ってますが、これを使ってもなぜか無理な場合もありまして、そんな場合は諦めてます）

もし『コードは有ってるはずなのに反映されないなあ』っていう時は、とりあえず語尾に【!important】を語尾につけてみるといいでしょう。

使いすぎたら何か問題が発生しそうですが、僕は乱発させまくって今のところ何も異常はでてません。何度となくコイツに命を救われてきましたので、部屋に飾って偶像崇拝しています。

『CSSコード』はどこに記述すればいいのか？

ワードプレスの場合『CSSコードを反映させる方法』は２通りあります。

僕は後者をおススメします。

①『style.css』に記述する

こんなのがでてくるので、ここにコードを記述して更新すればCSSコードがサイトに反映されます。コードの場所はどこに書いても大丈夫です。

②『追加CSS』に記述する

こんなのが出て来るので、ここにコードを記述。

僕がこちらの方法をおすすめするのは『コードを入力した瞬間、サイトに反映される』から。

要するにリアルタイムでサイトをみながら装飾が可能なので仕事が早い。

サイトに反映されなければ『コードが間違えてる』もしくは『そのコードより強い命令が存在してる』って事です。

前者の場合は【更新】させて【サイトを確認】しに行かなくてはなりません。それがめちゃめちゃ手間です。タブ２つ開いてやればいいかもしれませんが、それを考えても僕は『追加CSS』での編集をおススメします。

はい。こんな感じでCSSの事を何となく理解してもらえたと思います。

『なんか難しそうだから・・・』と避けて歩きがちの『CSS』ですが、実際やってみると意外といけちゃうんです。

HTMLは頭のいい人に任せて、初心者のうちは『CSSをしっかり使えるように』頑張ればよろしいかと思います。

『アイフォン』が急に壊れたので分解修理します