WebコーディングCss適用編

Css適用編

前回作成した、「初めてのコーディング実践編」で作成したHTMLデータを元にCSSを適用していきます!!

前回のデザイン内容

下記の画像の内容を元にCssを調整していきます!!

サンプル画像

完成HTML

ヘッダーを調整

ヘッダーの内容を整えていきましょう!!

ヘッダー調整完了

下記の画像の用にレイアウトが整います。

コンテンツを調整

コンテンツ調整完了

下記の画像の用にレイアウトが整います。

フッター調整

フッターの調整完了

下記の画像の用にレイアウトが整います。

これで大枠のレイアウトが完成しました。

上記の調整に加えて、paddingやmarginなどを使い細かな間の調整や、大きさの調整を行う事で、綺麗な見た目を表現することが可能です。

Commentsこの記事についたコメント

%d人のブロガーが「いいね」をつけました。