Web制作の世界では、サイト設計が綺麗。WebデザインやUI/UX系の本でもよく取り上げられている、良質サイトです。SEOの構造マークアップとしても、UI/UXの観点からも非常に美しく、かつユーザーフレンドリーを随所に感じされるサイトだと実感しながら模写をしました。
こちらは、Bootstrapのフレームワークを使って、コーディングしました。
このページの模写をして学べたことは、コーディングによる完璧なSEO対策です。
これにより、オリジナルのWordPress制作を行う際に、SEO対策を万全に施したコーディングを行うことが出来るようになりました。
「病院からのお知らせ」などPCの画面にてタブの構造で表示されている部分は、レスポンシブで画面幅が小さくなると、メニューの開閉が下へ伸びる形になる部分は、一つのHTML構造をレスポンシブにより使い分けることで、無駄なコードを作成せずに作りました。
動きのある部分で多くの学びがあった部分は、サイトの文字の拡大・縮小と、背景色の変更の部分です。
これらはjQueryで実装しました。
閲覧には、以下の呪文が必要です。
User ID: eabiimosya1
パスワード: eabiimosya1