プログラミング

TechBoost受講記録。HTMLページ完成!

こんにちは!課題のページが完成しました。はるです。

上手くいかないところをググってみると、意外と「こうしたらこうなります」というタグ記載例が出てきて助かるものですね。

「字が画像の右側にこねえええ!」「フッターが変なところにワープしてるうう!」みたいな状況になってましたが、落ち着いて見直すと「ここが悪いねんな」というのが見えるようになりました。

間違える時は初歩的

先日、組み途中のページを掲載させて頂きました。

左側の方は出来上がっているも同然だったので、コードをコピペしちゃうだけでOKな状態になっていました(文章も画像も同じで良いという課題なので)

右側の方が問題で、「新着記事」「アイコン画像」「文章タイトル」が綺麗に並ばない、右側じゃなくて左側に来る、またはその逆という事が起こっていました。

上の画像みたいに、なんかどっかで間違えてるんです。

「なんでじゃー!」って頭に血が上ると間違いも見つからないので、落ち着くために一度寝ましたw

そうして落ち着いた後で「タグは打ち間違えてないか」「閉じタブ</>の位置間違いや配置忘れは無いか」「タグの作例との違いは何か」という、初歩的な観点から見直すと…

結構ありました。特に妙な位置に行ってしまうのは閉じタブの忘れが原因の場合が多かったです。

Atomを1行1行追って行って、閉じタブの忘れを見直し、後に打つコードは最初に開始タブと閉じタブをセットにしてから中身を打っていくようにしました。

そうすると…

大体それだけの事で体裁が整いました。

画像と文字をそろえるのには<align=”left”>タグで綺麗に見えるように。

残りは基本コピペ

残りのコードは基本、最初の列に使ったもののコピペで、最後のfooterにコピーライトの<p>を入れて完了。

出来上がってしまうと大した事ないように思えますが、やってる間は苦戦していましたw

だけど自分でもこんな風にHTMLページを作れたっていうのは自信に繋がりますね!

 

 


スポンサードリンク