htmlコーディングの勉強方法とコーディング練習用デザインの配布

htmlコーディング おすすめの勉強方法

  1. htmlとcssの書き方など、基本的な内容を説明しつつ、作りながら学んでいく本を1冊勉強してみましょう。
    初めて学ぶ方は、挫折しないように、なるべく薄くてわかりやすい初心者向けの本を選ぶといいでしょう。
    初心者向けが終わったら、もう1冊もう少し難しい本をこなすと基本はある程度おさえられるかと思います。
  2. サイトでよく使うレイアウト、インターフェイス、パーツなど(例えば、「2カラム」「ナビゲーション」「デザインボタン」)を集めた本で、実際作りながらhtmlとcssの組み方を学びましょう。
  3. 2と並行しつつ、ひたすら、コーディングしまくりましょう。
    自分で作ったデザインより、他人が作ったデザインをコーディングする方が勉強になります。

htmlやcss辞典を 眺めていても仕事で通用するスキルは身につきません。(辞書としてもっていてもいいとは思いますが)
コーディングはサイト制作の後半部分ですので、他の工程の遅れを引きずって短納期を要求されることもあります。決められた期間内に、早く正確にコーディングできなければ仕事になりません。
基本を理解したら、デザインを見た瞬間、頭の中でスライスし、htmlとcssを組めるようになるまで、ひたすらコーディングあるのみ、です。……と言うと大変そうですが、ようは慣れです「慣れ」。
私の個人的経験では、「もうこれあかん、思うようにならない、間に合わない。切腹するしかない・・・orz」という思いをするたびにレベルアップしていきます。
といっても、まだウェブの仕事についていない方は、他人のデザインをコーディングする機会は少ないかと思います。そういう方用に練習用デザインを用意しましたので、よろしければご利用ください。

htmlコーディング練習用デザイン配布

デザインはFireworks CS5で制作しています。
ロールオーバー、スライダーのレイヤーを見ることができませんが、Photoshopでも開くことはできます。
ご自由にご利用ください。ただし、二次配布は禁止いたします。
(サンプルの社名は架空のものです)

現在はシンプルなコーポレーションタイプのみですが、ご希望があれば、ECサイト、プロモーションサイトなども増やしていく予定です。

1.シンプルなコーポレートサイト(初心者向け)

htmlコーディンデザイン ダウンロードはこちら

シンプルなコーポレートサイトです。

【ポイント】
ヘッダとコンテンツでfloatを使ってみましょう。

【プラスアルファ】
(1)グローバルナビゲーションにロールオーバーの効果をつけてみましょう。(pngファイルのレイヤー「over」)
※cssで行う方法、jsで行う方法、どちらでもOKですが、両方できた方がいいです。
(2)「お知らせ」のリンクは、マウスオーバーで下線なしになるように設定してみましょう。
(3)右のバナーは、マウスオーバーで色が薄くなるように設定してみましょう。(cssで設定できます)

【仕事で行う場合の目標時間】
シンプルでよく使うレイアウトなので、30分以内で終わらせたいです。

2.シンプルなコーポレートサイト(初級~中級者向け)

htmlコーディンデザイン ダウンロードはこちら

シンプルなコーポレートサイトですが、2カラム、3カラムが増えています。

【ポイント】
レイアウトを効率よく行いましょう。

【プラスアルファ】
(1) グローバルナビゲーションにロールオーバーの効果をつけてみましょう。(pngファイルのレイヤー「over」)
(2)ビジュアルにスライダーを設置してみましょう。(pngファイルのレイヤー「ビジュアルスライダー」に画像3枚あり)
参考:http://bxslider.com/
(3)「ページトップに戻る」にスムーススクロールを付けてみましょう。

【仕事で行う場合の目標時間】
プラスアルファを含めて1時間~1時間半以内で終わらせたいです。
スライダー、ライトボックス、スムーススクロールなどは設置することが多いので、jQueryプラグインを利用できるようになりましょう。(少なくともフリーのコーダーには必須かと)

3.シンプルなコーポレートサイトをレスポンシブに

htmlコーディンデザイン ダウンロードはこちら

1.で作成したサイトをレスポンシブにしましょう。ブレイクポイントは640pxです。
スマホファーストとPCファースト、両方練習してください。

【ポイント】
jQueryは不要です。(ロールオーバーがない場合)
画像が荒れないように、PCとSPのpngで大きい方を使用しましょう。

【プラスアルファ】
(1)できるだけファイルを軽くしたいので、「お知らせ」やナビゲーションの文字をテキストにしましょう。フォントは、ヒラギノ、またはメイリオで作成してください。(他のフォントでもOKです。Webフォントにも挑戦してみてください)
デザインによっては画像になる場合もあるので、画像・テキスト両方でコーディングできるようにしておきましょう。

【仕事で行う場合の目標時間】
シンプルなレスポンシブでjQueryなしなので、1時間前後ほどでしょうか。
メディアクエリとか、画像や幅の%表示とか、最初は時間がかかると思いますが、数をこなせば大丈夫です。

4.jQueryをつかってレスポンシブに

htmlコーディンデザイン ダウンロードはこちら

グローバルナビゲーション、メインビジュアルのスライダー、スムーススクロール、「イベント情報」のカラム落ち防止の4個所でjQueryを使いましょう。
ブレイクポイントは640pxです。スマホファーストとPCファースト、両方練習してください。

【ポイント】
jQueryを使いこなしましょう。
(1) グローバルナビゲーションは640px以下でボタンに変わります。「レスポンシブ ナビゲーション」で検索すると、プラグインを紹介したサイトが出てきます。
(2)ビジュアルにスライダーを設置してみましょう。レスポンシブに対応させましょう。
(pngファイルのレイヤー「ビジュアルスライダー」に画像3枚あり) 参考:http://bxslider.com/
(3)スムーススクロールはボタン下部固定でもいいですが、「少しスクロールすると右下部にボタンがフェードで出現するタイプ」も設置してみましょう。
(4)イベント情報は、テキストの長さによって高さが変わります。そのため、高さをそろえるjQueryを使います。「高さをそろえる jQuery レスポンシブ」などで検索してください。

【プラスアルファ】
(1)できるだけファイルを軽くしたいので、「お知らせ」やナビゲーションの文字をテキストにしましょう。フォントは、ヒラギノ、またはメイリオで作成してください。(他のフォントでもOKです。Webフォントにも挑戦してみてください)
デザインによっては画像になる場合もあるので、画像・テキスト両方でコーディングできるようにしておきましょう。
(2)jQueryプラグインはたくさん配布されているので、色々試してみましょう。

【仕事で行う場合の目標時間】
jQueryプラグインの設置で時間をとられますが、一度やり方をおぼえると楽なので、がんばってください!