メインビジュアル画像制作演習
メインカラー：#2169df
メインビジュアル制作
PhotoShopの「グラデーションツール」と「レイヤーマスク」を使用してサンプルのようなメインビジュアルを制作してみましょう。
素材画像
幅：960px 高さ：250px
バリエーション素材画像
コーディング演習
作成したメインビジュアルを使用してサイトを制作してみましょう。
使用テキスト
Sample Stylesheet Company
Home
Work
Information
Access
Mail
メインビジュアル画像
弊社について
画像１
サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。
ソリューションへ
画像２
100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。
実績紹介へ
Copyright © Sample Stylesheet Company All Rights Reserved.
トップページソリューション実績紹介パートナーカスタマー会社概要お問い合わせ指定校
使用画像
幅：300px 高さ：300px にトリミングして使用すること
1月14日授業内容
HTML
CSS
色の意味と色が与えるイメージの基本知識
サイトを見た際に全体のベースを占める色（ベースカラー）で大よそのイメージを伝える事ができます。
色は人の心理的な部分で訴える部分が大きいので基本の考え方を知っておくと、色を使用してコントロールすることが可能です
1月14日 サイト改善要求
- ビジネスサイト寄り過ぎるので、もう少し個人ユーザー向けに全体のサイトカラーを変更してほしい
- メインビジュアル画像の変更（テキストは多少の変更は可）
- コンテンツ内の画像も変更。テキスト内容に沿った画像にする事
- ターゲットを変更して案として２点提出する事
- サイトにアップロードする際のフォルダ名はbusiness_personal01、business_personal02
課題ベースサイトはここからダウンロード
SP指定校
メディアクエリは768pxで設定
CSS-SP対応-
/*sp対応*/
@media (max-width:768px){
.header h1{
width: 300px;
font-size: 16px;
margin: auto;
}
/*nav
----------------------------------*/
.g-nav ul{
display: block;
}
.g-nav ul li{
width: 100%;
border-left:0;
border-bottom:1px solid #046EAB;
line-height: 50px;
}
.g-nav li a{
display: block;
}
.g-nav li:nth-child(1){
border-top:1px solid #046EAB;
}
.g-nav li:hover a{
border-bottom: 0;
color:#fff;
background-color: #C8E5FC;
}
/*main
------------------------------*/
.main{
margin-bottom: 50px;
}
.main .contents img{
display: block;
float:none;
margin: 0 auto 16px;
}
.main .item-02 img{
display: block;
float:none;
margin: 0 auto 16px;
}
.main .contents p{
margin-bottom: 16px;
}
/*footer
----------------------------*/
.footer .copy{
font-size: 14px;
line-height: 1.6;
text-align: center;
}
.footer a{
display: block;
margin-right: 0;
margin-bottom: 20px;
}
}/*media end*/
