コーディング模写は役立つのか!?

Webサイトのコーディング模写。結構ハードル高い？

オンライン学習や教本でしっかり学んだつもりの私は、いわゆるWebサイトのコーディング模写にトライしてみることにしました。

しかし、いざ始めて見ると見本通りに再現することができませんでした。

その原因は、明らかに学習不足です。html、body、header、foooterまでが限界で、ゼロからタグを記述することができません、でした。

ここで考えを切り替えて、コーディングの模写はひとまず保留にしておくことにしました。

私が思いついた対策は2つあり、早速実践してみることにしました。

１つめはhtmlのタグに慣れるために、WordPressをひたすら操作してみることにしました。

WordPressで記事を作成する際、現在はGutenberg（グーテンベルク）というエディタがデフォルト設定されていますが、私はClassic Editor（クラシックエディタ）を使いました。

Classic Editorビジュアルエディタとテキストエディタのどちらからでも更新が可能です。

この機能を使って、最初はビジュアルエディタを、なれてきたらテキストエディタで記事を作成してみました。

実際にはhtmlのコードを学習することはもちろん、WordPressの扱い方を覚えるいい機会になりました。

このあたりから、WordPressをカスタマイズできるようになりたいという目標が見えてきたのも事実です。

WordPressではhtmlにだいぶ慣れてきたので、次の課題はcss。

そのままcssもWordPressで学んでみようとしたのですが、調べていくうちに私のスキルでは無理と判断して、別の方法を模索してみました。

そこで私が選んだのは、bootstrapの無料テンプレート。webサイトに必要なパーツがフレームワークとしてまとめられているので、cssに関してもゼロから記述しなくてもいい点に着目しました。

無料で配布されているテンプレートを探してみるとその大半が英語版。そこで、このテンプレートを日本語版にカスタマイズしていけば、cssの学習になるのではないかと考えたわけです。

英語でデザインされているため、フォントまわり、文字のスタイルをうまくアレンジしないと、英語ベースでつくられたサイトを日本語に置き換えただけのサイトになってしまいます。

デザイン、レイアウトの学習という点でも、勉強になる題材です。

実際には「clean-blog」という下記テンプレートをベースに、カスタマイズをかけてみました。

具体的にはナビ周り、レスポンシブまわりはテンプレートを流用して、コンテンツ領域にパーツを組み替えてカスタマイズしてみました。

例えば、PCでは3カラム、SPでは1カラムのflexbox、キービジュアルにはスライダーを設置してみました。

その時学習したことは、カスタマイズをかけてテンプレートをブログとして活用し、学習成果を記事に残しています。

今見るとかなり恥ずかしいですが、振り返ってみると当時はどのぐらいのスキル、レベルだったが一目瞭然です。

出来上がったページは、github pages でアップロードし動作を確認しました。

webサイトを公開するには、独自ドメイン、レンタルサーバー等が通常必要となりますが、github pagesを利用すれば無料でwebページを公開することが可能です。

とにかくwebサイトをつくってみたいと思ったら、自分のブログをWordPressで作成してみるのがおすすめ。サイトの運営、初歩的なhtmlタグの習得に役立ちます
CSS に自信がないなら、bootstrapの無料テンプレートをカスタマイズしてみよう。文字まわり、レイアウト調整などの習得に役立ちます。
github pagesを利用すれば、無料でwebページが公開できます。独自ドメイン、レンタルサーバーは不要　練習用に作成したページの確認用としても使えます。