初心者さん向けCSS(スタイルシート)の基本まとめ

スポンサーリンク
インテリア:ホームページの装飾HP作成

CSSってよく目にするけど、何かわからないわ。

今回はCSSの超基本を一緒に学びましょう!

CSSの知識が全くなくてもホームページは作ることができます。でも、知っていると空白をもう少し広くしたいときなど変更できるので便利ですよ。

ホームページ作成を楽しむには難しいことは必要ありませんから、難しいことは書きません。なんとなく分かった気がするで十分です。最後までお付き合いください。

CSSはCascading Style Sheetsの略

CSSはCascading Style Sheets(カスケーディング スタイル シート)の略です。CSSはHTMLを装飾する役割があります。

イメージとして、メモ帳アプリで作った文章がHTMLです。それに、文字の大きさや色、文字と文字の間の感覚や行間の指定、文章を線や破線で囲む指定をするのがCSSになります。

例えに出して申し訳ないのですが、阿部寛さんのホームページを見てください。シンプルですよね。阿部寛さんのお人柄のように飾らないホームページが素敵です。HTMLで作ったホームページだと思ってください。

次にジャニーズのホームページを見てください。なんとなく違いが分かったでしょうか?これがHML中心のホームページとHTMLとCSSで飾ったホームページの違いです。

基本的なCSSの書き方

CSSは基本的にセレクタとプロパティと値で書かれます。

セレクタ:{ プロパティ : 値  }

  • セレクタとは、装飾をするHTMLタグをさす
  • プロパティは、どんな装飾をするかを表す
  • 値とはプロパティの具体的な数値や項目をさします
  • 「:」「;」を使ってプロパティや値を区切ります

例えば見出しタグをフォントサイズを24ポイントで青色に装飾したいときは下記のようになります。

h1{font-size : 24pt; color: #0000ff; }

{}内の半角スペースや改行は見た目には影響しない、無視されます。改行して見やすいように工夫してもいいと思います。

h1{
  font-size: 24pt;
  color: blue;
}

値に関する単位について

CSSで大きさを具体的に指定するときは単位の使い分けができると、より詳細に指示できます。

inインチ(1インチ=2.54cm)
ptポイント(1ポイント=1/72インチ)
emその半里で有効なフォントの高さを1とする単位
px1ピクセルを1とする
%他の基準となるサイズに対しての割合

スタイルシートを書くところ

スタイルシートとは装飾のセレクタ:{ プロパティ : 値  }のことを差すことが一般的です。スタイルシートを書くところを3通りあります。

  1. 別ファイルにする
  2. <head></head>ヘッダー内に書く
  3. HTMLタグ内に書く

別ファイルにする

別ファイルを作るのが一般的です。拡張子は「.css」です。HTMLファイルには読み込むCSSファイル名の指示を<head></head>ヘッダー内で指定します。

<link rei="stylesheet" href="sample.css" type="text/css">

複数のHTMLファイルで共通するスタイルシートをまとめて別ファイルに記入すれば、ファイルを修正するだけで一度に複数のHTMLファイルの見た目を変えることができます。

<head></head>ヘッダー内に書く

ヘッダー内に<style></style>を書きます。この<style></style>の間にスタイルシートを書き込みます。

HTMLタグ内に書く

HTMLのタグに直接書き込むことが可能です。タグ内にstyleと入力して細かく設定します。

<h1 style="font-saize: 24pt; margin: 0; padding: 0.3em; color: #fde321">

スタイルの優先順位

いろんな場所で同じタグにスタイル指定を行うと、指示が重複します。どの指示を優先するかはルールがあります。

  • 一番最後に書いたもの、後から読み込まれたスタイル指定
  • HTMLのタグ内に書かれたスタイルが優先される
  • !importantが付いたスタイル指示
  • 作成者のスタイルシート

やっぱり苦手だと思う人は

「やっぱり苦手だ」と思う方は無料学習サイトがありますよ。

CSSに特化した学習サイトMarkupは、北海道情報大学情報メディア学部4年の名越慎さんが 卒業制作で制作したサイトになります。なので、今のところ無料で勉強できます。有り難いことですね。

他には、Progateも無料で使うことができます。

有料ですが、プログラミングのオンラインスクールのCodeCampもいいと思います。

勉強もちょっと抵抗があるという方は、ホームページ作成ソフトやWebビルダーに丸投げでも大丈夫です。気が向いたら勉強してみてくださいね。


HP作成
スポンサーリンク
いつもありがとうございます!
楽カミほむぺ★
タイトルとURLをコピーしました