【第９回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

2023年11月28日 17:46

どうもAriです。柿ピーのピーだけ全部残すタイプです。

前回までで一旦HTML編は終わりにしていよいよCSS編。
「CSS」とは「Cascading Style Sheets」のことで、サイトの見た目を左右する。色をつけたり、余白を入れたり、見やすいホームページには欠かせない。

ということで今回はCSSの基本的な書き方を紹介し、実際に文字や背景の「色」を変えてみようと思う。

書き方

CSSの書き方には、HTMLファイルに直接書き込む方法と、CSSファイルを別で作り、HTMLファイル内に読み込む方法がある。
複雑なコードになってくると修正のしやすさなどから別ファイルがおすすめ。（タグにぶち込む、という手もあるがCSSはCSSでまとめたいので今回はなし。）

基本的に書き方は変わらないので、まずは同一ファイルでやってみる。
CSSのコードは全て<head>タグ内に書く。その時、どこからどこまでCSSなのか分かるように、<style> タグを使う。
以下で紹介するコードは全て<style>タグ内に書いている、というのを忘れずに読んでいただけたら。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>MAKE MORE</title>
    </head>
    <body>
        <header id="header">
            <h1>MAKE MORE</h1>
            <h2>知識ゼロの大学生２人で擬似ウェブサイト作ってみた。</h2>
        </header>
        <main>
            <div id="lead">
              <p>
                 AriとSivの2人で作成中のホームページ。<br>
                 高校時代の同級生。<br>
                 異なる大学に進学するが、どちらも暇。
              </p>
            </div>
        <img src="MAKE_MORE_image/makemore.PNG" width="30%" alt="緑のカバ">
        </main>
        <footer>
        <p>2023/11/23</p>
        </footer>
    </body>
</html>

今までに書いたHTMLのコードがこんな感じ。divとか色々使い方あってる自信がないので参考程度に。。
このページを装飾するので、<head>タグ内に<style>タグを入れる。順番はなんでもよさそうだったけど、文字コードは上に置いておきたいのと、長々コードを書くので、</head>の直前に入れることにする。

基本書式

CSSは基本的にHTMLの「どの部分の」「何を」「どう変えるか」を書いていく。順番に「セレクタ」「プロパティ」「値」と呼ばれ、これらを順番に書いていく。

例えばこんなふうに黒字をオレンジに変更したい、という場合を考えてみる。この「MAKE MORE」は<h1>タグで表示されているとすれば、「h1タグの」「色を」「オレンジにする」と書けばよい。

そのコードが以下の通りである。（必要なところだけ抜粋）

<html>
    <head>
      <style>
　　　　　　　　　　　　　　　h1{color:#FFC000;}
      </style>
    </head>
    <body>
      <h1>MAKE MORE</h1>
    </body>
</html>

「セレクタ」はタグの名前、「プロパティ」は色を変える場合「color」、「値」はカラーコードで指定する。（「orange」のように色の英語名でも可。）基本的な形は「セレクタ{プロパティ:値;}」である。;（セミコロン）を打てば、一つのセレクタに対し、同じカッコ内にいくつもプロパティを盛り込んで構わない。

プロパティとそれに対応する値は、どのような装飾をするかによって変わる。例えば、画像を貼った時のように、幅や高さを変えるときのプロパティは「width」「height」で、値はピクセルや%で指定する。フォント名を指定したり、下線を引いたりもできる。

とはいえとても書き切れる量ではないので、今後自分が使いたいプロパティが出てきたら様々書いていこうと思う。

せっかくなのでホームページの方にも適用しておいた。もうちょっと濃いオレンジがよかったな。

最後に

CSSってアイデア次第でなんでもできるような気がする。アイデア次第で。とはいえ私もオシャレなホームページにしたいわけ。
ということで、iPadとかフォトショとかそんなオシャレなもん持ってないので、紙とペンでデザイン書いてやろうと思います。美術は2です。

でも写真撮ってレタッチするし、学生のうちにAdobe入るのもAriだよなあ。

この記事が気に入ったらサポートをしてみませんか？