ホームページを無料で初めて作る! -9時間目:本当、1個ずつやらないとダメだなってまた確認できた-

スポンサーリンク

久々にHP作成を続行した。実に9日ぶり。

 

嫌になって逃げ出していました。

 

しかし、頑張って戻ってきました。

さっそく記録始めます。

 

スポンサーリンク

いきなり挫折パンチ

頑張って戻ってきたのにこの仕打。

 

やる前から、トラブル発生。

なんと、タイトルがおかしなことになっておる。

 

これが…

 

こんなふうになっておる。

 

なぜだ?

なぜタイトルがおかしくなっているんだぁ~~~!?

 

さらに、なぜかスマホ仕様にしたら、

サイドバーが崩れている事件も発生。

 

 

なんで横に並んでんの?

この前まで、縦にきれいに並んでたよね?!

 

何が原因なの?

長らく放置してたから、怒ってんの?拗ねてんの?

 

\(^o^)/

 

もう、初っ端から逃げ出したくなる。

 

 

調べても原因がわからん

謎すぎる、マジで謎すぎる。

1個でも大変なのに、なぜ2箇所もおかしくなっている!!

 

私をいじめたいの?いじめたいの!?

 

と、自暴自棄気味になる。

 

おそらく原因はCSS。

でも、どこが原因かさっぱりわからん。

 

 

ってか前にね、ハム一覧を横並びにすることに成功してたんですよね?

 

 

なぜか縦並びだったので、嫌になってたんですよね。

けどデキたときは、すごく嬉しくってさぁ。

 

display: inline-block

を入れたら、デキたわけよぉ。

 

ちなみにこれは、うたわれるもののサイトを参考にしました。

やっと使い方がわかってきたよ、デバックモード!って喜んでたときね。

 

ちなみに9日経ったら、すっかり忘れていました。

やっぱり時間空けちゃダメだなぁ…。

 

んでね、これが原因じゃないかなっって。

だって、サイドバーの一覧は横に並んでんじゃん?

ってことは、inline-blockが関係してんのかなって。

これって、横並びしますって命令文だし。

 

しかし、どこに設置したかさっぱり記憶にない。

9日も経ったら忘れるわ…。

 

タイトルに関しては、どっかの閉じ忘れが原因だろうか?とか思うけど…

この膨大な量から、どこの閉じ忘れを発見しろと?

 

もー、すげー嫌になったwww

 

デキるところからやる

無駄に時間だけが過ぎていき、更に嫌になる。

 

…もう、こうなったら、デキるところからやろう!と思考チェンジ。

 

まず、ハム一覧を完成させようって。

前回までに、全ハムのアイコンを仕上げていたのだよ。

あとは設置するだけ。

 

と思ったら、1匹描き忘れていたと気づく。

ごめん、ナッツ…。

 

仕方がないので、ちまちまと進め…。

ここで気づいた。

 

1つずつ確認しないとダメだ、と。

 

まず、画像を1個設置したのね?

そしたらさぁ、反映されていないんだわ。

 

なぜに!?と思って調べたら、「.png」が入っていなかったわけよ。

ああ、そうか。こんなちょっとしたことだけで、反映されないんだ。

HTMLさんは忠実に命令しないと、いう事聞いてくれないんだと。

 

そう言えば、職業訓練でも「1つ1つずつ確認してください」って言われてた。

けど、「めんどくせぇ!一気にやって、一気に見ればいいじゃないか!」と思っていた。

 

その一気にやって、痛い目に見ているぞ、私よ!?

 

そうなのです。

1つやって1つ見たら、そこがおかしいってすぐに気付けるんですよね。

こんなアタリマエのことにも気づけなかった。

 

めんどくさいの恐ろしいことよ。

 

こうして、無事に全ハム(1匹以外)の設置が完了しました。

あとは、名前だなぁ…。本当は真ん中に設置したんだけど、左寄りになってんだよなぁ…。

 

これに時間を割けると、また混乱するので一旦終了。

 

一応、仮にでも一覧は完成できたので、ちょっとは前進。

やっぱりちょっとでも進めないと「全然進んでいない!」って焦んだよなぁ。

 

一からやり直した

ここで、CSSの不具合に着手。

もう残り時間はこれだけに費やす!と覚悟を決めて。

 

でね、もうぐっちゃぐちゃで、どこをいじってんのかわかんないんだわ。

こうなったら、まっさら状態からやり直すかと。

リセットですよ。こっちのほうが早い気がしてさ。

 

無料テンプレから、再度DL。

比較しながら、見てみると…原因発見。

 

なんと、

「電話番号のCSSは使わないから、いらないなぁ~」

と思って、消していたのが原因だった。

 

予想外だった…!

ってか比較したから発見できたもの。

まっさらから挑戦しなかったら、永遠に見つからなかったわ。

 

そして、サイドメニューの横並びの原因もわかった。

 

display: inline-blockであってた!

 

これ、liタグで括ってたのね?

ハム一覧も、liタグで並べてたのよ。

だから、影響されて横並びになっちゃってたんだよ!

 

ああ~~!

原因がわかると嬉しい~~!!

 

 

ここでタイムアップ。

 

これから対処しないといけないけど、わかっただけでも嬉しかった。

前進して、よかったよ…。

全く前進しなかったら、今度こそ挫折していたかもしれんw

 

おわりに

やっぱり日を空けると忘れるな。

 

しかし、諦めるな!という気力でなんとか前に進めました。

諦めて何もしなかったら、何も進まない。

けど、頑張って一歩でも進めてみたら、何かが見えてくる。

 

これって大事だな。

解決方法は1つではない、別のところにもある。

一歩一歩確実に進める。

この教訓、忘れないでほしい。

 

 

▼HP作成記録▼

HP作成まとめ前半

HP作成まとめ後編

 

 

 

この記事は、34分で仕上げました。

 

◆この記事を書いた人

コミュ障・社会不適合者な私の唯一の取り柄は「イラスト」。
けど、そのイラストも上手く描けなくて、描くことを止めたり…。

だけど、このブログで絵関係の記事を書くと…
・Live2D公式に「おすすめサイト」と言ってもらえる
・「わかりやすい」と素敵メッセージをいただく

「絵」の楽しみを思い出しました。

イラスト関連で困っていること、お役に立ち情報を「困っている人目線」で記事を書いています^^

HP作成記録
スポンサーリンク
コミュ障でもいいのです。
トップへ戻る