初心者向けプログラミング学習の LTech 公式。HTML/CSS/JSなど学習の豆知識を発信中 💻 学ぶなら → learning-tech.jp
- Tweets 347
- Following 100
- Followers 47
- Likes 457
【初心者あるある】
CSSを書いたのに見た目が全然変わらない…😇
よくある原因👇
・ファイルを保存していない
・linkタグのhrefのパスが違う
・セレクタのスペルミス（.btn と .bnt など）
まずはこの3つをチェック！
#CSS #プログラミング学習
1
16
【豆知識】console.log の友
詰まったら、変数の中身を
console.log() で一度出してみよう。
「どこで壊れたか」が見えると、
直し方も半分わかる。
#プログラミング学習 #JavaScript
learning-tech.jp
4
48
【豆知識】JSは === で比べよう
== は型を変換するので
"0" == 0 も true に。
=== は型も見るから安心。
learning-tech.jp
#プログラミング学習 #JavaScript
1
56
【1問クイズ】
画像が表示できないとき、代わりに出る文字を入れる属性は？
A) title
B) alt
C) name
答えはリプへ💬
#プログラミング学習 #HTML
1
7
123
【豆知識】幅がはみ出すとき
paddingを足すとwidthを超えるのは、
デフォルトが content-box だから。
`box-sizing: border-box` なら
幅の中にpaddingも含まれます。
*{box-sizing:border-box}
#プログラミング学習 #CSS
learning-tech.jp
1
78
【ビフォーアフター】中央寄せ
❌ marginとtext-alignをあちこち試す
⭕ display: flex;
justify-content: center;
align-items: center;
縦横どちらもこれでOK👍
learning-tech.jp
#プログラミング学習 #CSS
3
84
【豆知識】display:none と visibility:hidden
none → スペースごと消える
hidden → 見えないが場所は残る
レイアウトを残したいときは hidden👍
learning-tech.jp
#プログラミング学習 #CSS
4
106
【豆知識】form内のbuttonは type を書こう
書かないと送信ボタン扱いになります。
ただの操作ボタンなら type="button"。
意図しない送信を防げます👍
learning-tech.jp
#プログラミング学習 #HTML
3
115
【1問クイズ】
あとから値を変えられないのはどれ？
A) let
B) const
C) var
答えはリプへ💬
#プログラミング学習 #JavaScript
2
2
247
【豆知識】フォームのラベルは for と id でつなぐ
<label for="name">名前</label>
<input id="name" type="text">
文字をクリックしても入力欄にフォーカスが移ります。
learning-tech.jp
#プログラミング学習 #HTML
1
93
【豆知識】エラーが出たら、まずメッセージの1行目を読む。
「どこで」「何が」が書いてあることが多いです。全部読まなくてOK、最初の1行から。
learning-tech.jp
#プログラミング学習 #JavaScript
3
100
初心者あるある：
コピペで動いたのに「なぜ？」が分からない……
その瞬間が学びどき。1行ずつ自分の言葉で説明できるか確認すると定着します💡
#プログラミング学習
learning-tech.jp
2
93
【JS豆知識】比較は === を使おう
== は型を勝手に変換するから
"0" == 0 が true になることも。
=== なら型も値も同じときだけ true。
#プログラミング学習 #JavaScript
learning-tech.jp
2
78
【CSS豆知識】画像の縦横比は aspect-ratio で指定できます。
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
高さ計算なしで崩れにくいです。
講座 → learning-tech.jp/courses/css…
#プログラミング学習 #CSS
74
【CSS豆知識】
幅を指定したのに padding で横にはみ出す？
html { box-sizing: border-box; }
*,*::before,*::after { box-sizing: inherit; }
これで「幅の中に余白」になり、レイアウト崩れが減ります。
学ぶ → learning-tech.jp/courses/css…
#プログラミング学習 #CSS
1
61
【CSS豆知識】
要素の間隔は margin より gap が便利です。
display: flex;
gap: 1rem;
端の余白を気にせず、すき間だけ整えられます。
講座 → learning-tech.jp/courses/css…
#プログラミング学習 #CSS
51
CSSの余白で迷ったら、まず「要素の外側は margin、内側は padding」と分けて考えてみましょう。
LTechのCSS基礎講座では、色・余白・レイアウトなどの基礎を学べます 💻
learning-tech.jp/courses/css…
#プログラミング学習 #CSS
1
45