サイト模写１

コーディング練習で有名なisara模写を始めてみましたが、ボリューム、難易度に圧倒されました。。
もう少し容易なものから始めようかと。練習模写サイトの記事を見つけたので、初級レベルからやってみた。

気にすること
気にしないこと
ポイント
困ったこと
1. ヘッダーの横並び
2. News部分の横並び
やってみた感想

気にすること

始める前にゴールを設定。だいたい見た目が同じであればOK。

画像は無料の写真素材サイトで取得する
項目間の空白や位置は見た目あわせる
PCで橫896pxまではレイアウトが崩れないようにする

気にしないこと

どこまでやって完璧とはならなし、きりがないので。

フォントは気にしない。だいたいあっているフォントサイズ
ボタン動作は実装しない
タブレットやスマホを考慮したレスポンシブ対応しない

ポイント

模写にあたりクリアしたいポイントを決める。

ヘッダーの横並び
メインビジュアルの背景と文字
News部分の横並び
画像の均等

困ったこと

３時間程度で完了。困った点はヘッダー部とNews部の横並び。

ヘッダーの横並び

リスト（ul、li）の横並び：display: inline-blockで横並び。

header ul { margin: 0; list-style: none; display: inline-block; }

header ul li { width: 60px; font-size: 12px; display: inline-block; text-align: center;}

ヘッダーのレイアウト調整：ヘッダー左（ロゴ）とヘッダー右（リスト＋ボタン）をflexboxで両サイドに配置。

header { padding: 0; width: 100%; height: 50px; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;}

News部分の横並び

Newsの記事を１行づつ横並び：flexboxで横並び。

article { padding-bottom: 10px; width: 750px; height: 30px; display: flex; flex-direction: row; align-items: flex-end; border-bottom: solid 1px; border-color: green;}

News部分のレイアウト調整：News左（ロゴ）とNews右（News記事一覧）ををまとめたコンテナーを作成してflexboxで中央に配置。

.news { margin: 0; width: 100%; height: 200px; background-color: aquamarine; display: flex; flex-direction: row; justify-content: center;}
.news_container { display: flex; flex-direction: row;}