• ホームページの基礎知識
  • たくさんの方にアクセスしてもらえるホームページを作るために必要な基礎知識をまとめています。

ジェネレーターやソフト不要 google chromeでCSSを作成・編集

 今回は、CSS(スタイルシート)をあれこれ編集して、美しいサイトに仕上げたいときのお話です。なお、CSSそのものについての知識はここでは詳しく書ききれませんので、「CSS」とか、「CSS3」とか検索してください。

サイトをアレンジする最低限のCSS基礎知識

 ただ、そうはいってもやはり最低限の基礎知識というものが必要ではあります。ここでは本当に基本の「き」となるところを紹介します。

HTMLファイルとCSSファイル

 まず、CSSですが、本当の本当に簡単に言うのであれば、ホームページの機能や内容を作っていくものがhtmlやphpだとしたら、その細かいデザインをしていくものがCSSといったところです。Wordなどの文章で文字をベタ打ちし、写真をただ挿入しただけの状態。そうイメージしてもらえればだいたいいいと思います。そこに背景をつけたり、文字サイズや色、回り込みなどのレイアウトをするという書式の設定関係がCSSという感じです。

よく使うものは決まっている

 CSSで指定できることはかなり多く、本気で勉強したらいろいろなことができます。でも、このサイトくらいのデザインであればよく使う機能はほぼ限られていますので、簡単に紹介できます。

  1. .main-conts p{
  2. line-height: 2.2em;
  3. font-size: 20px;
  4. margin-bottom:0px;
  5. }
  6. .post-date {
  7. font-size: 18px!important;
  8.     line-height: 24px!important;
  9. color: #007b3c;
  10.     margin: 5px;
  11. }
  12. .post-dis {
  13.     padding: 8px;
  14.     margin: 5px;
  15.     border: 1px solid #e6e6e6;
  16.     background: #f2f3ff;
  17. }
  18. .post-dis p{
  19. line-height: 1.3em !important;
  20. font-size: 17px!important;
  21. }

 1から5行目まではclass=”mein-conts”の中にある

 

に対するデザインが書かれています。line-height: 2.2em;は行の高さ、font-size: 20px;は文字サイズ。pxの代わりに倍数のemを使うこともあります。それからmargin-bottom:0px;は余白です。この場合、下の余白を0にしています。わざわざ0pxを書いたのは、親テーマなどでがっつり余白がついていて、それを消したかったからです。

 6行目から11行目までは、class=”post-date”というもので囲んだところのデザインに適用したいものです。自分でCSSを作る場合はこのpost-dateなども好きに変えてつくることができます。

 ここにある、color: #007b3c;は文字色です。margin: 5px;となっているのは、四方向への余白を5pxずつ取るといういみです。似たようなものでpaddingというものもありますが、これは内側の余白です。テキストボックスをイメージしたら、marginは外の余白、paddingは内側の余白という感じです。

 12行目から16行目まではpost-disというcssです。内側の余白は8pxですね。そして、borderというものが出てきていますがこれは枠線です。1pxの太さの直線で、色は#e6e6e6です。太さを変えたり、点線や二重線にしたり、影をつけたりすることもできます。background: #f2f3ff;は背景色です。

▶ スポンサードリンク

chromeを使って結果を見ながらCSS編集

 CSSを編集すると、どんな感じになったのかなと結果を見て確かめたいですよね。洋服の試着と同じでちょっとずつ色を変えてみたりしたいものです。その時にいちいちFTPソフトでアップロードして、F5で更新してって・・・面倒ですよね。そこで役に立つのがchromeの「検証」機能です。画面のどこでもいいので右クリックするとでてくるコンテキストメニューの一番下に「検証」とあります。これがものすごく役に立つのです。

検証で出てくる画面を解説

 すると、このような画面がでてきます。HTMLのソースを選択したり、赤丸のところをクリックしてからサイトの中にカーソルを持って行ったりすると、なんとそこでどのようなCSSが使われているのかわかります。これは、自分のサイトでなくてもできますので、素敵なサイトに出会ったら「検証」してみると勉強になります。で、どのようにCSSが表示されるのかということですが…

CSSの設定を試しながら変更!

 この枠で囲まれたものすべてが関係するCSSです。CSSは土台から順番に積み上げていくようなイメージで書かれていくため、ページ全体の設定から順に細かい部分へと進んでいきます。で、この例の場合はnews-itemの部分の設定はこうなっていますよという例です。②のところをクリックすると、その場で色を変えて確かめることができます。③はmarginやpadding、ボーダーを図化しています。ここの数字を変えても結果が反映しますし、そうするためのCSSも枠の中に打ち出してくれます。その他、⑤のあたりというか、余白の部分をダブルクリックすると、新たにCSSを追記する欄がでますし、少し入力すれば選択肢まで表示されます。そこで出てきた結果を丸ごとコピーして、子テーマのCSSに追記すればよいのです。

CSSの設定、ファイルの場所、行数までわかる

 ④を見ればbase.cssの1221行目に書いてあるということまでわかります。オレンジのところにカーソルを当てればファイルのパスがでますので、もっとよくわかります。この場合、子テーマにbase.cssというファイルを置いておき、その中に張り付けてあります。ここではざっくりとしか説明していませんが、これを使えばかなり自在にアレンジができそうだということがお分かりいただけましたでしょうか?

 

 なお、このchrome上でどれだけ勝手に編集しても実際のサイトには影響していません。これは自分の表示画面上でのテストですので、誰にも迷惑はかかりませんし、逆にこれで頑張って編集しても画面を閉じてしまったり、F5の更新ボタンを押してしまえばきれいさっぱり元通りになります。

 

 だから、安心していろいろと試してみてください。もっというと、この仕組みが分かってしまえば、検索する言葉も絞られてくると思います。より、自分のやりたいことができるようになってくると思います。

レスポンシブチェックも

 ついでにといったところですが、先ほどの赤丸をつけた矢印の横にあるところをクリックしたり、検証で出てくる枠と、サイトを表示している枠の境目をドラッグすると、解像度が表示されます。これを使えばこのままレスポンシブチェックも可能です。ただし、chromeを使った場合の話ですので他の記事にも書きましたが、別のブラウザや端末でも試してみることをお勧めします。

関連記事一覧

  1. この記事へのコメントはありません。