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

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

実際に書いてみる!WEBデザイナーとしてバイト採用レベルのコーディング

WEBサイトをコーディングする

photoshopで起こしたデザインカンプをスライスで書き出し、HTMLとCSSを使ってコーディングができればWEBデザイナーの完成です。デザイン面のクオリティに程度の差はあっても、このレベルまでこれればWEBデザイナーとしての仕事の需要はあります。すぐにでもデザイン現場に飛び込んで一気にスキルを上げる成長段階に入っています。

未経験者WEBデザイナー最後の試練であるコーディングの仕方をまとめます。

デザイナーLevel:2 「アルバイト採用レベルのWEBデザイナー」目次

この記事の内容

どのようなコードなのか早くみたい!というかたはこのページで完成するサンプルHTMLをダウンロードしてください。
コーティング済みhtmlをダウンロード

HTMLを新規で作り、リセットCSSを読み込む

新規HTMLを作成する

HTMLファイルにそのままコードを書くと、ブラウザ独自のCSSが当て込まれてしまい思うようなデザインをすることができません。HTMLしかかけない人にとっては有効な機能ではありますが、WEBデザイナーにとっては邪魔以外の何者でもありません。

そこでWEBデザインの現場で取る選択肢は大きく分けて2つ。reset.cssを使いすべてのHTMLタグのブラウザ独自読み込みをリセットするか、normalize.cssを使いすべてのブラウザで基本的なレイアウトを揃えてしうかです。

勉強・スキルアップで考えるとすべてのCSSを自分で考えて書き込むreset.cssがよいでしょう。今回はこちらを使用します。

http://html5doctor.com/html-5-reset-stylesheet/

Dreamweaverで新規ファイル>HTMLを作り、そのままCtrl+Sで保存します。ファイル名は【index.html】。この名前はWEBの慣習でトップページは決まってこの名前です。サーバーもデフォルトの設定だと【http://xxxx.com】とアドレスを打ち込むとindex.htmlという名前のファイルを探し、あればそれを表示するように設定されています。

次に新規ファイル>CSSでファイルを作り、上記URLにかかれているreset.cssをコピペします。保存の場所はindex.htmlと同じ場所で大丈夫です。

DreamweaverはサイドバーからのドラッグアンドドロップでCSSを読み込める

DreamweaverでのCSSの読み込み

本来はこのようなコードを書きCSSを読み込むコードを書く必要があります。しかしDreamweaverはサイドバーからドラッグアンドドロップする適切なコードに変換されて表示してくれます。作業効率化のために覚えておきましょう。

CSSは必ずhaedタグの中に入れてください。その外だとブラウザ表示したときに読み込まれないことがあります。

HTMLとCSSで全体の骨組みを作る

HTMLの骨組み

基本のHTMLなのでHTML5の記述は使いません。その場合、おおまかな枠を定義するのはすべてdivタグを使用します。HTML5になるとこの中で意味合いが分けられて、nav・headerタグを使うようになります。

HTMLコーディングになれないうちは、タグの最初と最後にコメントをつけるとタグの締め忘れでレイアウトが崩れるという心配がありません。

デザインカンプとHTML構造を比較するとこのようになります。PCブラウザで見た時にそれぞれのセクションの背景が横幅100%で見えるようにするコーディングです。HTMLの骨組みを書いたら、このHTMLで本当に想定通りのレイアウトが出来るのかどうかをCSSを書いて確認します。

デモサンプルダウンロード

横幅のブラウザで見ても背景が横100%で表示されているのがわかります。骨組みを作る際はいきなり画像を入れるのではなく、backgroundで適当に色を入れて、heightで高さを作ってあげると効率よく確認できます。

コンテンツ全体の横幅の確認が取れましたが、テキストがすべて左上端によってしまっています。
メインビジュアルを除いて、デザインカンプなら横1080pxで中央揃えになっていなければなりません。

そのためのコンテンツ枠をHTMLとCSSで書いていきます。

骨組みの中に更にコンテナを作ってあげます。このようにHTML5使用しないコーティングは基本的にdivだらけになります。この中に入れた【_wrapper】のコンテナに横幅指定と中央揃えを行います。CSSをこのように追加します。

デモサンプルダウンロード

margin: 0 autoはよく使うCSSです。親要素に対して中央揃えをしたい時に使用します。上下にマージンが欲しい時は0の数値はpxに変更します。縦幅が不自然にあるのはレイアウト確認でおこなったheightが効いているからです。不要ならば取ってしまいましょう。

ここから詳細なコーディング作業を行っていきます。

メインビジュアルのコーティング

