ホームページを無料で初めて作る! -10時間目:風邪ひきながら前に進むが、やっぱり止めたほうが良い-

↓やっと、一覧並べることがデキたよw

ってか、派手に風邪引いたwww

 

外のおっちゃんにうつされたか?ごほごぼいってたんだよなぁ…。

あとは、雪ん中を2日連続で走ったのが問題か。

 

頑張って今日の成果を書く~。

 

スポンサーリンク

風邪の威力

私はあまり風邪は引かない方…だと思うのですが、派手にひいてしまいました。

朝の時点では、ちょっと咳き込むなぁ~ぐらいだったんですよ。

そしたら、昼ぐらいになったらもう、全員痛いし、頭痛するし、せきひどくなるし、

 

これ、完全に風邪だな、と。

 

でも、HP作成やらなきゃ…!と健気に取り組んでいるわけですよ。

そしたらさぁ、やっぱりつまずくよね。

 

体調が絶好調に悪いよね?

Wパンチで、ダメージが2倍どころか3倍なんだわ。

 

もう、こらあかん。倒れましたwww

風邪をなめとった…。

 

 

しかし、R1飲んだら風邪治る(予防だった気がする)って前に聞いたことあるので、

寒い中、速攻買いに行きました。腹減ってたし。

 

すると、栄養補給できたから?

R1のプラシーボ効果?

 

なぜか、体調が少し回復してんだわ。

思い込みだったら、すげぇわ。

 

で、HP作成を続けるオレ。

 

前回のul事件の続き

はい、昨日はハム一覧をulタグで囲んで、なんとか横並びに成功しました。

 

しかし…

ulタグはサイドバーでも使っていたので、そこまで横並びになっとる。

いや、そこは縦で良いんだよ!!

 

いっこやったら、いっこ問題が出てくる。

「3歩進んで2歩下がる」とはうまく言ったものだ!

 

classとidの違い

なので、classとかidタグを仕えばいんでね?と思いつく。

しかし私は、未だに「class」と「id」の区別がつかん。

 

勉強のし直しです。

All Aboutに素晴らしい先生が居たので、勉強させて頂きました。

マジで丁寧で、神かと。

 

まぁ、ようは、

  • class=学年のクラス
  • id=クラスの中の出席番号

ってことらしい。

 

クラスの人数はたくさんいる。

しかし、たとえば「1組の出席番号1番」は1人しか居ない。

 

なんで、classはいっぱい使ってもいいけど、

idは1ページに1回しか使っちゃダメらしい。

 

しかし、1回と行っても、

例えばヘッダーに「id=”hamuham”」を使い、

フッターに「id=”hamuhamu2″」とかだったらOKらしい。

 

つまり、

「別に1ページに1回しか使ってはいけない!」

ってことではなく、

「各ブロック(ヘッダーとかフッターとか)には使っても良い」

ってことらしい。

 

ややこしいわ\(^o^)/

 

まぁ、まぎらわしかったら、全部classでもいいらしい。

…idのメリットって…?

続いて書いていたけど、よく気力がなくなったので止めましたw

 

とにかく、classタグを使えばいいってことだ。

 

もう、コピペでいいよ

自分なりに頑張ってみたんだよ。

 

みたんだけどな…反映しねぇ\(^o^)/

 

いや、付けたことで、サイドバーの横並びは解決しました。

やっぱりコレが原因だったんだなって。

 

しかし、今度はまたハム一覧が縦並びになっておる。

またふりだしにもどった…orz

 

一生懸命調べて、たどり着いたのは…。

 

コピペ。

 

ulタグに、コピペをするclassを付けて、

CSSもコピペして貼り付けたら…

 

ちゃんと元に戻っておるがな\(^o^)/

 

…もう、下手に自分いじらんほうが良いわ。

 

こうして、1歩も進んでいないが、問題は1つ解決したのであった。

 

画像の下のテキスト真ん中にできないか?

ずっと気になってたんだよね…左寄りでさぁ。

「もうそんなの良いから、先に進めよ!」って言われても、気になってさぁ…。

 

調べ始めてんのよ。

 

頑張って調べたのよ。

そしてたらね、figcaptionをCSSに書き込むだけで出来たんだわ。

…えっ、classとか付けなくてもいいの…?

 

どこにどう付けても良いのか、不要なのか、さっぱりわからん\(^o^)/

 

まぁ、何とか解決したから良かったものの…。

しかし、新たな問題が発生した。

 

 

TOPページが崩れておる。

 

…なんで?なんかしたか、わし?

figcaptionいじったからか?そうなのか!?

 

嬉しいときに突き落とされて、しばらく呆けたっての!

 

しばらく呆けて、figcaptionタグを消してみてもそのまま…。

ってことは他に問題がある。

 

どこだよ。わっかんねぇーよ!

もうお手上げだよ、助けてママン!

 

…ってなわけで、戻すボタンを押しまくりました。

変になったのは、今回の作業中なのか?それとも前からそうなのか?

確かめる必要があったのです。

 

一つ一つ押してみると…わかりました。

{}の右側のカッコが消えていました。

 

いや、こんなの気づかねぇよ!

 

知らないうちに、触っちゃってたんでしょうね…。

なんにしても、問題が解決してよかった…。

 

キャプチャ(画像の下の字)の方は、無事に真ん中を維持できました♪

 

今度は画像を真ん中にしたい

解決したから、また欲が出ます。

画像一覧も左寄りなので、こちらも真ん中に設置したい!

 

いろいろ試しましたよ。

けどねぇ…コレは解決できなかった。

 

一時、うまく行ったのですが、なぜか説明文まで真ん中寄りになっちゃったもんで、原因が不明…。

あれかな、text-align:centerにしたから?

画像を、<div>で囲めば良いのか…?1個ずつ…?22個も…?

 

もう嫌になったので、終了\(^o^)/

 

ちょうど時間もいい感じでしたし。

 

おわりに

はい、風邪の中すげぇ頑張りました。

進んだっていうのが一番嬉しい。

 

まだまだだけど、0ではないからね…。

明日も体調が回復したら、頑張ります。

 

 

▼HP作成記録▼

HP作成まとめ前半

HP作成まとめ後編

 

 

 

この記事は。30分で完成しました!早い!

 

◆この記事を書いた人

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

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

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

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

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