PG WORKS

PHPやLinuxサーバなどのノウハウや、便利なツールを紹介していきます。

CSSの書き方をマスターして、かっこいいサイトを作ろう

はじめに



この記事を読んだからって、かっこいいサイトが作れるわけではありません!



ここで伝えたい内容は、書き方と便利なツール、汎用的に使えそうなCSSを紹介する記事になります。


最初に、CSSは「Cascading Style Sheets、カスケーディング・スタイル・シート」というそうです。
CSSとは?-CSSの基本

正式名称がいまいち覚えてなかったので、書いてみました(汗
ただ、名前から入らなくても、HTML・CSSは、書き方とコードアシストがあるツールを使えば、なんとかなってしまいます。

実際の書き方ですが、ID名で指定する方法とクラス名で指定する方法があります。
※タグ名で指定する方法もありますが、あまり汎用性よくないのでここでは省略します。

ID名とクラス名はなんなの?という方に、右クリックして、ソースコードを見ると、下記のような記述を見かけると思います。

<div id="id_example">...</div>
<div class="class_example">...</div>

IDやクラス名が書いてある部分に、デザインがつきます。また、IDとクラス名でCSSの書き方が下記のようになります。

IDで記述する場合

>>id=id_exampleと指定したときに、フォントの色を赤に設定する
#id_example { color: red; }

クラス名で記述する場合

>>class=class_exampleと指定したときに、フォントの色を赤に設定する
.class_example { color: red; }

他にもいろんな設定ができますが、ここで書くと長くなってしまうため、下記のリファレンスを参考にしましょう。
スタイルシートリファレンス(目的別)

次に、汎用的に使いそうなものをピックアップしてみました。

>>フォントの設定
body{
  font-size: 14px;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

>>余白をなくす
.nomarginpadding {
  padding: 0 !important;
  margin: 0 !important;
}


※こちらに関しては、随時追記していきたいと思います。

フォント設定に関しては、OSやデバイスによって異なるため、
対応させたいブラウザやOSなどあれば、それに合わせた設定をしましょう。
下記のサイトが参考になりました。
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ

リファレンスを見ながら記述していくのは、時間を取られてしまうため、HTMLエディタでコードアシスト機能があるものを使うと効率よく進むと思います。

コードアシスト付きのおすすめエディタ

Aptana | Download Aptana Studio 3.6.1

HTMLとCSSに関しては、私自身、綺麗に書く必要はないと思ってます。SEOにも評価につながりません。

ただ、使っていないコードや無意味なものは、サイトの表示速度を上げるためにも、削っていきましょう。