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

コンテンツ
デザイン・イラスト
最近ではWordPressやホームページビルダーなどで、ウェブページを作るのに難易度が下がってきています。

実は20年ほど前にウェブページ作成のレクチャーは受けたんですが、長年携わっていないと忘れてしまうもの。また、Flashがなくなるなど環境も変化しているので、昨年改めてウェブ作成にチャレンジすることにしました。

いつもIllustratorやPhotoshopなどのアプリを使っているので、Adobeのウェブ制作アプリ「Dreamweaver」を活用することにしまして、Adobeのサイトには動画でウェブの作り方を学ぶことができるので、それを見ながらメモをする…。そのノートも100ページを超えたかな。

244415017_3904502512982913_3052308863471578428_n.jpg

Adobeの推奨するやり方は「HTML」や「CSS」などといったコードを編集するというもの。ワード・エクセルなどのように、直接文字や図形を入力して直感的に作るのとは違い、コードを打ち込んではブラウザで開いて確認する。トライ&エラーの繰り返しでした…。

0002.jpg

というわけで、先日。

お客様から簡単なウェブページのお仕事をいただきまして、自分の魂に火がついてしまいました。

本格的に、自分のウェブページを作ってみようと。

HTML・CSSの編集からスタートしたわけですが、「margin」と「padding」の違いを改めて整理したり、CSSで飾りつけた文字や色やマージンが正確に表示されていなかったのを修正したり…。

やっぱり日常的にコーディングをしないと、なかなか覚えられないです。

ノートにまとめても、その内容を思い出せなかったり…。

というわけで、Dreamweaverとノートや教本と格闘しながら復習すること数日間…。

やっとできました。

0001.jpg

「フルスクリーン」とよばれ、ホームのページを一枚の画像の背景にしてみました(これさえ理解するのに、何時間もかかりました…)。

そして、よせばいいのに欲が出て、スマホでも見れるように「レスポンシブウェブサイト」化もしてみました。

左上のハンバーガーメニューも、参考サイトから作り方を見よう見まねで取り付けました。

0003.jpg

まさに悪戦苦闘しながらの作業でしたが、スラスラとコーディングしたりWordPressを使いこなせる方に…

「足を向けて寝られません」

それぐらい、大変な作業でした…。
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す