WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

floatで作るWEBサイトの基本2カラムレイアウトのコーディング

floatを使ったレイアウト

HTMLとCSSの基本を覚えたらどんどんコーディングしていき経験を積みましょう。参考書やネットを見て理解しても技術は向上しません。見ながらでもよいので実際に手を動かしてコーディングすることが大事です。

基礎ができていればウェブサイトの骨組みだけなら現役のWEBデザイナーと同じレベルで行うことができます。まずは基礎となるレイアウトに挑戦しましょう。

デザイナーLevel:1 「はじめてのWEBデザイン」目次

この記事の内容

基本は2カラムデザイン

メインコンテンツの横にナビゲーション代わりのサイドバーがあるレイアウトはブログなどでよく目にします。これがWEBサイトの基本的なレイアウトです。これができていれば1カラム・2カラム・3カラムのレイアウトも簡単に組むことが出来るようになります。当サイト Web Designers NAVIも2カラムデザインです。

HTMLコーディング

基礎レイアウトのHTMLコーディング

まずは簡単にヘッダー・ナビゲーション・メインコンテンツ・サイドバー・フッターの5つの要素を作りましょう。すべてdivタグで作ってしまって大丈夫です。

デモファイルのダウンロード

CSSのfloatを使用して2カラムデザインにする

CSSを使って左右に要素を分ける

CSSでmainとsidebarを横並びにします。この時に決まりがありますのでこれは暗記しましょう。

floatはoverflowと組み合わせる

実際にはこのようなHTMLになります。これはひとつの定型文として覚えてしまったほうがいいくらい、WEB制作現場では多用されるHTM+CSSです。では実際にコードを書いて見ましょう。

デモファイルのダウンロード

floatは本来回り込み要素の次のHTMLにclearをつけることが基本ですが、WEBデザインの現場では管理しやすいことからfloatさせる2つの要素をdivでくくり、そのdivにoverflow:hiddenをつけることで回り込みを解除させる技を多用します。

floatを使って複数のカラムデザインを覚えよう

このHTMLコーティングは初級者から上級者まで多用するので必ず覚えましょう。CSS3を使うことで違ったコーティング方法もありますが、それはスマホやレスポンシブデザインのレベルになりますので初心者にはまだ難しいでしょう。それもこのfloatの考え方がわからないと理解できないものなので、アルバイト採用を目指すレベルのWEBデザイナー志望の方はまずはこのルールにそってコーティングの勉強をしてみると、技術の習得がはかどります。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST