初心者向けプログラミング学習の LTech 公式。HTML/CSS/JSなど学習の豆知識を発信中 💻 学ぶなら → learning-tech.jp
- Tweets 975
- Following 161
- Followers 85
- Likes 1,142
【1問クイズ】
.box { margin: 10px 20px; }
このとき「左右」の余白は何px？
A. 10px
B. 20px
C. 左10px・右20px
答えはリプで👇
#CSS #プログラミング学習
1
1
47
【豆知識】JSが動かない時はF12→Console🔍
赤いエラー右端の「script.js:12」をクリックすると、問題の行へ直接ジャンプできます。
英語のエラー文が読めなくても、まず行番号を見るだけで原因箇所がかなり絞れます。
#JavaScript #プログラミング学習
1
58
【豆知識】JavaScriptで文字列と変数をつなぐなら、+ よりテンプレートリテラルが読みやすい👇
"こんにちは、" + name + "さん"
↓
`こんにちは、${name}さん`
バッククォート(`)で囲んで ${} に変数を入れるだけ。改行もそのまま書けます。
#JavaScript #プログラミング学習
2
85
【豆知識】Flexboxで並べた要素の間隔は margin より gap が楽！
.list {
display: flex;
gap: 16px;
}
要素の「間」だけに余白がつくので、最後の要素の余白を消す手間なし✨
#CSS #プログラミング学習
7
197
【JS豆知識】
比較は == より === がおすすめ。
== は型を自動で変換するので
"0" == 0 → true
=== は型まで比べるので
"0" === 0 → false
思わぬバグを防げます👍
#JavaScript #プログラミング学習
3
140
【初心者あるある】
コードは合ってるはずなのに動かない…
原因は「全角スペース」でした😇
日本語入力のまま打つと混ざりがち。
エディタの設定や拡張機能で全角スペースを見える化しておくと安心です。
怪しい行はスペースを打ち直すのが早い👍
#プログラミング学習
1
111
【豆知識】JSエラーで止まったら、Consoleの赤い行を見よう
右端の「main.js:12」をクリックすると、エラーの行へ直接ジャンプできます。
何行目で起きたか分かるだけで原因探しがグッと楽に。
#JavaScript #プログラミング学習
2
133
【1問クイズ】
const arr = [1, 2];
arr.push(3);
これはエラーになる？
A. なる
B. ならない
答えはリプで👇
#JavaScript #プログラミング学習
1
5
171
💡HTML豆知識
入力欄には <label> をセットで。
<label for="email">メール</label>
<input id="email">
for と id をそろえると、文字をクリックしても入力欄が選べる。スマホで押しやすく、読み上げにも◎
#HTML #プログラミング学習
88
【豆知識】JavaScriptの文字列連結は「+」よりテンプレートリテラルが読みやすい👇
"こんにちは、" + name + "さん"
↓
`こんにちは、${name}さん`
バッククォート(`)で囲み、${ } に変数や式を入れるだけ。改行もそのまま書けます。
#JavaScript #プログラミング学習
1
10
168
【豆知識】Flexboxで並べた要素の間に余白をつけるなら、marginよりgapが便利
.list {
display: flex;
gap: 16px;
}
端に余計な余白が出ず、最後の要素だけmarginを消す手間もなし。Gridでも使えます
#CSS #プログラミング学習
2
175
【初心者あるある】
CSSを直したのに画面が変わらない…
原因はだいたいこれ👇
・class名のスペルミス
・linkタグのパス間違い
・ブラウザのキャッシュ
F12の検証ツールで、そのCSSが読まれているか確認してみよう！
#CSS #プログラミング学習
1
4
154
【豆知識】レイアウト崩れの原因探しに👇
* { outline: 1px solid red; }
全要素の枠が見えて、はみ出しの犯人がすぐ分かる。outlineは幅に影響しないのがポイント。
#CSS #プログラミング学習
4
124
JavaScriptの比較は「==」より「===」がおすすめ。
0 == "0" → true
0 === "0" → false
== は型を勝手に変換して比べるので、思わぬバグの元に。迷ったら === を使えばOK。
#JavaScript #プログラミング学習
1
5
177
【1問クイズ】
margin: 10px 20px;
このとき「左右」の余白は何px？
A. 10px
B. 20px
答えはリプで👇
#CSS #プログラミング学習
1
3
236
【豆知識】console.log は { } で囲む
console.log(name, age)
↓
console.log({ name, age })
出力: { name: 'Taro', age: 20 }
変数名つきで表示されるので、どの値か一目でわかります👍
#JavaScript #プログラミング学習
4
192
【ビフォーアフター】押せる要素は button
❌ <div onclick="send()">送信</div>
✅ <button type="button" onclick="send()">送信</button>
buttonならTabキーでのフォーカスやEnter操作が最初から使えます。
「押せるもの」は button が基本👍
#HTML #プログラミング学習
6
146