【ウェブカツ#7】ポーホリを作る際の注意点(振り返り)+メイン部分の補足

本日、ポーホリの雛形の9割近くが完成しました。
あとフッターを少しいじるだけですが、
恐らく1時間もかからずに終わると思います。

しかし…大したことないサイトの構成で二日かかるのだから、
いかに自分がHTMLやCSSを十分に理解できていないかと
嫌でも反省させられます、これは。

さすがに次はここまでかかることはないと思うので、
明日以降のHTMLをいじる場面では、反省を生かして
戻り作業や悩む時間を減らしていきます。

今回は、せっかく一通りポートフォリオを作り終えたので、
忘れないうちに、作る上での注意点をまとめておきます。

ポートフォリオを作るまでの流れ

目標とする対象と基準値を決める

ポートフォリオを作ろうとしている時点で、
恐らくあなたの目的は、どこかの会社に採用してもらい、
実務経験やスキル、給料や安定した立場が欲しいなどの
いずれかを満たしたいのではないかと思います。

もしあなたが、未経験から勉強をして就職するなら、
実際に同じ道を辿って余力を持って就職した人の
ポートフォリオが、ひとつの基準値になります。

逆に、スキルが低い人の
ポートフォリオの場合、基準値が違うので、
その水準を超えても、役に立つ保証がありません。

また、スキルが高すぎる人のポーホリを
目指す場合も、目標に対して過剰品質になる為、
無駄に長い時間、足踏みをする事になります。

なので、まずはTwitterやネットの検索で、
未経験で就職に成功した人を探し、
(できれば3~4ヶ月の短期で一気に突き抜けた人)
その人達のポートフォリオをピックアップしましょう。

実際にポートフォリオを作って差を知る

次に、実際にポートフォリオを作っていきます。

この時点では、完成させることを最優先しましょう。
ウェブカツやProgateを一通りやっている場合、
サイトを作るために必要な知識は必ずどこかにあります。

時間はかかるかもしれませんが、一つ一つのパーツを
作っていき、分からなければ講義をもう一度確認したり
参考にしているサイトのソースの組み方を分析し、
ひとつひとつ、表示を確認しながら進めてください。

また、他のサイトのソースをそのままコピペするのは
絶対にやめましょう。自分の血肉にはなりませんし、
現時点ではレベルが違うので、細かいコードの意味まで
完全に理解することは不可能です。

あくまでもパクるのは
構成などの考え方であり、全部自分の場合に置き換えて、
コードは自分のアタマで考えて、直接打ちましょう。

アホみたいに最初は時間がかかりますが、
習得する上では絶対に必要な苦しみです。
耐えて耐えて調べて調べて、完成させてください。

目標サイトとの差を洗い出す

完成すると、自分のダサい普通のサイトと
どこかの企業に認められた目標のサイトの間には
色々な差があるので、それを書き出します。

・jqueryで発生しているアニメーション
・配色の知識
・ヘッダーの部分がめちゃくちゃ豪華
・作成したWEBサービスの数
・勉強期間
・習得スキル
・githubの登録をしていない
・デザイン力の随所でのアピール
・見せるものと見せないものの区別

優先度と期限を決めて、差を淡々と埋め続ける

そしたら、その差分の項目に
優先順位をつけて、ひとつひとつ埋めていきます。

前回書いた通り、採用をしてもらうことが目的なら
WEBサービスを作って載せるのが最重要項目なので
それを真っ先に果たす必要があります。

しかし、あなたの目的は恐らく、WEBサービスの作成や
サイト作成自体では無いので、それは前提に置いた上で、
他の部分の差を埋めるなら、それも見越した上で
スピードを上げ、他のこともやる必要があります。

あなたが私のように30歳を既に超えている場合なら、尚更です。
20代の人と同じことをしていては確実に負けるので、
最低でも、同じ基準値は超えていかないといけない。

差を埋めていく上では、実際に完成品を作ろうとして
思うように作れない状態から試行錯誤して改善していくのが
結果的に一番勉強になるので、さっさと制作に入りましょう。

座学では一生成長しません。一周やれば十分です。
どうせ何もしていない段階で全部は分からないのだし。

明日はフッターの調整を軽く行った後、
一つ目のWEBサービスのひな形のHTMLを作ります。

WEBサービスは一つのサービスの中でも
15ページや20ページ分のHTMLを組むらしいので、
今のうちに箱になる部分を完成させておくだけでも
かなり負担は減るんじゃないかと思うのです。

ポーホリの技法がそのまま生きると思うので、
一度やったことがどれくらい役に立つのかも
感触を確かめながら、作っていきたいと思います。

補足:タグの本文にアンダーラインを引く方法

線を引くCSSの命令は
h2{ border-bottom: solid 太さ #色 ;}でいいのですが、
h2タグはブロック要素の為、アンダーラインを引こうとすると

こういう状態になる為、必ずdisplay: inline-block;を入れましょう。

うん、綺麗になった。
ちなみに、text-align: centerで中央に揃えないと、
ユニット全体が左端に行きます。

下線の位置はpadding−bottomで調整できます。
太さや全体のバランスも含めて検討しましょう。

補足:paddingをエリア全体に付ける為だけのdivを入れる

サイトの構成を色々なところで調査する中で、
paddingで余白を入れる為だけのdivが散見されます。

(Google Chromeの開発ツールで見れます)

理由は、こういうエリアの余白が無い場合、
コンテンツの文字がdivの端から端まで埋まってしまうため、
見た目がとてもダサくなってしまうからです。

しかし、例えばwidthを50% VS 50%に分割したdivに
直接paddingを入れてしまうと、余白の分だけ
外にはみ出してしまい、表示が乱れてしまいます。

その為、画面を大きく2分割3分割して
2カラム3カラムの構成にする場合は

「2カラムに分割するためのdiv
> paddingを入れる為のdiv
> 中に入れたいもの」

という構成をするのが一番、構成がし易くなると感じました。

ポーホリサイトを作る上で、色々なサイトを参考にしていますが、
調べれば調べるほど、paddingやmarginをどんな風に使っているのか、
本当に色々な工夫がされているのを感じます。

いきなりかっこいいサイトを作ろうとすると、どこかで挫折をするので、
まずは最低限の機能と見た目を備えた、入れ物としてのページを作り、

・アニメーションを付ける
・自分の仕事や技術に対する姿勢や思いを形にする
・スキルや自分自身を適切にアピールできる制作物・構成にする

といったことは、次の一ヶ月二ヶ月で、
現在進行形で学びながら、徐々に実装するのをお勧めします!