ウェブサイトの作り方　”入門3”　CSS導入

おはようございます

本日はウェブサイトの作り方　その3をご紹介したいと思います。

前回の内容はこちらからご確認ください。

今回はCSSについてです。

前回HTMLとは、ウェブサイト上に文字や画像を表示させるためのコードと説明いたしましたが、HTMLだけですと、ただ文字が映し出されているだけの状態になりました。

<h1>株式会社〇〇の××ブログ</h1>
<h2>日々の出来事</h2>
<h3>最近の日本が暑すぎる件について</h3>
<p>今日も暑いですね。</p>
<p>最高気温が37度にまでなるそうです。信じられませんね。</p>

非常に見づらいですね。

皆様ならどのようなレイアウトをお考えになるでしょうか。

「h1の部分を中央に移動させたい」「タイトルの色を変えたい」「pの文字をもっと大きく/小さくしたい」

そのような「装飾」の役割を担うのがCSSです。

イメージとしましては、下記の流れのようになります。

htmlファイルで文字を書く

cssファイルで色や配置のレイアウトを変える

htmlファイルにcssファイルを読み込ませる

何はともあれ、実際に動かしてみましょう。

まず始めに、前回作成したフォルダの中に新たにもう一つフォルダをcssという名前で作成してください。

上記のようになりましたか？

次にcssフォルダを開き、その中にテキストドキュメントを作成してください。

作成できましたら「新しいテキスト ドキュメント.txt」という名前を「〇〇.css」に変換してください。

私はindex.cssという名前で作成しました。

名前は何でも構いませんが、英数字のみで名前をつけてください。日本語、カタカナ、漢字やスペースはダメです。

作成が終わりましたら、このファイルをVS Codeで開きます。

まだダウンロードされていない方はこちらからどうぞ
Visual Studio Code – コード エディター | Microsoft Azure

これが何を意味するのか気になるとは思うのですが、まずは動かせる楽しさを知ることが1番大切だと考えております。

なので、とりあえず上記のコードを全てコピーし、htmlに貼り付けてください。説明は次回以降丁寧にします。

少し説明しますと、前回のhtmlの書き方ではcssを読み込ませることができません。

なので、今回新たに上記のように入力することで、cssを読み込ませることができるようになります。

その中の5行目の

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

このコードは先ほど作成したcssファイルの場所を指定しています。

私の場合「href=”css/index.css”」になっていますが、皆様はご自身で作成されたファイル名を入力してください。

例えば、1234.cssという名前でファイルを作成したのであれば「href=”css/1234.css”」となります。

これでhtml側の作業は終わりましたので、いよいよcssの作業に移りたいと思います。

では、どのようにして文字を装飾していくのか。

この方法もすごく簡単ですが、何をどうしたいのかによりコードの書き方が変わってきます。

例えば、先ほどの

「h1の部分を中央に移動させたい」「タイトルの色を変えたい」「pの文字をもっと大きく/小さくしたい」

この例に当てはめて装飾しようとすると下記のように入力します。