メインビジュアルのコーディング

1)横幅に応じてメイン画像の大きさが変わる
2)横幅が変化しても2つのラベルの位置は変わらない

この2つのレイアウトを実装します。

デモサンプルダウンロード

background-size:coverで画像の縮小を行う

メインビジュアルの画像は縦横比を維持しつつ横100%でブラウザ幅によって可変させたいため背景として設置します。これによりimgで設置ラベルの配置も楽になります。
拡大縮小の基準となる場所を background-position:center bottom;で指定し、中央の下にしています。

ラベルはposition:absoluteによる絶対配置

ブラウザがどのサイズであっても、表示位置をブラウザ端から何ピクセルにするかが指定できます。ラベルにabsoluteを指定しただけだと、どこを基準に絶対配置していいのかブラウザがわからないためbottom0ならブラウザの一番下に表示されてしまします。

今回は【メインビジュアルの一番下・左】などにラベルを置きたかったため、親要素のdivタグにposition:relativeを入れました。こうすることでその中に入っている要素にposition:absoluteを使ったとき、親要素を基準として絶対配置を行えるようになります。

ナビゲーションのコーディング

ナビゲーションのコーディング

1)横並びでレイアウトする
2)背景を横100%にする

ナビゲーションはサブナビゲーション・メインナビゲーション・の2つで構成されているため、骨組みのHTMLにサブを追加してからコーティングをします。

続いてメインのナビゲーションもコーディングしていきます。

デモサンプルダウンロード

floatはoverflow:hiddenで解除できる

ここでのポイントはfloatの使い方です。サブナビでもメインナビでも右寄せ・左寄せ(回り込み)をするためにfloatを使用していますが、次にくる回り込みさせたくない要素にclearを指定しないとレイアウトが大きく崩れてしまいます。

本来ならばそれが正しいのですが、clearと同じ効果を持つ裏ワザがあり多くのWEBデザイナーはそちらを多用します。それがoverflow:hidden。本来は要素をはみ出るものは表示しないという使い方をしますが、floatを使っている親要素に指定することでclearと同じ効果を出すことができます。

ulの中にli(float:left)でナビゲーションをつくるとき、ulにoverflow:hiddenを使用することで回り込みの解除を行うことができます。管理がしやすいという面でWEBデザイナーには必須のテクニックです。

メインコンテンツをコーディングする

メインコンテンツのコーディング

デモサンプルダウンロード

見出しの画像を中央揃えする方法はいくつかありますが、今回はdivで見出しをくくり、text-align:centerで中央揃えするシンプルなものにしました。欠点としてはdivの中身がすべて中央揃えになってしまうことです。よって見出しをくくるためだけにdivを使用しました。

4つの画像はシンプルにリストでfloatを使用しています。3つ目の表示で親コンテナに入りきらなくなるため自動で改行しています。

紹介のコーティング

紹介のコーディング

デモサンプルダウンロード

こちらもリストを使用して2つのボックスを並べています。テキストと画像を囲むdivにtext-align:centerを入れて中央揃えにしていますが、最後のテキストは左揃えにしたいため、text-align:leftをいれて打ち消しています。このようにCSSは親にかかっている属性を子要素が打ち消すことができます。

ここまでできればアルバイトデザイナーなら採用

すべてのコードを書いてしますとサイトをそのままコピペできて勉強にならなくなってしまうので、この辺りで終了します。行ってきたコーディングができれば未経験アルバイトのWEBデザイナーの技量とした十分です。ここまでくれば実装したいレイアウトがあった場合、個別に調べればコーディングできるスキルはあるはずです。

給与基準は時給900~1000円が目安です。

STEP1~6までを実践できれば十分アルバイトのWEBデザイナーとしてやっていくことができます。デザインは独学での成長スピードはとても遅いため出来る限り早く現場に飛び込むことを必要です。1年もデザインの現場で実績を積めば1年後には時給2000円クラスの派遣社員レベル成長することができます。

WEBデザイナーとして生活をしていくならば必要最低限の知識と技術を得て採用面接にいくべきだと考えます。現場に入らないと何も始まりません。

社会人の方など勉強に時間が取れない人はオンラインプログラミング研修のCodeCampなどオンラインスクールを活用してWEBデザインを効率よく学ぶ方が早い就職・転職にたどり着けるでしょう。それだけ現場の人間にレクチャーを受けることは身なります。



ここまでのPhotoshop・HTML・CSSが理解できているという人は是非採用試験に挑んでみてください。

スポンサーリンク

Desingers Navigator

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

関連記事 / RELATED POST