Webデザインという勉強 part2

出来れば毎日投稿する…と言ったきり、2週間以上経ってしまった。

言い訳をしたらアレもコレもあるのだが、そんなことはもういいだろう。

何もしていなかった訳ではない。
別のサイトの制作は少しずつ進めてはいたのだが、今回、このさにぃのWebサイトを進めるにあたって、またすぐ壁にぶち当たっていたのだ。

元々、少しずつ進めようとしていたのだが、まず、トップページの背景。
(春バージョン)

これは1週間以上前にすぐに変えていた。

そこから、それだけでは物足りないかな。
と、リンクを貼り、1ページ増やしてみよう。と、プロフィールページを作ってみたのだ。

そして、それをいざWeb上にアップロードし直してみると、

エラー！！！！！！

もしくは、またまたトップページのCCSが効かない。
もしくは、2ページ目が反映しない。
もしくは、2ページ目のCCSが反映しない。
などなど。

たった1ページでも自分のWebサイトがアップロード出来ただけでも喜ばしかったのに、今回アップロードし直したことによって、崩れてしまったのだ。

非常に悲しい。

昨夜、夜遅くまでお風呂も入らずに(笑)あれやこれやとやっていたが、解決しなかったのだ。

今日になって、また時間が出来た時からああでもないこうでもない…とやって、やっと解決！

晴れて公開できた。

さにいのWebサイト

まだ、スマホ対応にしていないので、スマホではバランスが崩れたままだ。
これは、後日、課題にする。

(ちなみに余談だが、トップページに使われている写真は、私が愛してやまないQueenの映画ボヘミアン・ラプソディの曲録りをしていた部屋である。)

今回、躓いていた原因は何点かある。

そして、私はそれについて全くの無知だった。

Webデザインを短期間で学ぶスクールに通っていたのだが、習った記憶が無い。

それと、検索の仕方も悪かったのかWeb上でもすぐに解決策も見つからなかった。

盲点だ。

しっかりとした長期のスクールで学んでいる方はそんなこと…と思うかもしれないが、短期間の場合だと丁度すっ飛ばすところの内容ではないのだろうか。と推測。

勉強している方もここを乗り越えているから、文字や背景、機能やデザイン性のHTMLやCSSの法則などはいくらでも検索や勉強は出来るのだが、このページの増やし方のところは少ないように感じた。

今回、私は基本のページの作り方にそってページを2つ作った。

なので、htmlページ、CSS、imagesフォルダ及びファイルが2つずつあった。

そして、そのままFTPソフトにアップロードしていたのだ。

フォルダのまま上げたり、ファイルだけ上げたり、ありとあらゆる形を変えて上げてみて、失敗を何度となく繰り返して正解を見つけた。

まとめておこう。

①トップページはかならずindex.htmlという名前のファイル。
②2ページ目以降のhtmlファイルは、indexというところを変えて名前を作成する。そして、その名前をそれぞれのリンクに貼る。
③htmlファイルは全てフォルダに入れず、そのままアップロードする。※
④CSSについても複数ある場合は、それぞれのhtmlファイルが対応するcssstyleに紐付けるために、cssにも名前を変えて付け、htmlファイルの始めに記載しておく。
⑤CSSはCSSフォルダにまとめて格納した上でアップロード
⑥imagesフォルダは1つのフォルダに各ページで使用する全ての画像を入れておく。

これで解決した。

全てのページのhtmlを同じところに並べることも知らなかったし、またフォルダに入れることによるURLの概念でページの構成を作っていくということを今回理解出来た。

いやぁ、今日ほどモヤっていた気持ちがスッキリした日はなかった。

確かにスクールに通っていた時からこの辺がモヤっていたのか。と再認識。

スクールの時は、実際、アップロードしてみる訳では無いので、その時になったら分かるのかな。くらいに思っていたが、やはり分かっていなかったし、知らない部分だった。

よし、ここからまた改めて楽しく勉強を進めていくぞ。と心に誓ったのだった。

part3に続く。