【続】ウェブページ制作珍道中…

先月にお客様にランディングページのお仕事を頂戴し、Webページ作成のスキルを落とさないように、仕事の合間を利用して演習しています。

そして、架空の整体院を想定して、基本的なウェブページを制作してみました。

少し縦に長い画像ですが、左がPC、右がスマホでのレイアウトです。

設定で、スマホとPCで表示切り替えができるようにしており、スマホではロゴ・文字揃えを中央、PCでは左揃えを基本としました。

▲HTMLソース

▲CSS

その他JavascriptやJQueryなどでブロック（要素）のアニメーション化をしていきますが、今回は基本的にHTMLとCSSの２つを利用して、直接構文を入力することで組み立ていきます。とはいえ、 > や } などの綴じカッコを忘れてしまったり、悪戦苦闘でしたが…。

必要な部分には、<!--◯◯-->や/*○○*/でメモしておけば後々の編集もわかりやすくなります。

ちなみに、スマホで開く「ハンバーガーメニュー」がありますが、本来ならJavascript・JQueryで機能させるやり方が一般的ですが、いろいろなサイトを見ていて簡単な作り方を見つけたので、今回はそれにしたがってハンバーガーメニューを加えました。

▲paddingとmarginの関係も、ブロックを色付けすることで理解できました。ブロックの内部の余白がpadding、外部がmarginでした。

▲表組みも、画像化して載せようかと考えましたが、きちんとHTMLとCSSで組み立て。

これもいろいろなサイトをまわって「表組みジェネレーター」を発見。その力を借りてHTMLを加えました。

というわけで、少しずつウェブ制作の発見を見出しながら、日々勉強しております。

今回はコーディングから構築しましたが、Javascript・JQueryも活用し、どんどん応用力を身につけていきたいと思っています。