Webデザインという勉強 part1

やっと、このことを書く日がやってきた。
この歳で、経験のないことを始めたらどうなるのかシリーズ。
今更ながら、Webデザインを勉強し始めた。

もう、分からないことだらけなんだが、いちからここで毎日少しずつ形にしていくので、お付き合い頂きたい。

HTMLから基本的なことを覚えていくのが普通なんだろうが、どうしても私は中身空っぽでいいから形を先に作りたかった。

部屋の中身はそれから準備すればいいんじゃないか？
(本当は違うんだろうけどね)

では、スタート。
いきなり、私のサイトがこれ。

さにぃのWebサイト

え？
なにが？
って思ってる？

そう。タイトルしか入ってない。

こんなのわざわざ。
って思った方も要るとは思うが、
だがここまで来るまでに3日間以上かかった。

サーバーを契約して、ドメインをとって、FTPソフトを設定して、やっとサイトが立ち上がるのだ。

すんなりいけば何の苦労も要らないんだろうが、やり方を見てやったはずだが、エラーは出るわ、反映されないわ、触り過ぎておかしくなるわで、振出しに戻って。の繰り返し。

そんなこんなで時間はかかったが、これから毎日(出来れば)少しずつこのサイトという部屋に素敵な部屋や家具を準備していくので、お楽しみください。

それとこのサイトを見て、ここはヤバイよ！設定間違ってるよ。とか、ここをもっとこうしたほうがいいんじゃないか？
とかいうアドバイスや助言、アイデアがあればお気軽にコメント欄に記入して頂きたい。
見ていただく方のお力がないと育たない気がしている。

こんなことも初めはお金をかけずにどんどん数をこなすしかない。
トラブルや失敗は、嫌がらず肥やしにしていこう。

ちなみに私がここで上げているサイトの設定を紹介しておく。

サーバー : XFree
ドメイン : XFreeのhtml初期ドメイン
FTPソフト : FileZilla

全て無料ソフトで揃えた。
設定の仕方はもうネットにも嫌というほど出てるので割愛する。

次に私がつまづいた点も紹介しておく。

①サーバー　(土地にあたるところ)
つまづいたわけではないんだろうが、選ぶのに2日間ほど必要とした。
ピンからキリまである。
ここでの私のポイントは初めはお金をかけず。である。
なるべく安いところをと考えていたので、有名なロリポップやさくらサーバーも検討した。

が、いずれは恐らくXサーバーを使用する予定というのと、それなら一層無料のXfreeで。という結論に至った。

②ドメイン (住所にあたるところ)
土地に当たるサーバーは引っ越しもできるし、それこそドメインは変えれないけど、、、いや、きっと、ここ迷ってる場合じゃないんだと思う。
何個も作ればいいんだよな、うん。

ということで、Xfreeでも与えられる無料の初期ドメインを使用。

ここまでは作業としてはすんなりいったかな。
悩んだり検索したりに時間はかかったけど。

③ FTPソフト (引越業者にあたるところ)
そして、次のFileZilla。

これの設定よ。
一応、ネットにも優しくは書いてあるのよ。
その通りに、入力していって、、、最後に接続ボタンをオーーーーン！！！
FileZillaの画面上は全て移動完了。

では、URLを叩いてみるー

404エラー

なるよねー。
ここから、探ること半日。
何しても反映してくれない。
サーバーもFileZillaも接続されいるはずのに。

ちなみにこのタイトルは、Bracketsソフトで作ったもの。
読み込んだフォルダには、index.htmlとCSSフォルダとimagesフォルダが入っている。
CSSフォルダには、stylecssとresetcssが入れているもの。
imagesフォルダには、始め沢山の写真画像を入れていたが、文字化けしたもの、読み込めていないものもあったので、少しずつ減らし、最後は1枚のjpg画像のみにした。

Bracketsのライブビューでは、きちんと反映されているので、
htmlやCSSの記述に間違いがあるわけではない。
(そもそもたかが1行のタイトルのみで記述間違いがあっては困る)

やってみたことは、サーバーのドメインの種類を変えてみたり、FileZillaの中身をリセットしてみたり、パソコン、Chromeのキャッシュを削除してみたり。
有りとあらゆることをしてみたが出てくれない。
心折れそうになる。

どう考えてもやはりFileZillaの転送時の何か間違ってるに違いない。
と思い、睨み続けること1時間。
左側のフォルダをクリックしてみたり、ドラッグアンドペーストしてみたり、デスクトップからコピペしてみたり。

そして、 index.htmlのファイル単体で置いたときに、あら。
タイトルが出たじゃないですか！！

左上の方に黒いタイトルが出た！

フォルダに入れたままではなく、ファイル単体で移動させると反映。

何故かCSSは読み込んでいない模様。
でも、一応繋がってることだけでも確認取れたので少しでも前に進めた感。
ここからも長かったのだ。

CSSだけが効いていない。
ファイルにまた何か欠陥があるのだろうか。
元々のフォルダの名前を変えてみたり、USBに入れていたのだがデスクトップに置き換えてみたり、触りまくったその時にふいにタイトルが中央へ動いた。

わー。
たった1行のタイトルのサイトがやった映し出された瞬間だった。

嬉しい！嬉しすぎる！

そして、そのまとめがこちら。

1. 最初のページは、index.html または index.htm にする。
2. 日本語のフォルダ名やファイル名は使用しない。
3. ファイル名の途中に、スペース(ブランク)を使用しない。
4. FTPにアップロードする際は、フォルダごと移動させず、まずindex.htmlファイルのみを移動させ、反映されているかを確認する。

何らかのエラーがあった際も是非こちらを確認して頂きたい。

以上、さにぃのWebデザイン勉強スタートです。

Part 2へつづく。