目を引くトップページを作る

完成目標はこちら！

手順#

1.`index.html`を開く#

index.htmlを開き、<body>タグのすぐ下に divタグを追加

<div class="top-title">    <h1>タイトル</h1>    <p>キャッチフレーズなど</p></div>

class="top-title"で、クラス名を指定しています。クラス名は好きな名前でok. 今回は、top-titleにしてみましょう

classって何？#

classを使うと、divタグに名前をつけて、「〇〇という名前のdivタグ」とCSSから指定することができます。

<div class="クラス名"></div>と書いてあげると、特定のクラス名の部分にだけデザインを加えることができるようになります！

詳しく知りたい人は、こちらを見てください！

2. style.cssを開く#

top-titleの部分に背景色をつけ、高さを指定しましょう。

.top-title{    background-color: red;    height: 600px;}

3. 画像を保存#

トップページに使用したい画像を、自分のパソコンに保存します。

こちらのサイトは、無料の写真素材なのでここから選ぶのがおすすめです。

横長の画像の方が、綺麗に表示できます！

4. 画像をアップロードし、URLを取得する。#

今回はGlitchの機能を使って画像を載せてみます！

左のメニューから、Assetをクリック

UPLOAD AN ASSET をクリック

上の UPLOAD AN ASSET を押すと、ファイル一覧が表示されるので、ウェブサイトに使いたい画像を選択。

下のように、使いたい画像が見える状態になればOK!

画像をクリック！

下の写真のような画面が出るので、Copy URLを押すと、画像のURLが手に入ります！

5. divタグの背景に、画像をはる#

.top-titleのCSSに背景画像を選択するコードを書く。

代わりに、background-colorの指定は消す

.top-title{    /* 下の2行を追加 */    background-image: url("ここに先ほどコピーした画像のURLを貼る");    background-size: cover; /* エリア全体を覆うように指定 */

    /* 代わりに、background-colorの1行を削除 */
    /* heightの指定はそのまま残す */    height: 600px;}

ここで注意点です！

url(" ") は残して、その中に画像のURLを貼ってください！

例えば、background-image: url("https://cdn.glitch~/hogehoge") という感じになります！

画像は表示されましたか??

6. タイトルを見やすくしよう！#

文字の部分を見やすくするために、文字の部分だけさらにdivタグで囲んでみましょう！class名はtop-contentsで！

すると、トップの部分のindex.htmlはこのようになります。

<div class="top-title">    <div class="top-contents">        <h1>タイトル</h1>        <p>キャッチフレーズなど</p>    </div></div>

7. タイトルにCSSをつけよう#

まず、位置を調整します。これまで書いてきたtop-titleのCSSを少し変更しましょう

.top-title{    /* 余白を調整: 上 右 下 左 */    /* タイトル左づめ */    padding:100px 100px 100px 0;    /* タイトル中央にするときは */    /* padding:100px 100px 100px 100px; */
    /* その他のCSSはそのまま残す */}

手順6で作成したtop-contentsにもCSSをつけましょう！

.top-contents{  background-color: /* 好きな色を選ぼう */;  color: /* 好きな色を選ぼう */;  /* 余白を調整: 上 右 下 左 */  padding: 50px 50px 50px 50px;}

完成！#

その他、CSSはいろんなことができます！例えば...

点線を書く
枠線をつける
文字の間隔を広げる
タイトルの位置を変えるなどなど...

ぜひいろいろ調べて試してみてください！！

手順#

1.index.htmlを開く#