CSSとは何か？
これからアレンジしてデザインを構築したいと考えている方はぜひ参考にしてください。
初めての方はHTML作成方法も一緒に覚えていきましょう。
CSSとは？
CSS（カスケーティングスタイルシート）はHTMLだけでホームページを作るより、ページのデザイン性を向上させることができます。
一括でデザインが可能になりますので、他のページのデザインも簡単にできるようになっているデザイン専用の仕様書です。
こんな悩みをもったことはないでしょうか？
- 文字の間隔や行間をもう少し空けたい。
- タイトルのデザインをアレンジしたい。
- カーソルを当てたら文字色が変更するようにしたい。
- PCでもSPでも画像を横並びにしたい。
- ふわっと浮き出るようなアニメーションをつけたい。
- 背景に画像を入れたい。
CSSを使用する上で覚えておくこ
ページをデザインしていくのにとても役立つものですが、ChromやFirefox、Safariなどのも異なるブラウザーやWindows、MacなどのOSによって表示結果が異なることがあります。
文字書体などが良い例です。設定した書体になるブラウザーと反応しないブラウザーが存在します。
CSSのメリット
- サイトに統一感を持たせる
- サイトリニューアルや細かなスタイルが修正しやすい。
- HTMLに直接コードを入れるより細かなスタイルが指定できる。
- シンプルで見やすいHTML文書構造を書くことができる。
- SEO対策に有利
- 好きなレイアウトが可能。
書き始めの前に注意すること
元々入っているコードを消すとサイト自体の構造が崩れる可能性があるので、気をつけましょう。
私は元々入っているコードを消してしまい、デザインが総崩れしているテーマがあります。
修正の仕方もわからないので放置してます。
CSSの入力方法について
スタイルシートの入力方法はルールが存在ます。
中括弧 { } を必ず使用する
指定する値の前に「コロン」、終わりに「セミコロン」を入れる : ◯◯◯ ;
HTML同様に始まりと終わりをしっかりしていないとサイトには反映されません
例題を見ながら確認をしていきましょう。
HTML コード入力
<p>文字の大きさとカラーを設定する</p>
CSSコード入力
p {
font-size : 18px ;
color : #b22222 ;
}
結果
文字の大きさとカラーを設定する
わかりやすいように中括弧とコロン、セミコロンを赤色にしています。
文字大きさ14px ⇨ 18pxにしています。
実際に何をしたのか？
pタグで囲ったテキスト文をCSS内で設定を行うことで<p></p>で記入した内容は全て同じサイズ、カラーに統一している。
例えば、タイトル 「h2」を同じように変更する場合は、
h2{
font-size:18px;
color:#b22222;
}
初めての方がやりがちなエラーについて
- 終わり用のセミコロンを忘れる
- コロンとセミコロンを逆にしてしまう
- 中括弧の終わりをつけていない
初めての方がやりがちなエラー例は主に３点です。
焦らず始まりと終わりをしっかり設定しましょう。
私は値を入力する前に中括弧を入れて、コロンとセミコロンを先に入れます。
いくつもコードを入力していると忘れてしまうことがあります。
長くなり、読みづらくなるファイルを読みやすくすることができます。 メモを書く際に使用することもあります。
例）
/* ここからタイトルのデザインをする */
CSSは数千行も記入することがあります。どこに何を記入したかわかりやすいようにするために使用することが多いですね
