- CSSってなに？
- CSSとhtmlって何がどう違うの？
- パソコンやプログラミングのことはよくわからない
こんにちは、文系の主婦みてみて(@look_mam_look)です。
このブログはWordpressのSimplicityという無料テーマで作っています。
シンプルでカスタマイズがしやすいのが特徴なのですが、カスタマイズのためにはCSSを書き換えねばなりません。
ところがわたしは超文系のため、カスタマイズ方法を調べてみても用語がわかりませんでした。
は？ CSS？ html？ 何が書いてあるのかさっぱり意味不明！
数か月前までこんな状態だったわたしが、１か月かけて理解したCSSとhtmlの基礎知識を、
- 初心者にイメージをつかんでもらうため
- 専門用語は使わず （というか文系なのでわかりません）
- 図解でわかりやすく
解説していきますーー！
CSSとは？htmlとどう違うの？
CSSの用語説明
CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。 例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。
HTMLクリックリファレンス
わからんわからん！ 文系にはわからん！ひみつ道具持ってきて！
翻訳こ〇にゃく～！
文系でもわかるように翻訳します。
↓
翻訳結果CSSを使ってデザインや装飾をすると記事が華やかになるよ。CSSはhtmlと組み合わせて使うんだよ。
これだけおさえておけばOKです。
CSSを使ってできること
このブログではいくつかのCSSを使って記事を装飾しています。
どこに使っているかというと、ここまでの部分だと、文字とグレーの二重線囲いと、こんにゃく以外の部分にはすべて使われています。
- 見出しの囲い
- 見出しの矢印アンダーライン
- ふきだし
- 引用の囲い方
- 検索結果を示した枠組み
- この箇条書きの囲い
CSSを使ってデザイン性を高めた結果、こういう風に見えています。
CSSとhtmlの違いをイメージ図解
百聞は一見にしかず。実際に図解していきますね。
CSSとhtmlの関係性
「CSSとhtmlは組み合わせて使う」というのはこういうこと。
htmlという「呪文」でCSSで指定した「デザイン」を呼び出す。
なので、
とか
とか、はたまた
といったように、「ウサギ」の呪文に設定さえすれば「カメ」も呼び出せるわけです。
【追記】図解のhtmlがhtlmになっちゃってます・・・すみません。それくらい文系の人が書いてますよってことでそのままにしときますね。汗
どうやって使うの？CSSの設定方法を図解します！
コンピューターは画像が読めない
イメージをつかんでもらうためにイラストを使って解説しましたが、 実際に呼び出すのは画像ではなくデザインの指示書です。
コンピューターには目がないので画像をそのまま読み込むことができません。そこで「プログラミング言語という指示マニュアル」に沿って呼び出したいデザインを伝えてあげます。
実際のCSSの書き方
ここではこのブログで使っている見出しを例に解説しますね。
使っているテーマによってCSSを追加する場所は変わるみたいです。わたしのsimplicityでは、「外観」→「テーマの編集」にある「スタイルシート (style.css)」に書き込みます。
実際に見出しで使ってるCSSはこちら
こういうふうに指示してあげてるんですね。
色は#の後に６桁のアルファベットと数字の組み合わせで指定します。
参考：Web色見本
CSSの使い方
htmlでCSSを呼び出し、見出しを装飾してみます
見出しのCSSをスタイルシートに追加ができました。実際にhtmlをつかって呼び出してみましょう。
CSSを使う前と後で比較してみますね。
- 見出しをh2タグで囲う
- CSSで指定したデザインがh2で囲った見出しに適用される
- 画面表示がオシャレに！
どうですか？全然雰囲気が違いますよね？
CSSがない時はSimplicityの初期設定の見出しなので正直ぜんぜん目立ちませんが、CSSの追加でこんなにもおしゃれでわかりやすい表示に変わりました。
CSSをもっと使いこなすためには？
プログラミングの経験がある人だといろいろ自作が出来るようですが、素人では難しいです。
わたしのような超文系素人でも簡単に導入できるように、コピペで使えるCSS見本を公開してくれているブログがあるので参考にしてみてください。
このブログで使っているCSSはこちらからhttps://saruwakakun.com/html-css/reference/h-design
サルワカさんはいつもお世話になってます。簡単に使えてオシャレなので見本を見ているだけでも楽しいです！
CSSの設定にはいろいろ注意事項もあります
お使いのテーマによってCSSを追加する場所が変わります。また、追加する際には万が一に備えてバックアップを取ったりと注意が必用。
なので、この記事でイメージをつかめたり、チャレンジしてみようかなと思ったら、上記のサルワカさんのサイトなどで優しく解説されているので一読してみてくださいね。
まとめ:CSSとhtmlはセットで使います
ひとりでいろんなブログを読み込んで、ここまで理解するのに１か月かかりました・・・正直もうやりたくないです。専門用語わからない。カタカナ多すぎ。
そういう経験から、当時の自分に
「こういう説明があればわかりやすかったんじゃないかな？」
「こういうところが知りたかった！」
と思うポイントを意識してこの記事をまとめてみました。
同じようにブログを初めたばかりの方の参考になればうれしいです。
そうは言ってもCSSとか勉強しなくてもブログは書けるんですよねー・・・。実際にわたしが１か月格闘してる間に初心者でもどんどんおしゃれなブログを立ちあげてますし。
そういう意味でも誰でも簡単にブログを始められる有料テーマの導入はオススメです。
オシャレやん。。無料テーマとの壁を痛感してるわ。
まぁCSSの勉強にもなったし今のカスタマイズで満足もしてます。
ブログの装飾で「気になる！使ってみたい！」というものがあればコメントやDMでお気軽にお問い合わせください。どんなコードなのかくらいは教えてあげられるはず！
無料テーマ・有料テーマどちらもいいところはあると思うので参考にしてみてくださいね！
▼ CSSとhtmlをProgateで無料学習 ▼
コメント