みなさんこんにちは。久しぶりの投稿になりました。寺西です。
最近、WEB業界で働きたい。ページ制作で副業したい！という方をよく目にするので、今回は爆速でページ制作を習得するコツを自身の経験を元に紹介していこうと思います。
タイトルの通り、HTML、CSSを最短かつ爆速で覚える方法です。（多少のJSやPHPについても）
まず初めに、タイトルにあるTTP、これどういう意味か知ってますか？
徹底的にパクる。の略です。私も最近この言葉を知りました。パワーワードですよね。
なぜこれが大切かと言うと、コードは、googleで検索すれば98%答えは出てきます。
参考書なんかいらないです。今すぐメルカリで売ってください。私も参考書など持ってないし見たことありません。
詰まったらググる。詰まったらググる。で全て解決します。
ここでふざけんな！それができたら苦労しない！って思った方はまず、
ググり方をググってください。
ではTTPが大前提。それを頭に入れつつ早速、最短でページ制作するための最短ルートを順を
追って説明していきます。
１. ベースにするHTMLファイル、CSSファイルはTTP。
具体的に言うと、HTMLファイルに関してはheadタグとか、htmlタグとかbodyタグとか、あの辺は正直覚える必要もないです。
どのサイトもほぼ同じで、変わるのはタイトルやディスクリプションの中身だけですから・・
header main footerなどのタグも中身は空で置いておくと見やすいです。
html ファイル テンプレート
でググれば終わりです。
CSSに関しても一緒です。リセットCSSテンプレートを探してきてコピペもしくはダウンロードしてくれば終わりです！！
リセットCSS テンプレート
でググれば万事解決です。
2. HTMLは程々に覚えとけばいいよ。
HTMLの勉強にさく時間はせいぜい1日もあれば十分だと思います。
それぐらい覚えることも多くないのでさっと終わらせてCSSを覚えることに専念しましょう。
2-1. HTMLタグは最低限覚えればよし。 「h1~h5」「ul」「 li」「div」「p」「span」
htmlタグはたくさんありますけど、SEOに直接関係してくるのはtitleタグとh1〜h5の見出しタグと言われています。（どれが正解かは正式には発表されてなく、一般的に前述のタグをしっかり使うことを推薦されています。）
なので、上記のタグだけ覚えておけば正直事足ります。
納品時、SEO対策はできてますか？と聞かれたら、
『最低限の記述はしてます。重要なのは、コンテンツです。』
と答えましょう。
今回は最短でページ制作を覚えるのが目的なので、興味のある方は
html5 タグ 一覧
等でぐぐりましょう。
2-2. レスポンシブデザインを意識したコードを書く。
必ずPC用のデザインとSP（スマートフォン）用のデザインを頭に入れながら（デザインデータがあれば見比べながら）コードを書きましょう。場合によってはPCとSPでHTMLを若干書き分けたりする必要が出ることもあります。
2. CSS編 これだけ知ってればもう大丈夫
私の自論ですが、これから紹介することをマスターすれば、正直作れないものはほぼないと勝手に思ってます。
2-1. flexを制するものはページ作成を制す。
CSSの中では比較的新しい技術のflexプロパティ。floatなんて覚える必要ありません。（たまーーに使うことはあるかも）
よくある横並びのレイアウトなどはもちろん、要素内で縦方向だけ中央にしたいとき、上下左右中央にしたいときなど、全部flexでまかなえます。
一段目と二段目で左右逆に配置されたレイアウトなどもflexで簡単に作れます。
こちらのサイトでダウンロードできるチートシートをデスクトップの壁紙にするのをお勧めします。
2-2. 少し複雑なレイアウトは全部position。
前述のflexをつかっても『これは作れないんじゃないかなぁ・・』ってところはpositionで全て解決します。
絶対配置とか相対配置とか難しい言葉は覚えなくていいです。
absoluteするとrelativeしてる要素の左上に重なる。そこからtopやleftの値で場所を決める。それだけです。
.parent{
position: relative; /* 親要素に指定する。 */
}
.children{
position: absolute; /* relativeしてる一番近い親に絶対配置（レイアウトを無視してrelativeしてる一番近い親の左上に移動させる） */
top: 50px; /* topとleft（bottomとright）を指定して自由に配置する。 */
left: 50px;
}本気出せばページ内の全ての要素にposition: absolute;で位置を指定すればWEBサイトは完成します。
ただそれは効率が悪すぎるから誰もやらないだけです。
2-3. CSSはちゃんとあたってるのになにか思い通りに動かないなと感じたら。
ちゃんとCSSはあたってるはずなのに思い通りに動かないと思った時は、
とりあえずdisplay: block;してみる。
インラインブロック要素にはwidth、height、margin、paddingなどが効きません。初学者の方は大体これでつまずくのではないでしょうか。
3. JavascriptはひたすらTTP（徹底的にパクる）
htmlやCSSの勉強してる人からすると、Javascriptなどのフロントエンドの言語は難易度がグッと上がると感じると思います。
安心してください。
ググればほぼ解決します。
タブ切り替え js 作り方
みたいな感じで。
一般的なコーポレートサイトやLPを作る上でそこまで専門的な知識は正直必要ありません。（ていうかググってコピペした方が早い）
簡単なアニメーションなどを実装する時に避けては通れない道だと思いますが、必ずWEB上に答えが出てきます。
丸パクリしましょう。
特に、タブ切り替え、スムーススクロール 、スライダー、フェードインアニメーション、モーダルなどは非常によく使うのでいつでも使い回しできるように一度TTPしたら次回他の案件でも使い回しできるようにテンプレート化しておきましょう。
4. 問い合わせフォーム？ もちろんTTP（徹底的にパクる）
最後の難関にして最大の壁となるのが問い合わせフォームですよね。
PHPでメールを送信させる。という仕様の問い合わせフォームが一般的です。
こんなもの一から作れるように勉強を始めたらキリがないので丸パクリしましょう。（丸パクリしてるうちに多少覚えます。）
PHPはサーバーにあげないと動かないのでサーバーにアップするか、ローカルでサーバー環境を構築して検証しましょう。（厳密に言うとサーバーにPHPがインストールされてないと動きませんが大体のレンタルサーバなどではデフォルトで使えるはずです。）
フォームに使用してるhtmlのコードも1から作るのは初学者には時間がかかるのでこちらもTTPです。
こちらのサイトがわかりやすいですよ！
一度作ったら後は少し改変しての使い回しなので、2回目からは実装時間もグッと減ると思います。
パクってるうちに完成してませんか？
ここまでほとんどTTPです。でもこれで完成しちゃうんですよね。
今回は、最短で仕事がぎりぎり成り立つレベルのコーディングの方法を紹介しました。（私は知識0から大体こんな感じで案件こなしてました。）
こなしてくうちに、自分なりの制作方法が確立されていき、作業スピードもどんどん上がると思います。
より深く勉強したい方は時間があるときに、この間コピペしたこれってなんなんだろう？的な感じで勉強すれば良いのかなと思います。
特にJavascriptなんかはコードの意味もわからずコピペして動かしてたりすることも多いと思うので、意味がわかるともっと制作の幅も広がります。
もっと書くことあるんですが今回はこの辺りで。
それではまた。
コメント