読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

CSSでレイアウト - 実践

HTML+CSS

1カラムレイアウト

  • ボタンは、画像を横に並べること


手順

  1. HTML基本構造の入力
  2. body内にテキストをペーストしマークアップする
  3. 基本は、見出しと本文の関係
  4. 必然性があれば、div要素でグループ化する
  5. head内にstyle要素を記述する
  6. 使用したセレクタを列挙し、margin: o; padding: 0; line-height: 1.0; としリセットする
  7. body要素に文字サイズや文字色を行高を指定する
  8. div要素など全体を囲む要素があれば、その幅指定から記述を始める
  9. 見出し要素や本文要素に対して、文字色・文字サイズを指定する
  10. 背景色が使用されている場合、paddingを調整しながら指定する
  11. 画像がimg要素で挿入する場合は、その幅に注意してその周りを指定する
  12. 次に、marginで下の空きを整えていく
ガラスの靴の持ち主を捜しています!

パソコンで応募する方

下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。
【応募規約】

○パソコンでのご応募は、お一人様一回限り(複数ご応募いただいた場合は最終応募のみ有効)とさせていただきます。
※但し、郵便ハガキでのご応募は、ハガキ1通を1口として、お一人様何口でもご応募できます。
○商店街で同時期に行われる他のキャンペーンと重複して当選することはできません。
○当選後の権利譲渡、換金はできません。
○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。
○ご応募は日本国内在住の方に限らせていただきます。
○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。
○景品の"ガラスの靴"は、11月17日から12月25日まで商店街内に展示した靴となりますので、予めご了承ください。また、サイズは23.5cmとなります。
【個人情報のお取扱いについて】

ご応募にあたり、ご記入いただいた個人情報(郵便番号、住所、氏名、電話番号、年齢)は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。


応募先・お問い合わせ


f:id:web-css-design:20160829064422p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">

</div><!-- /.header -->
<div class="content">

</div><!-- /.content -->
<div class="fooer">

</div><!-- /.footer -->
</div><!-- /.container -->
</body>
</html>