プログラミング未経験初心者から魅力的なプロフィールサイトを「たったの1時間」で作ろう!パート2

こちらは、仮入部(無料登録)特典で使用している「全くのプログラミング未経験初心者」から魅力的なプロフィールサイトを「たったの1時間」で作れるようになるレッスンになります。

動画レッスンと合わせてご利用ください。詳しい解説は動画内でのみ行なっています。

作っていくもの

これから作っていくのは、こういった個人向けプロフィール用のホームページになります。

前回までのコード全て

前回までのコードがこちらになります。

これにさらにコードを書いていきましょう。

ABOUTを作ろう!

 

ボックスを見てみよう

解説動画の通り、ABOUTとMESSAGEはほぼ同じですね。プロフィール画像があるかどうかです。

また、フッターも単純ですね。

ABOUTエリアに表示するものを入れよう

それでは、早速ABOUTのエリア部分を作っていきましょう。

まずは、bodyタグ内にabout用のエリア(ボックス)を作りましょう。

空のボックスを作るにはdivタグでしたね。適当にclass名もつけてあげます。

その中にh2タグとpタグを使って「タイトル」と「文章」を入れていきます。

基本的にh1タグは「画面に1つだけしか使わない」と覚えておきましょう。

「大見出し(ページタイトル)」が今回は「My Portfolio Page」になるので、「ABOUT」や「MESSAGE」は「中見出し」というイメージになります。

この辺りは、「出版書籍」の考え方と全く一緒です。

中見出しのタグは「h2」のタグになるのでそれを使いましょう。

それぞれ入れたbodyタグ内のコードがこちらになります。

ちなみに文章を改行したい場合は「brタグ」を使わないと改行されないので注意しましょう。(コード上でいくら改行しても画面上では改行されません)

ブラウザリロードするとこういう状態ですね。

ABOUTエリアにスタイルをつけていこう

ここにスタイルをつけていきましょう。

まずは文字を中央にとりあえず寄せましょう。

「about_section」という大きなボックスに対してスタイルを指定すれば、その中にあるタイトルや文章に対してもスタイルが自動で適用されます。

スタイルの種類によって「そのタグだけにしか適用されないスタイル」「入れ子になったタグにまで適用されるスタイル」がありますが、1つ1つ覚えていくのは大変なので、このあたりは最初のうちは「スタイルが効かなければ、直接そのタグにスタイルをつけてみる」とやっていけば大丈夫です。

合わせて、フォントカラーも変えてしまいましょう。

また、文章も実は「真っ黒ではない文字色」が使われています。

こういう、「気づくか気づかないかの微妙な色の使い方」が「綺麗に見える」ポイントになりますが、そのあたりはデザインのお話になるのでデザイン部で解説をしていきます。

ABOUTもMESSAGEの文字色も黒ではないので、変更をしますが、それぞれのclass名の中でスタイルを指定してもいいですし、bodyタグに指定してしまって「ページ全体でその色」としても大丈夫です。

今回はbodyタグの方に指定をしてしまいましょう。

上記のcssの部分を下記にします。

「ページ全体で文字色を灰色にしているのに名前とかの文字色が白のままなのはなんで?」

と思うかもしれませんが、CSSは「書いた順番」で「上書き」されていくので、下記のようにbodyタグに指定した後に下の方「my_name」で上書きしているわけですね。

「でも、タイトルはbodyタグに指定したcssより上に書いてあるけど文字色が変わっていないのはなんで?」

と思うかもしれませんが、これも「CSSは詳細に指定したスタイルほど優先される」というものがあるからです。

bodyタグへのスタイルは「画面全体」という漠然とした指定の仕方ですが、「page_title」は「このタグに対して(bodyタグの中にあるh1タグ)」と詳細に指定してますよね。

そうすると詳細に指定されたスタイルの方が勝ちます。

実際にはもうちょっと細かな優先度の違いがありますが、今の時点でそこまで知っておく必要はないのであとは本入部後に見れる「HTML・CSS部入門」で学んでいきましょう。

ブラウザをリロードするとこんな表示になっているはずです。

今の段階でのコード全体はこうなっています。

marginで余白をつけよう!

