https://free-hp.net/clinic/cl_001/

参考動画:https://www.youtube.com/watch?v=RBLkXAG4QTM

全部を作るのではなく、1部だけを作る。

流れ

  1. 画像を読み込む:クロームの拡張機能使う
  2. テキスト読み込む:全選択でhtmlにコピペ
  3. h1タグや、imgタグを入れていく
  4. デザインを考慮したまとまりのdivタグなどを入れていく
  5. リセットCSSの読み込み
  6. フォントの設定をまずお手本から拝借:ここを合わせないとデザインが合わせづらい。
  7. colorzillaという拡張機能で、サイトの色をそのままコピーできる。

リセットCSS

http://html5doctor.com/html-5-reset-stylesheet/

<link rel="stylesheet" href="reset.css">で読み込む。

display:inline-block;

この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。

ヘッダーの要素位置の調節