CSS

はじめてのCSS作成 備忘録

CSSデザイン

こんばんは、 今日はWEBデザインで必須のCSSの備忘録です。CSS(Cascading Style Sheets)は、カスケーディング・スタイル・シートと呼ばれウェブページのスタイルを指定するための言語になります。

HTMLとCSSを組み合わせて使用することで細かくスタイルやデザインを指定することができ、ほぼ全てのウェブページで使用されている言語です。

HTMLで見出しタグ、テーブルタグ、リンクなどの構造を記述します。CSSは、それらをどうやって装飾していくかの言語になります。

はじめてのCSS作成

CSSは①直接HTMLファイルにCSSを書き込む方法②HTMLファイルからCSSファイルを読み込む方法があります。②のHTMLファイルからCSSファイルを読み込んで使用するのが一般的ですが、理解を深めるためにまずは①直接CSSを書き込む方法で始めます。

HTMLページ

まずは ①直接HTMLページにCSSを書き込む方法 からご紹介します。

HTMLに直接書き込むと言ってもどこに書き込んで何を書けばよいか解りません。まずは下記のHTMLコードのみで記述したコードを見てみてください。htmlのコードは前回の記事を参考にします。

HTMLコード

<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>ショートカットリンク集</h1>
<hr>
<p>はじめてのリンク集です。</p>
<a href=”https://google.com”>Googleのページ</a><br>
<a href=”https://yahoo.co.jp”>yahooのページ</a><br>
<a href=”https://youtube.com”>youtubeのページ</a><br>
</body>
</html>

はじめてのhtmlリンク集-1

上記がHTMLタグのみで記述したページの外観になります。何となく味気なく近代的なWEBページの外観ではありません。昔のWEBページはデザインもそこそこでこんな感じでした。

①CSSをHTMLコード内に直接記述する

それでは、CSSのコードを記述していきましょう。HTML内に記述する場合は<head>タグの間にコードを記述していきます。CSSを記述する<style>タグの部分は太字にしています。

CSSを記述したHTMLコード

<html>
<head>
<title>はじめてのHTML</title>

<style type=”text/css”>

h1 {
color: #6677aa; /*文字色*/
border: solid 3px #3344cc; /*線色*/
padding: 0.5em; /*文字周りの余白*/
border-radius: 1em; /*角丸*/
}

a {color:blue;}
a:hover {color:#fff; background:#00c;} /*カーソル選択中の色*/
a:active {color:#ff0;} /*クリック中のリンクの色*/

</style>

</head>
<body>
<h1>ショートカットリンク集</h1>
<hr>
<p>はじめてのリンク集です。</p>

<a href=”https://google.com”>Googleのページ</a></br>
<a href=”https://yahoo.co.jp”>yahooのページ</a></br>
<a href=”https://youtube.com”>youtubeのページ</a></br>
</body>
</html>

ちょっとCSSを記述するだけでデザインが大きく変わります。CSSでないと丸みを帯びた見出しタグやリンクを合わせた時の色を変えることは難しいです。

CSSを駆使してオシャレなWEBページを作成していきましょう!

② HTMLからCSSファイルを読み込む方法

引き続き ②HTMLからCSSファイルを読み込む方法 です。この方法はHTMLファイルとCSSファイルを2つ分けます。

まずは、HTMLファイルのコードです。CSSファイルを読み込むためにはHTMLファイルの<head>タグの間に <link rel=”stylesheet” type=”text/css” href=”CSSファイル名”>を記述します。下記のようなコードになります。

HTMLコード

<html>
<head>

<link rel=”stylesheet” type=”text/css” href=”csstest.css”>

<title>はじめてのHTML</title>
</head>
<body>
<h1>ショートカットリンク集</h1>
<hr>
<p>はじめてのリンク集です。</p>
<a href=”https://google.com”>Googleのページ</a><br>
<a href=”https://yahoo.co.jp”>yahooのページ</a><br>
<a href=”https://youtube.com”>youtubeのページ</a><br>
</body>
</html>

HTMLファイルにCSSファイルを読み込むコードを記述したらCSSファイルを作成します。

①メモ帳にCSSのコードを書きます。

②名前を付けて保存の際に、ファイル名は***.css すべてのファイルで保存します。

③下記のようなファイルが作成されます。

CSSファイル作成方法
CSSファイル作成方法

④HTMLファイルを開いてみてCSSのデザインが反映されていれば連携が完了されていることを確認できます。

CSSファイルのデザインが反映されない場合は下記を確認してみてください。

  • CSSのファイル名を確認
  • CSSのファイルパスを確認(HTMLと同じフォルダが良い)
  • HTMLコードの記述を確認

CSSファイルを分けることで、デザインを変更したい場合はCSSファイルのみを変更すれば色やスタイルなどのデザイン部分のみ変更出来てとても便利です。

それではー!

ABOUT ME
なお
フルスタックエンジニアを目指すサラリーマン。インフラ、WEBを中心に色んなIT関連情報に手を出したいと思います。