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

HTML CSS Webデザイン

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

今日から学習内容が「簡単なWebサイトの作成」に入ったので、その流れなどをまとめていきたいと思います。

 

★今日の内容

 

■フルスクリーンとは
フルスクリーンとは、画像や動画などのメインビジュアルを画面全体を使って表示させるレイアウトのこと。
印象的なデザインを作るをことができる。
フルスクリーンの部分をスクロールするとコンテンツが表示されるパターンもある。
ページを開いたときにはインパクトを与え、その下の部分からは詳しい情報を提供できる。
くわしい情報を掲載したいときはスクロールしたところに配置するとよい。


■フルスクリーンページの制作の流れ
実際にフルスクリーンページのWebページを作っていく。
〇作成するページ
まず、ホームページの作成。
おおきな画像を一面に配置したインパクトのあるページにする。
ロゴ、ナビゲーションメニュー、キャッチコピー、文章、ボタンのあるホームページ。

〇制作の流れ
01.「head」部分の記述

Webページの情報を記述する<head>タグから書いていく。

 

02.ロゴ、ナビゲーションメニューの作成

続いてページ上部に設置する、ロゴとナビゲーションメニューを作成。

 

03.コンテンツ部分の作成

ページの肝となるコンテンツ部分の作成。このページではキャッチコピー、文章、ボタンを用意。

 

04.ファビコンの設定

ページのタブに表示される「ファビコン」を作成。ファビコンはブラウザーのた部分に表示される小さなアイコンのこと。

 


■「head」の記述
〇ファイルの準備
フォルダーを新規作成し、フォルダー名を「WCB Cafe」とする。
その中に「index.html」という名前のHTMLファイルを新規作成する。

〇HTMLの骨組みを記述
HTMLファイルに必須となるタグから書いていく。

〇「meta」情報と「title」を記述
続いて<head>タグの中に、
文字コードの指定である<meta charset="utf-8">、
Webページのタイトルとなる<title>タグ、
そしてWebページの説明文を<meta name="description">で書き足す。

〇必要なCSSファイルを読み込む
各ブラウザーのデフォルトCSSはress.cssを使ってリセット。
見出しはGoogle Fontsを使って「Philosopher」というフォントを設定するので、Google Fonts用のCSSも読み込む。
その下にこれから指定していくstyle.cssを記述しておく。

 

 

 

以上です！