【今日学んだこと】HTML CSS Webデザイン

HTML CSS Webデザイン

今日はWebデザインの勉強をしました。

今日内容をまとめていきたいと思います。

 

★今日の内容

■タイル型レイアウトのカスタマイズ例

〇サイズが違う要素を配置する
「同じ大きさで配置していた要素の中で、特に目立たせたい」という部分のみ大きく表示してみる。
◆HTMLにクラスを追加
HTMLに大きく表示したい要素へ新しく「big-box」というクラスを追加。
この例では最初のメニューを大きく表示する。
◆大きいサイズのグリッドアイテムを指定
グリッドアイテムの範囲を指定する。
縦・横に並ぶグリッドラインをベースに範囲を指定する。
使用するプロパティは横の範囲を「grid-column」、縦の範囲を「grid-row」で指定する。
今回は横の範囲をグリッドラインの1～3番目を指定するので、「始まりのライン / 終わりのライン」というようにスラッシュで区切って「grid-column: 1 / 3;」と記述する。
同様に縦のラインも1～3番目を指定するので、「grid-row: 1 / 3;」と記述する。

 

〇画像の高さを揃える
大きい画像と小さい画像の高さがそろっていないので、画像に対してサイズを指定する。

 

〇画像をトリミングする
前のcssの指定ではimgに無理やりサイズを加えたため、画像が少し歪んでしまった。
これは、もとの画像が指定したサイズより横長だから起こる現象。
これを調整するために、指定したサイズからはみ出した部分を自動的にトリミングしてくれるobject-fitプロパティを使うと便利。

〇レスポンシブに対応させる
スマートフォンサイズで見ると、メニュー同士がちぐはぐな大きさで並べられている。
指定した「grid-column」や「grid-row」の値を「auto」にして解消し、画像の高さも「100%」を指定して元に戻す。
スマートフォンサイズではメディアクエリーを使って指定した範囲やサイズを元に戻す。

 

 

■お問い合わせページの制作の流れ
「CONTACT」ページではフォームの装飾のほか、Googleマップや各種SNSのプラグインを表示。

 

〇作成するページ
ページ上部では大きな背景画像とともにお問い合わせフォームを表示させる。
真ん中にはお店の情報と地図、そして下部にはSNSや動画を横並びにする。

 

〇制作の流れ

01.フォームの設置
<form>タグを使って基本的なフォームの部品を表示し、CSSで装飾する。

02.地図を表示する
お店の情報の横にGoogleマップを設置する。
スマートフォンでは情報と地図を縦に並べて見やすくする。
Googleマップや各種SNSを掲載するには、それぞれのコードを生成してHTMLファイルに書く。

03.Facebookプラグインを挿入
FacebookのタイムラインをWebサイト上に表示するため、コードを生成してHTMLファイルに記述する。

04.Twitterプラグインを挿入
Twitterのタイムラインを表示させるよう、コードを生成して設置する。

05.Youtube動画を挿入
Youtube動画を1つ、Webページ上に表示させる。

06.レスポンシブに対応させる
メディアクエリーを使って横並びににている地図やSNSプラグインを縦に並べる。

 


■フォームを設置する
「CONTACT」ページ上部では、大きな背景画像の上にお問い合わせ用のフォームを設置する。

 

〇ファイルの準備をする
「menu.html」を複製し、複製したファイル名は「contact.html」という名前で保存。

 

〇HTMLを編集する
共通部分は残し、必要な個所は編集していく。
◆「head」内の「title」を編集
お問い合わせページ用のタイトルに変更。
◆不要なコンテンツでを削除する
「MENU」ページのコンテンツであるページ上部の紹介文の部分と、メニューの一覧はこのページで不要なので削除。
◆ID名を変更
「menu」とつけていたIDを「contact」に変更。
◆見出し部分を追加
「header」の下にお問い合わせフォームを追加。
<form>タグの中に入力欄を<input>タグと<textarea>タグで記述し、id属性をつける。
それぞれのラベルは<label>タグで囲み、for属性をつける。
このfor属性とid属性の値を同じものにして関連付ける。

 

〇CSSで装飾する
◆背景画像を表示する
まずはフォームの後ろに表示する背景画像を設置する。
◆フォームを装飾する
続いてフォームの各パーツを装飾する。
文字の大きさ、余白のほか、フォームの部品の背景色などを指定する。
<input>タグの各属性は各括弧「[]」で囲んで指定できる。
モバイル版では余白と入力フォームの幅を調整。

 

〇コンタクトフォームサービスを利用する
実際にメールの受信をするにはPHPなどのプログラミング言語を使う必要がある。
つまりHTMLとCSSだけでは見た目の作成のみ可能ということ。
簡単にお問い合わせフォームが作成できるサービスもある。

 

 

 

以上です！