このままだと文字と文字の間に余白がないですね。

なので、余白をつけましょう。

余白には「padding」と「margin」の2種類がありますが、とりあえずmarginだけ今回使いましょう。

marginはどのボックス(タグ)に指定するか色々やり方はありますが、今回は実際の現場でも使われているシンプルなやり方でやります。

「about_section」のエリア自体に上下のマージンを指定し、「タイトル」と「文章」にも余白がないので「タイトル」部分の下にマージンをとってあげましょう。

コードではこうなります。数値はもちろんお好みで適当でいいですが、デザイン上見栄えのいいpx数にしてあります。

さらに文章も「中央寄せ」でさらに「文字だけ左寄せ」になってますね。

これも、動画の解説通りにスタイルを指定しましょう。

これでリロードするとちゃんとデザインに近い形になっています。

ここまでの全体のコードはこちらです。

MESSAGEエリアを作ろう!

同じようにMESSAGEエリアも作りましょう。

あとは今まで学んだものを同じように使うだけです。

ほとんど「aboutエリアのスタイルをコピペ」ですね。

まずは、htmlタグで画面に表示させるものを作りましょう。

こちらのタグを入れればいいですね。

bodyタグ内全体ではこうなっています。

ブラウザリロードするとこんな状態になっています。

画像の右端に写っている「縦長のバー」はブラウザのスクロールバーが写っているだけなので気にしなくて大丈夫です。

MESSAGEエリアにスタイルをあてよう

あとはaboutエリアの時と同じようにスタイルを指定してレイアウトも組んでいきましょう。

messageエリア内のスタイルはこちらです。これをstyleタグ内の下にどんどん書いていきましょう。(ほとんどコピペしてclass名を変えるだけです)

「message_img」の画像に関しても、最初にやった下記「main_img」の画像のスタイルコードをコピーして「画像サイズ」を変え、「box-shadow」というものをつかって「影」をつけているだけです。

これでブラウザリロードすると画面はこんな感じになっています。

ここまでの全体のコードです。

フッターを作ろう!

あとはフッターを作ってあげましょう。

同じようにdivタグで空のボックスを作ってもいいんですが、フッターは専用の「footerタグ」というものが用意されているのでそれを使っておきましょう。

さらにCSSでスタイルを整えていきます。

今回、もう一つの「余白」として「padding」というものを使いました。

paddingは「内部余白」と呼ばれ、「ボックスの中に余白をつくる」ものになります。

これで文字の上下に余白が出来ましたね。

pタグ自体にそれぞれ上下のmarginを指定しても同じになりますが、paddingを紹介したかったので今回はそうしています。

実際、どちらを使っても構いません。

こうするとフッターが出来上がりましたね。

ボタンを作ろう!

ボタンを表示させよう

大分出来上がってきましたね。あとは「ボタン」を作りましょう。もう一息です。

今回ボタンを押したら「自分のTwitterアカウントのページに飛ぶ」ようにしたいと思います。

ボタンを作るには「buttonタグ」というものも用意されていますが、それだと「別のページへ移動できない」ので、別のページへ移動したいボタンを作りたいのなら「aタグ 」を使います。

この時に大事なのが

「ボタンはどこのエリア(ボックス)に表示されているものなのか?」

です。

完成デザインを見ると「メインキャッチ」と「ABOUT」のエリアのちょうど中間にありますね。

「ボタンを表示するためのaタグをどこのエリアに入れるか?」

ですが、どちらでも構わないんですが、今回は「メインキャッチ」の方に入れてしまいましょう。

基本は「表示したいエリアの中に表示したいもの(タグ)を入れる」ようにしましょう。

ボタンのaタグはこちらです。

href属性というところで「クリックした時に移動する先のURL」を入れておけば、そこに飛ぶことができます。

また、aタグで挟んである文字が実際にボタンとして表示される文字になります。

これを「top_section」の一番下に置きましょう。

最後に位置を調整してしまうので、タグの順序は気にしなくていいんですが、「常に表示されている順序通り」に置いておけば大丈夫です。

今の状態の画面ではこうなっています。

ボタンのスタイルを作っていこう

