【Webサイト講座】一度でいい、手作業でhtmlとcssを目に見える形で追えばわかる。ゼロからWebサイトを作ろう。

開発環境の準備

Visual Studio Codeというエディタソフトを使って開発を行います。

ソフトインストール、ライブサーバーの設定、ファイルの準備を行います。

Webサイトの大枠を作る

開発環境の準備ができたら、エディタを開きます。

多くのWebサイトは、ヘッダー、メイン、フッターで構成され、

ヘッダーにはメニュー、メインは主内容、フッターは著作権などが配置されます。

今回も、ヘッダー、メイン、フッターの大枠を作ります。

h1タイトルを作る

htmlの中では、h1からh6くらいまで、タイトルタグがありますが、

h1タイトルタグが、そのページの最も重要なタイトルになります。

そのh1タイトルを作ります。

article要素を作る

html中で、ページの概要などを書く場合はarticle要素を使います。

そのarticleタグの作成、要素の背景・境界線、

文字列の間隔、色付けを行います。

section要素を作る

html中で、一般的な文章の塊はsection要素を使います。

そのsecitonタグの作成、要素の背景・境界線、

文字列の間隔、色付けを行います。

画像(写真)を入れる

Webサイトで、画像(写真)は必須ですね。

画像の挿入方法、キャプション、余白、大きさの調整を学びます。

header(ヘッダー)を作る

Webサイトの上部をヘッダーと言います。

大抵はメニューやロゴがありますが、まずは、その要素を作ります。

headerにロゴを作る

Webサイトには、サイトを象徴するロゴがありますね。

通常はheaderの中に入れます。今回もheaderの中に入れて、

フォントもフリーのかっこいいものを選びましょう。

headerにメニューボタンを作る

Webサイトには、メニューボタンがありますね。

フリーで見栄えのするメニューボタンを作ります。

headerにハンバーガーを作る

Webサイト、特にスマホサイトで、ハンバーガーのようなメニューボタンがありますね。

スマホサイトでは必須の機能です。作ってみましょう。

footer(フッター)を作る

Webサイトの下部をフッターと言います。

大抵はコピーライトや[次のページへ]などがあります。

ここでも作ってみます。

レスポンシブ対応

WebサイトはPCで見る場合もあるし、スマホで見る場合もある。

つまり、画面の大きさが違いますね。

cssなどで、その画面の大きさに適切に対応することをレスポンシブ対応と言います。

ここでも作ってみます。

文法チェック

出来上がったhtmlとcssに対して、ネットのフリーツールを使って、文法チェックを行います。

この文法チェックが通らないと、SEO的にもよくないですし、

表示や動作の不具合にもつながります。必ずチェックしましょう。