はじめに
こんにちは！最近週末は温泉に通っている@70days_jsです！
webサイト制作でお金を稼ぐために年末まで毎日webサイトを作っております。
ここ数日、2 column layout、3 column layoutと作ってきたので、今日はSingle column layoutのサイトを作ってみました。
何かを参考にしようか迷いましたが、とりあえず最初は自分でということで何もみないで作りました。レスポンシブには対応していません。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は24日目。(2019/11/10)
よろしくお願いします。
サイトURL
やったこと
Single Column Layoutでサイトを作りました。
まずは構想を作ります。↓
次に手書きでイメージ図を描きます。↓
最後に実際にコーディングして完成です。↓(gif、重くてみられないかも。サイトURLへGO!)
今日も特に見せ場はないのですが、とりあえず今回は画像で押してみました。
<mainclass="wf-sawarabimincho"><divid="message"><h2>君は準備できているか？</h2></div><divid="photo1"class="photo"><divclass="photo_message"><h3>山にきた。さぁ、始まるぞ。</h3></div><divclass="photo_image"><imgsrc="day24_image/photo1.jpg"alt="山に来た画像"></div></div> ...
こんな感じでmainはmessageから始まって、あとはphoto1のdivを画像分作ります。
cssも簡単に。
#message{padding:300px0;}#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:100px0;}#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のやつを使っています。あとはこれを５枚分設定すれば完成です。
感想
デザインの仕方が難しいと思いました。なんというか、デザイン力を鍛えねば・・・。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
参考
- 動物 リス ツリー - 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/)
- キャンプ キャデラック 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/)
- キャンプ テント 自然 - 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/)
- テント キャンプ 夜 - 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/)
- 市 泊 暗い - 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/)
今日は画像をたくさんお借りしました。ありがとうございます！