※本ページにはプロモーション(広告)が含まれています
cssファイルを別ファイルで作成する場合には、タグ、id、classを指定してスタイルを設定していきます。タグとはh1などのタグのことを指しており、cssではこのタグに対してスタイルを設定することが可能です。この場合、作成したcssファイルを読み込む全てのHTMLファイルに対して、該当するタグのスタイルが反映されます。この方法は基本的な文字の大きさを揃えたりするのに便利な方法です。一方で、ウェブデザインをするにはもう少し細かくスタイルを設定する必要があり、そこで出てくるのはidとcssです。
idはその名の通り、タグにidを付与するもので、cssではこのidに対してスタイルを設定することができます。ただし条件としてidは一つのページに1回のみ使用可能となっており、重複してはいけません。そのため、命名するときには一定のルールを守ってするようにしておきましょう。
classはタグにclassの要素を付与するものであり、一つのページで何度でも付与することができるものになります。ページ内で繰り返す要素など、何度も同じスタイルを設定する必要があるものをclassで指定しておくとスタイルを設定するのが楽です。
cssの構造
cssはセレクタ、プロパティ、値の3つの要素で構成されます。基本的な構成は次の通りです。
h1{
color:blue;
}
上記のh1がセレクタ、colorがプロパティ、blueが値に相当します。セレクタ、プロパティ、値はそれぞれ「どこの、何を、どのように」するのかを表しており、この基本構造に基づいてウェブページのデザインをしていきます。
上記の様にh1などのタグを指定することもできますが、idやclassの設定もできます。
p#id{} /*—idを指定--*/
p.class{} /*—class—*/
上記の様にidを指定する時は「#」を使用し、classを指定する時は「.」を使用します。cssの基本構造はこのようになっています。
HTMLからcssを読み込む
HTMLファイルとcssファイルを連結させるためには、HTMLファイルからcssファイルを呼ぶことが必要になります。ページによって、必要なcssの要素も変わりますので、分類ごとにcssファイルを複数作成するのも一つの手法です。
HTMLファイルからcssファイルを呼ぶ時はheader内に次の様に書きます。
上記のhrefに呼び込むcssファイルのパスを指定すれば完了です。階層が複雑に分岐している場合には、相対パスではなく絶対パスで指定すると良いでしょう。これでHTMLファイルとcssファイルが連結され、cssで指定したスタイルを持つウェブページになります。
目的別のcss
ここではcssの一例を挙げたいと思います。利用頻度が高いcssを目的別にまとめました。
カラー
装飾と言えばやはり カラー ですよね。cssでは 文字 や 背景 などに対してカラー指定を行うことができます。色はサイト閲覧者に与える印象に最も関与する要素だと思われます。適切な色を指定して見やすいウェブサイト作りを心がけたいところです。
プロパティ | 効果 |
---|---|
color | 文字の色を指定する |
background-color | 背景の色を指定する |
プロパティは上記のようになります。そして肝心の色指定は カラーネーム や 16進数 で指定することになります。
カラー値の例
- red
- #ff0000
- #f00
- rgb(255,0,0)
上記で挙げた例では4つとも赤色指定ということになります。簡単に指定できるのはカラーネームですが、細かい色合いを表現するには向いていません。色合いにより拘る場合は16進数やrgbで指定する必要があるでしょう。
例:背景色に赤色を指定する場合
body { background-color: red; }
フォント
フォントもCSSで装飾することで様々な効果が得られます。主に 文字の見やすさ や 見栄え などを重視して装飾することが多くなっています。
プロパティ | 効果 |
---|---|
font-family | フォントの種類を指定する |
font-size | フォントのサイズを指定する |
font-style | フォントを筆記体や斜体に指定する |
font-variant | フォントをスモールキャップにする |
font-weight | フォントの太さを指定する |
font | フォントに関連することをまとめて指定する |
フォントの種類を変更したい場合は「font-family」にフォント名を指定します。使えるフォントは色々用意されており、自由に設定することができます。
フォントの種類
- Arial
- GEORGIA
- Myriad
- Verdana
- TimesNewRoman
一般的なものを挙げました。使えるフォントはこれらに限らず他にも様々なものを使うことができます。「フォント 種類」 などで検索すると関連するページが沢山でてくると思いますので興味がある方は探してみてください。
ただし面白がってマニアックなフォントを使いすぎてしまうとユーザーにとって見づらいウェブサイトになってしまう可能性もあります。基本的には一般的に使われいるフォントを使って特に拘りたい部分にだけ特別なフォントを適用すると良いでしょう。
例:フォントをまとめて指定する場合
.fontA { font: italic bold 15px; }
レイアウト
ウェブサイトに配置している様々な要素のレイアウトを指定することも大切です。ちょっとした微調整などに使うことが多いプロパティです。
プロパティ | 効果 |
---|---|
width | 横幅を指定する |
height | 高さを指定する |
padding | 内側の余白を指定する |
margin | 外側の余白を指定する |
position | 要素の位置を決める方法を指定する |
top,right,bottom,left | positionと合わせて使う。要素からのそれぞれの距離を指定する |
widthやheightは要素の大きさを指定するものなので多用すると思われます。値には 数値 と % で指定する二つの方法があります。%で指定する場合は親要素を参照することでサイズが決定されます。
また「position」には数値や%ではなく特別な値を入力する必要があります。全4種ある値は下記のようになります。
positionの値
- static:初期値
- relative:相対的な位置を決める
- absolute:絶対的な位置を決める
- fixed:固定する
「static」は初期値のため、わざわざ指定することはほとんどありません。覚える必要があるのは他の三つとなります。それぞれの特徴を抑えておくとデザインの幅がグッと広がるのは間違いありません。余裕があったら覚えておくと良いでしょう。
「position」で指定方法を決めたら「top」や「right」で細かい位置調整を行います。上から距離を空けたい場合は「top」を下から距離を空けたい場合は「bottom」を指定することになります。
例:親要素を基準にした絶対位置を指定する場合
#absolute {
position: absolute;
top: 15px;
left: 15px;
}
まとめ
いかがでしたでしょうか?cssは現代のウェブサイトに欠かすことのできない言語であり、視覚的に見やすくなるように大切な要素です。これからウェブサイトを作成したいという方や、ウェブデザインを勉強したいという方は、cssについて少しずつ勉強していくことがおすすめです。
cssを読める様にしておくことで、ちょっとサイトを変更したいといったときに自分で簡単にできるようになります。是非楽しんで学んでいってくださいね。
1 2