htmlクラス受講5回目

今日はまず、「テーブルを使って会社概要を作成する」という宿題のチェックからでした。2つ作ったのですが、両方とも先生から合格をもらえたのでテーブルの作成はマスターできたかなと思います。

続いて、先週の続きのフォームの作成の送信ボタンを設置するところからやりました。送信ボタンを押して送信されるようにするには、<form>のActionに受け渡し先であるphpのファイルを指定します。実際に送信するところまでやりました。他にも、placeholderであらかじめ入力欄に指定の文字を入れておけることや、requiredにチェックを入れると入力必須になることも教えてもらいました

名称未設定-1a

そして今日のメインはfloatについてです。floatを使うと、普段よく目にしているようなboxが横並びになったレイアウトを作ることができるようになるので、Webサイト作成の幅が一気に広がります。

boxを作成し、それぞれの要素をfloat:leftもしくはfloat:rightで左右に寄せていきます。ここでポイントなのは、「一旦始めたfloatはどこかで必ず終わりを指示しなくてはいけないということです。clear:bothを指定してfloatを終わらせるようにします。そうしないとfloat中のものの高さが未確定の状態となってしまい、div#main(全体を囲うdiv)の高さが無かったことになってしまうのです。また、boxfloatを使用するときには必ずwidthも指定しないと回り込むことができないことや、div#mainwidthを設定することで、ブラウザを狭めてもboxが左下に落ちることがなくなるということも教わりました。

名称未設定-1b

それからfloatを使用したレイアウトのテンプレートを作成しました。今後はそれをコピーして使うことで、効率的にWebサイトの作成ができるようになるという優れものです。

名称未設定-1c

授業の最後には、実際にfloatを使ってboxを作成しました。習った通りにcssを組んでいくと、簡単にYahoo等でよく見かけるようなレイアウトができあがりました!

Comments are closed.