サイト模写１

HTML_CSS

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

気にすること

始める前にゴールを設定。だいたい見た目が同じであれば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;}

水色がNews左、黄色がNews右

やってみた感想

１時間程度でできるかと思っていたのに、横並びができた後、横幅を変更すると文字がはみ出してしまいその対応が大変でした。文字間を開けるため、marginを大きく設定していたのでが原因。親要素をはみ出してしまったり、思わぬ改行が発生したり。。。marginの設定って難しい。。。

コメント