開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。3カラムのレイアウト3カラムのレイアウト作成は2カラムのレイアウト作成方法を応用したものなので、2カラムのレイアウトが問題なくできていれば、難しくありません。ボックスを5つ用意し、BOX1~BOX5として、BOX2とBOX3とBOX4の部分を3カラムのレイアウトに変更してみましょう。BOXを用意するまずは5つのボックスを用意します。各ボックスには「box1」~「box5」とクラス名を指定して、ボックスの中には「BOX1」~「BOX5」とボックス名を記述します。横に並べたいBOX2とBOX3とBOX4をグループにする下記のコードを</body>タグの直前に追加してください。box-green”>BOX4</div>を<div>で囲みます。グループ化した<div>にはクラス名「box」と「box-pink」を指定し、スタイルシートを適用します。BOX2とBOX3とBOX4を横に並べる下記のコードを</body>タグの直前に追加してください。box-purple">BOX5</div><p>BOX5が後ろに入り込んでしまう・・・</p></div></body></html>グループ化した3つのボックスを横に並べるため、BOX2とBOX3とBOX4の<div>のクラス指定に「float-left」を追加します。BOX2とBOX3とBOX4の後ろに入り込んで表示されてしまいます。BOX5が後ろに入り込まないようにする下記のコードを</body>タグの直前に追加してください。box-pink”>に対して、「clearfix」のクラス指定を追加します。BOX2とBOX3とBOX5の横幅を指定する下記のコードを</body>タグの直前に追加してください。box-purple">BOX5</div></div></body></html>横に並べたBOX2とBOX3とBOX4の横幅を指定して、ボックスの中身に関係なく指定した横幅で表示されるように変更します。BOX2とBOX3とBOX4の<div>のクラス指定に「w33」を追加します。33.3333%」と指定しているため、ボックスの横幅が33.3333%になり、3つ合わせて約100%の横幅になるようにしています。本章のまとめご不明点はお問い合わせフォームからご連絡ください。講師の詳細はこちらワードプレスセミナーも人気!より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。わかりやすく教えるのには自信がありますので、ぜひご参加ください。