年末まで毎日webサイトを作り続ける大学生 〜24日目 Single Column Layoutでサイトを作る〜

はじめに

こんにちは！最近週末は温泉に通っている@70days_jsです！
webサイト制作でお金を稼ぐために年末まで毎日webサイトを作っております。
ここ数日、2 column layout、3 column layoutと作ってきたので、今日はSingle column layoutのサイトを作ってみました。
何かを参考にしようか迷いましたが、とりあえず最初は自分でということで何もみないで作りました。レスポンシブには対応していません。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は24日目。(2019/11/11)
よろしくお願いします。

サイトURL

• https://sin2cos21.github.io/day24.html

やったこと

Single Column Layoutでサイトを作りました。

まずは構想を作ります。↓

次に手書きでイメージ図を描きます。↓

最後に実際にコーディングして完成です。↓(gif、重くてみられないかも。サイトURLへGO!)

今日も特に見せ場はないのですが、とりあえず今回は画像で押してみました。

<main class="wf-sawarabimincho">
        <div id="message">
            <h2>君は準備できているか？</h2>
        </div>

        <div id="photo1" class="photo">
            <div class="photo_message">
                <h3>山にきた。さぁ、始まるぞ。</h3>
            </div>
            <div class="photo_image">
                <img src="day24_image/photo1.jpg" alt="山に来た画像">
            </div>
        </div>
　　　　...

こんな感じでmainはmessageから始まって、あとはphoto1のdivを画像分作ります。

cssも簡単に。

# message {
    padding: 300px 0;
}
# message > h2 {
    text-align: center;
    width: 100%;
    font-size: 2em;
    font-weight: 1000;
}

.photo {
    color: rgba(0, 0, 0, .8);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 100px 0;
}

# photo1 {
    background-color: rgba(255, 255, 255, 1);
}

.wf-sawarabimincho { 
    font-family: "Sawarabi Mincho"; }

.photo_message {
    width: 70%;
    font-size: 1.5em;
}

.photo_image {
    width: 100%;
    text-align: center;
}

.photo_image > img {
    width: 50vw;
}

fontは全体を通してgoogleのやつを使っています。あとはこれを５枚分設定すれば完成です。

感想

デザインの仕方が難しいと思いました。なんというか、デザイン力を鍛えねば・・・。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

参考

1. 動物 リス ツリー - Pixabayの無料写真 (https://pixabay.com/ja/photos/%E5%8B%95%E7%89%A9-%E3%83%AA%E3%82%B9-%E3%83%84%E3%83%AA%E3%83%BC-%E8%87%AA%E7%84%B6-4605518/)
2. キャンプ キャデラック 1960 - Pixabayの無料写真 (https://pixabay.com/ja/photos/%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97-%E3%82%AD%E3%83%A3%E3%83%87%E3%83%A9%E3%83%83%E3%82%AF-1960-4610085/)
3. キャンプ テント 自然 - Pixabayの無料写真 (https://pixabay.com/ja/photos/%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97-%E3%83%86%E3%83%B3%E3%83%88-%E8%87%AA%E7%84%B6-%E5%A5%B3%E3%81%AE%E5%AD%90-691424/)
4. テント キャンプ 夜 - Pixabayの無料写真 (https://pixabay.com/ja/photos/%E3%83%86%E3%83%B3%E3%83%88-%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97-%E5%A4%9C-%E3%82%B9%E3%82%BF%E3%83%BC-548022/)
5. 市 泊 暗い - Pixabayの無料写真 (https://pixabay.com/ja/photos/%E5%B8%82-%E6%B3%8A-%E6%9A%97%E3%81%84-%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3-89197/)

今日は画像をたくさんお借りしました。ありがとうございます！