マネして作ってみよう!(手順解説付き)第8回目に突入しましたね。ここまでで半分くらいは仕上がってきているかと思います。それでは、コンテンツ部分を作っていきましょう。左側のボックスを完成させようコンテンツを作成しようコンテンツ部分は、『div#content』ボックスに入れます。左部分と右部分に分かれていますのでまずは左側を更新情報というコンテンツに位置付けて『div#info』ボックスを入れ子にします。左部分を作成しましょう。手順001div#menuの終了タグの後ろで改行し、下記のHTMLコードを追加してください。id="info"><h2>INFORMATION</h2><dl><dt><span>2010-01-05</span></dt><dd><div>14:00~16:00の間、ケーキセットをご注文いただいた方は、10%OFFのキャンペーンを行っています。href="#">詳細はこちらから。</a></div></dd><dt><span>2010-01-04</span></dt><dd><div>新年明けましておめでとうございます。ゆるらぎを宜しくおねがいいたします。/></div></dd><dt><span>2009-12-18</span></dt><dd><div>誠に勝手ながら12月28日~1月3日まで年末年始の休業日とさせていただきます。年始のオープンは1月4日10:00からです。</div></dd><dt><span>2009-12-12</span></dt><dd><div>新メニュー登場です!「さっぱりお酢の鶏丼」です。本日から18日まで、ご注文された方はサラダバーが無料です。</div></dd><dt><span>2009-12-08</span></dt><dd><div>12月7日に帽子の忘れ物がございました。心当たりのある方は、XXX-XXX-XXXまでご連絡ください。</div></dd></dl></div></div>手順002『INFORMATION』の見出しがメニュー横に配置されてしまいました。これも『div#contents』に横幅を指定してないので起こる現象ですので、幅を指定してあげましょう。780px;}手順003上記のHTMLコードで新たに出たdl,dt,dd要素について表にしました。Listの略称で、開始dlと終了dlの間は定義されたリストであることを表します。Termの略称で、定義語を意味します。Descriptionの略称で、定義語の説明を意味します。そんなに使う機会はないタグだと思うので今は気にしなくてもいいかと思います(今、『じゃあ使うなよ!』って聞こえました。怖い)ホームページ全体をウィンドウの真ん中に配置する今までホームページ全体がウィンドウの左側に配置されていましたが、このあたりでウィンドウの真ん中に配置しましょう。『今更かよ!』って思わないでくださいね(笑)開始のbodyタグで改行し、div#topを追加し、終了のbodyタグの前にdivを追加してください。省略部分のコードは、長くなるのであえて省略しました。--></body>ちなみに『/*』と『*/』の間には、コメントを記述することができます。『<!--』と『-->』も同様にコメントを記述できます。コメントはホームページ上には、表示されません。CSSに#topを追加してください。auto;}動画で確認してみましょう。『margin:auto』を指定することでウィンドウサイズを変化させても、自動で両サイドのmarginを計算し、真ん中に配置してくれています。左側のボックスを完成させよう後から右のボックスもつくるので、右側のスペースを空けておきましょう。左側の更新情報覧の幅を指定します。width:385px;}『div#contents』幅の大体半分くらいを取りました。手順004次に『INFORMATION』の見出しと更新情報を見やすいスタイルにしていきたいと思います。13px;}『日付』(dt要素)のスタイル説明(dd要素)を右に回り込ませる日付の位置を変更する文字サイズを小さくする一旦ここで表示してみます。手順005見出しスタイルの調整と日付(dt要素)の右側に説明(dd要素)が回り込みました。floatについては、第4回でも少し触れました。ACADEMYさんの記事が理解しやすいですので参考にどうぞ!次は説明(dd要素)を調整します。外側の左余白が40pxあったので、それを0pxにする背景画像を指定、区切り線の画像を入れる背景画像の繰り返し表示を無くすこれで左側の更新情報『div#info』ボックスは完成になります。手順006CSSの記述を走りまくってしまいましたが、1つ1つのスタイルがどんな風な動きをしているか、確認しながらやってみるとCSSをより理解しやすくなります。皆さんがある程度馴れてきたかと思い、1つ1つのCSSに対して画像を表示して確認するといった煩わしさもあったと思うので(勝手に解釈しました(笑))このように最後に確認するという形を取りました。基本的には、CSS追加→ファイルの更新→ブラウザで表示確認といった繰り返しの流れになりますのでこの動作に馴れておくといいと思います。マネして作ってみよう!(手順解説付き)ホームページ制作講座この記事が気に入ったらいいねしよう!最新記事をお届けします。管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。マネして作ってみよう!(手順解説付き)RECOMMENDこちらの記事も人気です。DBから取得した日付を表示する際に、1日マイナス表示される2019.03.12タイピングでジョジョがふわー2018.03.22WordPressブログの読み込みが重たいから改善してみた2018.03.17俺、社会不適合者なのかも知れない。OKINAWA-HACKこのブログは、ブログで稼いでなるべく組織に属さず、いわゆるフリーランスとして生きていきたいと常日ごろ思いながら、記事を書く管理人が運営しています。プログラミングが好きな管理人です。※ちなみにトップ画像の有刺鉄線は、組織の中から抜け出したい!という願望が表れています。