htmlで記述してCSSで装飾する!プログラミングの基礎を習得するCSS編 第1回

プログラミングの基礎を習得するCSS編

htmlで表示した画像や文字を装飾するCSSについて書いていきたいと思います。

まず最初はhtml文書を作成したフォルダー内にCSSのフォルダーとCSSの文書ファイルを作ります。

フォルダー名をCSS、ファイル名をstyles.cssとつけておきました。

CSSは表示される画像や文字の装飾に使用されますので<body>タグ内のことについて記述していきます。

記述の要領と注意点

装飾する範囲を指定する

装飾したい範囲を指定してやります、ボディ内を装飾したい場合は
body {

}

header内を装飾したい場合は
header {
 装飾する要素を
 記述する部分
}
このように記述します、装飾したい場所を書いて{波括弧}の中に装飾する内容を記述します。

記述の注意点

半角で入力をする

記述はブラウザに表示される文字を除き、必ず半角英数字で記述します、表示がおかしいと思った場合は半角で入力したのを確認して下さい。

同じタグの記述要領は統一する

タグの中には</>終了タグを省略しても表示しますが同じタグを同一の記事内で記述したり、省略したりするのはブラウザに表示されるときにうまく表示されない時がありますので統一した記述にしましょう。

文字の色や種類を指定する

文字の色、文字の種類を指定する場合は
body {
color:#000000;
font-family: Verdana, sans-serif;
}
と記述します。

文字の色の指定方法

colorが文字に色を付けることを表し、数字の「000000」が黒色を表しています、数字の前後の「#」と「;」はつけなければいけません。
他の色の表示方法は、black、red、greenなど英語のスペルで表す方法と
RGB値:赤、緑、青を0~255の数値で表し三色を混ぜる要領で表すもの(0,255,0)これで緑になります。
16進数:0~9の10個の数字とa~fの6個の英字と合わせたものがあります、二個づつの数字で赤・緑・青を表し000000が黒でffffffが白になり、同一の数字が並ぶ場合は000とfffと省略して表示できます。

使用する文字の種類と優先順位を決める

font-family: は使用する書体を表し
「Verdana 」はヒューマニスティック・サンセリフフォントの一つでマイクロソフト社がコンピューター用に開発した物
sans-serifはゴシック系フォントを表します
serif:明朝体
cursive:筆記体、草書体
fantasy:装飾的
monospace:等幅
などの種類を指定できます、「,」カンマ区切りで複数の候補を並べることができます、先に記述した順に利用可能なものから選択されます。

指定した物の表示の様子を見る

個別に色の設定をしてみる

body内の色を赤にして、sectionタグで囲った中のh1見出しを緑にしてみました

section(セクション)タグは単独のセッション(区間)を表し、セッションを表現するより意味的、具体的な要素がない場合に使用します。

HOMEとABOUTの文字はリンクが貼られているので文字は変わりません。

リストの文字位置を変更してみる

HOMEとABOUTの文字を横並びにしたいと思います。

display要素のinline-blockを使用します。

このようにHOMEとABOUTの文字が横並びになりましたが、すき間がないので余白を与えます。

文字の周りに余白を与える

displayの下に「padding: 4px 8px;」と記述します。

そうすると下のように文字の周りに余白ができました。

余白についてはパディング、マージンなどがあります。

余白について説明すると

一番内側のボックスがコンテンツで、枠のことを「border」内側の余白を「padding」外側の余白を「margin」と呼びます。

設定の要領
マージン、パディング余白の幅になります。
値が一つの場合は上下左右を設定できます、例10px;は上下左右とも10ピクセルの余白があります。

値が二つの場合は(上下)と(左右)を設定します。

値が三つの場合は(上)(左右)(下)の順で設定します、四つの場合は上、右、下、左の順で設定します時計回りの方向です。

余白を設定してみる

borderは線の太さと線のスタイル、線の色の順に設定します。

マージンを上下左右に30ピクセル、パディングを上下左右に20ピクセル、ボーダー枠の幅を10ピクセル・線を実線・色を赤にしてみました、表示は下の画像のようになります。

線のスタイルには
noneは枠線なし
solidは実線
doubleは二重線
dottedは点線
このようなものがあります、上下左右個別に設定もできます。

プログラミングの基礎を習得するCSS編 第1回

簡単な動きを練習してみました、ちゃんと記述すれば動いてくれます、変だと思ったら全角で入力していないか、スペルミスをしていないか疑うようにしましょう。

画像を加工して丸くしたい人は

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事