実際に制作するページ
上のようなWebページを作ってみます。
画像をクリックすると、実際に作るページを確認することが出来ます。
シンプルなページなので、そんなに難しくありません。
それではやってみましょう!!
今回は実際にシンプルなWebページを作ってみましょう。
最初から最後まで一通り制作して、作り方の流れを学ぶことが出来ます。
そんなに難しいことはしません。制作時間はおよそ30分ほどです。
上のようなWebページを作ってみます。
画像をクリックすると、実際に作るページを確認することが出来ます。
シンプルなページなので、そんなに難しくありません。
それではやってみましょう!!
それでは実際に作ってみましょう。
テキストエディターを起動して入力出来る状態まで準備してください。
まずは、HTMLファイルとCSSファイルを作るとこからいきます。
HTMLの設定を行います。
「html」タグや「head」タグの中に、設定を書いていきます。
「html」タグにlang属性を付けて、日本語のページであることを宣言します。
ページを表示する時の、文字コードを「meta」タグを使って設定します。
一番文字化けが少ないと言われている「UTF-8」を指定します。
Webページの表示の仕方を設定します。
パソコンやスマホなどの画面(ブラウザ)の大きさに合わせて表示するように指定します。
これを設定することで、簡単なスマホ対応が出来ます。
別で作ったCSSファイル「basic-layout.css」をHTMLの中で読み込みます。
この時CSSファイルはHTMLファイルと同じところに作成していることを確認して下さい。
このWebページの全体のタイトルを設定します。
ブラウザのタブや検索結果に表示されるため、とても重要な部分です。
上記の画像の場合では「ここがタイトルだよ」がタイトルとして表示されます。
今回は「BASIC DESIGN」をタイトルにします。
CSSの設定を行います。
CSSのファイルの中に、文字コードの設定をして終了です。
CSSファイルの中でも、HTMLと同じように「UTF-8」を指定します。
これで保存して完了です。
もし文字化けする時は、保存する時にテキストエディターの文字コードを違うのかも知れません。
テキストエディター側でも「UTF-8」になっているか確認してください。
Webページ全体の構造を作ります。
今回は「header」「main」「footer」の3つの構造を作ります。
画面の一番上にくる一番最初に表示される部分です。
Webページの最初の印象になる、とても大切な部分になります。
綺麗な画像やイラスト、インパクトのある見出しを入れるなど、いろんな使い方が出来ます。
Webページのメインになる記事が入ります。
画像や動画などを含めながら記事を書いていくと見やすくてわかりやすい記事になります。
ページの一番下にくる部分です。
ほとんどのサイトがコピーライトやロゴなど、著作権や権利を明記しています。
これで基本的な構造は完成です。
ここからページ全体を作っていきます。
まずはヘッダーから作っていきましょう。
ヘッダー全体のデザインをします。
背景の色をカラーコードを使って紺色に変更します。
「background」プロパティの値を「#2a5c84」に指定します。
文字の色を白に変更します。
背景を紺色にしたので、「color」プロパティの値を「white」に指定します。
文字を中央にくるように寄せます。
「text-align」プロパティの値を「center」に指定します。
ヘッダークラスの内側に余白を作ります。
上下の方向に「100px」左右の方向に「5px」の余白を作ります。
要素の内側に上下左右の余白を作ったのは2つの理由があります。
上下の方向にそれぞれ「100px」の余白を作りました。
これはヘッダー内にある文字が上下方向に中央に来るようにしています。
正確には上下の余白を作ることで、中央寄せしてるように見せています。
左右の方向にもそれぞれ「5px」の余白を作りました。
スマホなどの小さい画面では文字が画面端に寄ってしまうため、読みづらくなってしまいます。
そこで、左右の方向にも余白を作って画面端から離れるようにしています。
ヘッダーの中にあるリンクをデザインします。
文字の色を白に変更します。
アンカーリンクの「a」タグは、初期値で青色が設定されています。
背景の紺色と色が被ってしまうので、白に上書きしています。
リンクの周りを白の線で枠を作ります。
リンクであることをわかりやすくする目的で目立つようにします。
枠線の角を丸めて柔らかい印象にします。
それぞれの角から「10px」の大きさで丸くします。
リンクの内側に余白を作ります。
上下の方向に「5px」の余白、左右の方向に「10px」の余白を作ります。
先ほど作成した枠線と中の文字が被らないようにしています。
リンクの外側に余白を作ります。
リンク要素の左右の方向に「3px」の余白を作ります。
リンク要素の前後の文字との間隔を調整しています。
リンクにマウスカーソルを乗せた時にアニメーションします。
見た目が変化することで、クリックが出来ることを知らせます。
「transition」プロパティでマウスを乗せた時のホバーアニメーションを設定します。
リンクにマウスカーソルを乗せた時の動作を設定します。
今回は背景の色と文字の色を変更します。
「transition」プロパティが設定されているので、アニメーションしながら色が切り替わります。
Webページ全体をデザインを決めます。
「body」タグをCSSで変更します。
文字サイズを「18px」に変更します。
Webページ全体の文字サイズが「18px」になります。
「body」タグの外側の余白を「0」にして、外側の余白を消します。
「body」には最初から上下左右に余白が設定されています。
もしそのままにすると...
上下左右に余白が入ってしまい、デザイン的に良くありません。
なので、この白いスペースを消すために「margin」の値を「0」にしてスペースを埋めて消す必要があります。
これでヘッダーの作成は終了です。
次はメインの記事を作成していきます。
今回は画像を使用するので、好きな画像を用意して下さい。
メイン全体のデザインをします。
背景の色をカラーコードを使って水色に変更します。
「background」プロパティの値を「#2da9af」に指定します。
メインクラスの内側に余白を作ります。
要素の内側の上に「10px」下に「40px」の余白を作り、左右は余白なしにします。
メインクラスの中にある「h2」タグの見出しをデザインします。
文字の色を白にします。
背景を水色にしたので、「color」プロパティの値を「white」に指定します。
文字を中央にくるように寄せます。
「text-align」プロパティの値を「center」に指定します。
見出しの外側に余白を作ります。
上下の方向に「40px」の余白を作ります。
メインクラスの中にある3枚の画像の大きさの指定します。
3枚の画像は「basic-layout.html」と同じ階層に「image」フォルダを作成してその中に保存しています。
画像の大きさを、親要素の最大まで広げます。
「width」プロパティの値を「100%」に指定します。
画像の大きさを「100%」にすることで、画面からはみ出るのを防ぐためでもあります。
どんな記事が書かれているのか一目でわかるように、目次を作成してデザインします。
「background」プロパティの値を「white」にして、背景を白に変更します。
目次の横幅の大きさを固定で指定します。
「width」プロパティの値を「250px」に指定します。
目次の内側に余白を作ります。
上下左右に「10px」の余白を作ります。
目次の外側に余白を作ります。
目次の上下の方向に「30px」の余白、左右の方向に「auto」にして余白を作ります。
左右の余白を「
目次の角を丸めて、柔らかい印象にします。
「border-radius」プロパティの値を「10px」にして角を丸めます。
目次の見出しをデザインします。
文字を中央にくるように寄せます。
「text-align」プロパティの値を「center」に指定します。
見出しの外側の余白をなくします。
「h3」タグには初期値で外側の余白が設定されています。
「margin」プロパティの値を「0」にして余白を消します。
目次のリストをデザインします。
目次のリストをクリックするとスクロールが出来るリストを作成します。
「ul」タグの外側の余白を小さくします。
初期値の余白は少し大きすぎるので、上下の方向の余白を「10px」に変更します。
リストにマウスカーソルを乗せた時のアニメーションを設定します。
「transition」プロパティを使って、変化対象を「all」変化時間を「0.5秒」に設定します。
リストにマウスカーソルを乗せた時に、文字の色をオレンジ色に変えます。
記事のレイアウトやデザインを設定します。
背景の色を白に変更します。
「background」プロパティの値を「white」に指定します。
記事の横幅の大きさを指定します。
「width」プロパティの値を「80%」に指定して、レスポンシブデザインにします。
記事の内側に余白を作ります。
要素の内側に上下左右「10px」の余白を作ります。
記事の大きさを「80%」に設定したので、記事を中央に設置します。
「margin」プロパティの値を「auto」にして、中央寄せします。
目次の角を丸めて、柔らかい印象にします。
「border-radius」プロパティの値を「10px」にして角を丸めます。
記事のコメントをデザインします。
コメントの左側に「5px」の余白を作ります。
「padding-left」プロパティで左側だけ余白を作ります。
あとで左側に太い線を引くので、線から離すために余白を作っています。
コメントの左側に太い線を作ります。
「border-left」プロパティで左側だけ「10px」の水色の線を作ります。
記事の中で重要なポイントを色を変えて目立たせます。
記事の中で重要なポイントをオレンジレッドに変更します。
さらに「b」タグで太文字にします。
番号付きのリストの外側の間隔を初期値より小さくします。
リストの上下の方向の余白を「10px」に変更します。
初期値の余白は少し大きすぎるので、小さくしています。
記事との間に3つの白いを縦に並べて、視覚的に区切ります。
3つの白いを囲む、親要素全体の大きさを設定します。
横幅の大きさを「20px」の大きさに指定します。
「20px」の大きさの要素を中央に配置します。
上下の方向に「40px」の余白、左右の方向は「auto」に指定して要素を中央寄せします。
3つの白いを作成します。
「circle」クラスの中にある「div」タグを使って白い円を作成します。
円の横幅を、「circle」クラスと同じ「20px」の大きさを指定します。
円の高さを「20px」に指定して、正方形を作ります。
背景の色を白に変更します。
「background」プロパティの値を「white」にして、白い正方形を作ります。
作成した白い正方形の角を丸めて円にします。
「border-radius」プロパティの値を「100%」に指定して、完全な円にします。
作成した白いの間隔を空けます。
白いの下に、「margin-bottom」プロパティを使って「10px」の余白を作ります。
これでメインの記事の作成は終了です。
最後にフッターを作成して完成させましょう。
フッターのデザインをします。
背景の色を明るい赤に変更します。
「background」プロパティの値を「#f76560」にして、白い正方形を作ります。
文字の色を白に変更します。
背景を明るい赤にしたので、「color」プロパティの値を「white」に指定します。
文字を中央にくるように寄せます。
「text-align」プロパティの値を「center」に指定します。
フッターの内側に余白を作ります。
上下の方向に「10px」の余白を作ります。
フッターの中に、コピーライトを作成します。
コピーライトとは、一番下の「© 2019 BASIC DESIGN」の部分です。
これはこのサイトで作成された記事や画像、動画などすべてのコンテンツに著作権がありますとわかりやすく明記するためによく書かれます。
このマークは「Copyright」の最初の頭文字「C」を取ったマークです。
このマークはキーボードで「©」と入力すると簡単に表示出来ます。
ここには公開した年を書きます。本サイトは2019年に公開したので「2019」と書きます。
ここはなんでもいいのですが、会社でサイトを公開するのなら「会社名」、個人で公開するなら「ご自身の名前」など著作権を持つ会社・名前を書くといいと思います。
実際は、コピーライトを記述しなくても自動的に著作権は発生します。
正直あっても無くても変わりません。
昔からの習慣・風習のような理由で明記してるサイトがほとんどなので、そんな細かく考えることはしなくて大丈夫です。
これでWebページは完成です。
最後におまじないを書いてスクロールアニメーションを追加しちゃいましょう。
目次のリンクをクリックした時に、その記事のところまでなめらかにスクロールすること。
スクロールアニメーションをすることで、下の記事まで移動したことがわかるので、利用者が使いやすくなります。
おそらくHTMLタグにCSSスタイルを適用することはあまりないと思います。
このなめらかにスクロースしてくれるCSSプロパティはHTMLタグに適用させないと動作しません。
このように、使える環境が2020年1月現在で限られています。
対応していないブラウザは自動スクロールしなくなるだけなので、今後対応することも考えてCSSを書いておくと良いと思います。
ブラウザの対応についてはCan I use...で調べることが出来ます。
以上でWeb制作基本編は終了です。
お疲れ様でした!!!
このように基本的なテクニックだけでWebページは作れます。
そんなに難しくないですよね!!
すべてのHTMLとCSSのコードが下にあります。
このように作成出来ていれば正解です。
確認程度によかったら確認してみて下さい。
ヒツジのサイトを使ってくれてありがとうございます。
よかったらTwitterでシェアしてくれると嬉しいです!! Tweet