読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

企業系サイト:トップページ

定義

  • 授業内5時間で画像制作からコーディングまで
  • 全体は、#conatiner幅「980px」
  • ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する
  • 横幅「140px」ピクセルのナビゲーションボタンを7個作成
  • 高さは「50px」
  • 「トップページ TOPPAGE」「ソリューション SOLUTION」「実績紹介 ACHIEVEMENT」「パートナー PARTNERS」「カスタマー CUSTOMERS」「会社概要 COMPANY」「お問い合わせ CONTACT」
  • キャッチコピー「あなたにとって 最高のパートナー であるために。」
  • 色彩計画「基調色、強調色、アソートカラー」の3色は、事前に決定する
  • 大見出し、中見出しは画像にする
  • ページ遷移のための「矢印アイコン」は作成する
  • フッター部にもグローバルナビと同様のテキストリンクを作成する
  • テキストリンクは、すべて擬似クラスを設定する
  • 提出フォルダー名「biz_name」を「biz_name.zip」へ圧縮



  • 見出し、ナビボタン、ロゴなどはオリジナルに変更可
  • ナビボタン以外は、以下の画像を利用可








サンプルスタイルシートカンパニー

    トップページ
    ソリューション
    実績紹介
    パートナー
    カスタマー
    会社概要
    お問い合わせ

あなたにとっての最高のパートナーであるために
弊社について
スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。

サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。

ソリューションへ
ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。

100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。

実績紹介へ
ニュースリリース

2015年10月10日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2015年10月10日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2015年10月10日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2015年10月10日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。
2015年10月10日
サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。

Copyright © Sample Stylesheet Company All Rights Reserved.
フレーム指定
  • id名は、レイアウト
  • class名は、記事のまとまり
  • ビルボード画像は、h2の背景で読み込むため、h2も含めた#contentを設定しました
<body>
<div id="container">

<div id="header">

<ul id="nav">

</ul>
</div><!-- /#header -->

<div id="content">

<div id="wrapper">

<div id="about">

<div class="section">

</div><!-- /.section -->
<div class="section">

</div><!-- /.section -->
</div><!-- /#about -->

<div id="sidebar">
<div id="news">

</div><!-- /#news -->
</div><!-- /#sidebar -->

</div><!-- /#wrapper -->

</div><!-- /#content -->

</div><!-- /#cotainer -->

<div id="footer">

</div><!-- /#footer -->

</body>

ボタンを作る

  • 横幅800pxピクセルのナビゲーションボタンを作成するので、幅960pxを設定


ピクセルプレビュー


長方形を描画




CS6・CCの場合

  • 線の位置を内側にする(書き出しが、800pxからずれない)


グラデーションを適用



文字を入力

  • プロポーショナルメトリクスにチェックをし、文字を詰める


  • 文字を160pxの長方形の中央に中央揃えで配置する
  • 160pxずつ移動コピーを作る


  • このコピーの文字の部分のみを、800px位置にそろえて配置する


  • 文字を打ち変える


  • 左端に重ねて1pxの線を描き、160pxずつ移動コピーする


a:hover用の画像を作る
  • 間を10px空けるため、70px移動コピー


  • 長方形を上に描き、それぞれ色を変更する


Web用に保存

アートサイズでクリップのチェックを外す
  • アートボードに必要なものだけある場合
  • グラデーションが含まれるので、JPEGで保存


Photoshopで確認する
  • 幅800px、高さ130pxであれば完成