【初心者向けシリーズ】htmlとcss初心者がずっこける備忘録

初心を忘れがちな自分に捧ぐ、ここで詰んだな備忘録

技術力が雑なくせに年数だけ稼いでしまった私なので初心はもうだいぶ昔に消えて行きました。
そもそも何につまづいていたかをまとめましょう。

リンク色が効かないんだけど

リンク色を変えたくてどんなにcolorを変更しても変わらない・・・。
リンクの色を変えているつもりでも、ただ文字色を変えてるだけってのが昔はよくありました。リンクの色を変えたい場合はちゃんとaタグに指定してあげないといけないんだぞい

//html
<div class="sample">はろはろ<a href="#">えぶりでぃ</a></div>

//css

//ダメな例
.sample{
 color: red;
}

//正解
.sample　a{
 color: red;
}

横に並ばないんだけど

勉強初心者は大抵divタグを用いて形を作ったりしてタグと戯れることが多いと思うのですが、divタグはblockといわれるdisplay設定になってるよ。
「見えている部分だけじゃなくて横のエリアぜーーーーんぶ俺のやで」っていうのがblock。
対処法は複数あるけど、今一番楽なやり方だなーと思うのは、displayをinline-blockにすること。横幅さえオーバーしていなければちゃんと横に並ぶよ。

//html
<div class="left"></div>
<div class="right"></div>

//css

.left,.right{
 width: 500px;
 height: 500px;
 display: inline-block;
}

　まとめ

一気に何記事も書いたら、初心に帰れなくなったのでまたあとで書く。
初心者なりにわからないhtml、cssの謎があればコメントにガシガシ書いてください。わかりそうなやつはここでざっくり書きますわーーーー