【HTML,CSS,JS】フロント三種分からんからまとめ
おつです。HTML, CSS, JavaScriptもちょいちょいやってくので、学習記録を下記に今後まとめていくぞ。
概要
HTML, CSS, JavaScriptの勉強でやったこと、まとめておきたいことを記事にする。
勉強法
基本的にProgateをガンガンやる。
分からんところ
HTML - class="container"について
よくこのクラス名"container"でdivタグが取られている。毎度同じクラス名なので多分CSSを適用しないことを前提に作ってるんだと思うけど、このdivってどんな意図を持って設定されているんだろう。同様に、class="XXX-wrapper"ってのもよく見かける。これもどういうdiv要素に対してつけてるんだろ。
つーかそもそも、何重にもdivタグ使うことあるけどなんなん。実例下記。
(これProgateで使われるコード。みんなもやろうねProgate)
<div class="message-wrapper"> <div class="container"> <div class="heading"> <h2> さぁ、あなたもProgateでプログラミングを学んでみませんか? </h2> <h3> Let's learn to code, learn to be creative! </h3> </div> <span class="btn message"> さっそく開発する </span> </div> </div>
ここでも"message-wrapper"と"container"が、それ以下の要素を二重に覆っている。どっちかあればいいじゃん。
俺の考え①
一つの回答としては、wrapperとcontainerでは意味合いが違う。wrapperは全体に対してここがどんなエリアなのかを説明しており、containerは下位要素のcontainer(文字通り)なんじゃないか。
containerについて詳しくいうと、並列に扱いたい・まとめて一つの概念として扱いたいタグ達を<div class="container">
に入れてまとめてる。
また、一つの概念として扱う・並列関係にある、という意味的な整理のため以外にも、単にそのcontainerセレクタに対してCSSを適用すれば下位の要素たちに一律に同じCSSを適用できるって利点もある。
→ 『HTML5/CSS3 モダンコーディング』に下記のような記述があった。
メイン領域とサイドメニューを横並びにするため、その2つを囲む.wrapperというdiv要素も定義しています。
へー、横並びにしたいときに囲むのかな? まあ別の意図もあるっちゃあるんだろうけど。
HTML - h1~6の要素について
全部p要素でよくない???CSSで太さとかいじればいいじゃん。 → セクションって概念がある。普通のブログ記事みたいに、見出し、小見出しがあって構造化してくれるみたい。マジか。
HTML, CSS - HTMLのimg要素と CSSのbackground-imageの違い
分かんね。
CSS - marginとpaddingの使い分け
ここら辺は魔の道なので、先行者のやり方をまず真似てみたいなと思う。
[CSS] marginとpaddingの使い分けに本気出してみた。が、borderもちゃんと考える。 - Qiita
要点は、
・BOX要素は内から順に「文字とか入るエリア、padding、border、margin」と並ぶ
・背景色が適用されるのはborderまで
・box-sizing:border-box指定をせよ
また、上記の記事の中でmaiginとpaddingの使い分けについて、コンポーネントがなんやかんやみたいな記述があるんだが、全くもって意味がわからないのでそこは無視する。
で、改めて自分で考えてみたんだが、box同士の関係性って結局隣接するか親子関係になるかのふた通りだ。だったら、隣接するときはmargin、親子のときはpaddingでいいのかなと思った。
(※ただ、次のケースでどうpaddingさせるのかちょっと分からん。親要素の中に二つの子要素が並列されており、子要素ごとに親要素からの距離?隙間?が違うときどう設定するのか。うーん、まあ子要素の大きさ揃えればええやろって思うけど。。)
CSS - 横位置中央揃え
横位置中央揃えにするとき、対象の要素がblockか否かでやり方が異なる。
・block要素
margin: 0 auto;
・inline-block, inline要素
text-align:center;
追記。
blockか否かで単純化して覚えていたら、下記のケースでクッソ詰まってしまった。
実例① div要素(block)の中の文字列を中央揃えしたいとき
これ、margin:0 auto;
したら全く反応なくて詰まった。正解はtext-align: center;
。なぜかっつーと、margin:0 auto;は親ブロックに対して子ブロックを中央揃えにするとき使うCSSで、子ブロックの中の文字列は中央揃えしてくれない。そこはtext-align: center;
。
CSS - 縦位置中央揃え
縦位置中央揃えにするときはline-heightが使える。要素の高さとline-heightの高さを同じにすることで中央に文字を来させることが可能。
height:65px; line-height:65px;
CSS - 要素をかぶせるやつ(position)
親子関係にある要素において、親要素基準に位置取りできる。
.parent{ position:relative; } .child{ position:absolute; top:30px; left:90px; }
とか。
https://webliker.info/css-selector-cheat-sheet/
JQuery - 書き方
基本の書き方。function書きすぎやし()やら{}が多くて混乱するが覚える。
// ①全体の関数化? $(function() { //②イベント発生時に次の関数を起動 $('.list-item').click(function(){ //③起動する関数 $(this).css('color', 'red'); }) });
コメントとしても書いたが、以下のような意味合い。
①全体の関数化
ここ実は省略形らしくって、フルに書くと
$(document).ready(function(){ })
らしい。これの意味はdocumentの読み込みが終わってから以下を実行するってこと。
②イベント発生時に次の関数を起動
③起動する関数
以上!!!