2カラムのwebサイトに挑戦！
こんにちは🌝
今日も「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」で勉強中です😎
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- 作者: Mana
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2019/03/16
- メディア: 単行本
- この商品を含むブログを見る
2カラムのwebサイトを制作
今回はCHAPTER5の「2カラムのwebサイト制作」にチャレンジしてみました！
2カラムのwebサイトはよく見かけるとても主流な構成だと思うのでぜひマスターしたいところです。
全体の流れとしては、、、
- ページ全体の見出しを作成
- footerの作成
- 横並びの設定
- メインエリアの作成
- サイドバーの作成
- レスポンシブ対応
といった感じです。（作成する前に全体の流れが把握できるのはとてもいいなと思います！）
いざ実践！
早速本を見ながら制作してみることに。
ただ見て写すだけではなく、これはこういう意味だなとか一つ一つ自分の中で解釈していくことが大事だなと最近感じて、意識的に考えながらやっています。
あとは、一つ書くごとに、サイトにどのように反映されるのかを確認することで、目で見て理解も深まる気がします。
そしてこんな感じに。。。
日付の部分のレイアウト崩れが気になります😭
本と照らし合わせても、どこが間違っているのかわからず。。
もやもやしております。。
2カラムになるとフルスクリーンサイトよりもcssで指定することが多く、まだ理解が追いついていない感がとてもあるので、もう2~3回は繰り返しやってみたほうがよさそう。
あとはいろんな2カラムのwebサイトの構成を見てみようと思います。
参考になりそうな2カラムのwebサイト
あとで参考にしたい2カラムのwebサイトをピックアップしてみました！
free stitch
水縞
KIHARA ONLINE STORE
フルスクリーンのwebサイトはこちら
2カラムに入る前にCHAPTER4でフルスクリーンのwebサイト制作もチャレンジしました💪
ブレンドモードという機能で画像に色を重ねたり、グラデーションを作ったり、デザインツールを使わなくてもCSSでいろいろな加工ができるのが楽しかったです✨
「1冊ですべて身につくHTML&CSSとWebデザイン 入門講座」実践編に入りましたー！
— Anrin@webデザイン独学勉強中👼 (@anrin_design) September 4, 2019
まずはフルスクリーンwebサイト。
まだまだ本を見ながらだけど一つずつ更新して変化を見るのが楽しいw
htmlとcssだけでいろんな表現ができるんだなー。早く活用したいな✨ pic.twitter.com/j5vE2E9cmG