まだ文字だけで、ボタンにすらなっていませんね。

しかし、クリックしてみるとTwitterへ飛ぶのが確認できます。

あとは、この文字をCSSを使って「ボタン」のようなデザインにしていけば大丈夫です。

実はHPのボタンというのはほとんど皆、こういう風に作られてるんですね。

ボタンのCSSはこちらになります。

ポイントは

・widthプロパティでボタンの横幅を広げている

・paddingプロパティでボタンの内部の余白を広げている

・border-radiusプロパティでボタンの角を丸くしている

・box-shadowプロパティでボタンに影をつけている

・position、top、leftプロパティで位置を移動させている(レイアウトしている)

という部分になります。

影に関しては、これも配色と同じようにCSSを自動で作ってくれるサービスや参考サイトがいくつかあるので、そのコードをコピペして使いましょう。

例えば、ボタンならこちらのようなサイトがあります。

このサイトの場合「ボタンの色」と「影」の両方のスタイルを指定したコードになっているため、影だけをつけたいなら「box-shadow」プロパティの1行だけを抜き取って使いましょう。

CSSで実装するグローデザインのボタン

 

これでブラウザリロードしてみるとちゃんと綺麗なボタンが出来上がっていますね。

 

これでもうほぼ、完成です。

最後に残されたもの

あとは、

・このプロフィール自体の横幅を狭めて画面中央に常に来るようにする

・画面全体の背景を設定する

ということをするだけです。

ここまでの全体のコードはこちらです。大分長くなってきましたね。

もっとおしゃれにしよう!

動画解説の通り、まずはプロフィールのページ自体を移動させていきます。

プロフィールページの横幅を狭めて中央に寄せよう

そのために空のdivタグで全体を囲いましょう。そうするとbodyタグ内はこうなります。

ただ

で囲っただけです。

こうしたら、あとはスタイルを指定して横幅を狭めて移動させていきましょう。

CSSコードはこちらです。

こんな風にmarginで一括で余白を指定することもできます。

その場合は、1つ目の値が上下の余白、2つ目の値が左右の余白です。

これでリロードするとこんな感じになっているのが確認できます。

プロフィールページ自体を画面上からずらしていますが、タイトルやボタンなどは「画面左上からの位置」の指定をしているため、ちょっとずれてしまっていますね。

なので、ずれた分を調整しましょう。

ずれた位置を調整しよう

今回、画面上から50pxずらしているので、全てのtopプロパティの指定に50px足してあげれば大丈夫です。

例えばタイトル部分のtopは今こういう状態になっていますが、そこに「+ 50px」足したものを自分で計算してpxを指定するか、今までやったcalcを使いましょう。

もしくは

ですね。

解説動画ではcalcで計算しています。

ここまでの全てのコードはこちらです。

リロードするときちんと位置が直っていますね。

背景画像を入れよう!

あとは背景画像を入れましょう。

背景画像も「どこのボックスの背景に入れるのか」を見極める必要があります。

今回は「画面全体」ですよね。

その場合は、

bodyタグのボックスに背景画像を設定する

といいでしょう。

bodyタグは一番大きい画面全体のボックスになるため、そこに背景画像を入れてあげればよさそうです。

背景画像は「ただの画像」と違ってimgタグは使いません。

CSSで指定をします。

bodyタグを指定したCSSをまずみましょう。

そこに下の2行を入れてあげます。

background-imageはこういう風に画像を指定することで、そのタグのボックス内に背景画像を表示することができます。

画像のパスはimgタグと全く一緒の指定の仕方です。

ただし、そのままだと背景画像が画面より大きい場合には拡大されて表示されてしまうので、

背景画像をボックス(今回は画面全体のボックス)の幅に収めて表示する

ために

を指定してあげます。

これで、リロードすれば「完成」ですね。

お疲れ様でした。

どうでしたか?

こんな短時間でもHP(ホームページ)が作れちゃいましたね。

個人で趣味でHPを作る分にはこれで十分です。

実際にはさらに細かな使い方の部分や「仕事」としてやるのであれば更に「実務だけでしか使わない方法」が多くあるため、そういったものは本入部後のレッスンで学べますので検討してみてくださいね。