【学習記録】HTML/CSS基礎問題 & Ruby基礎（CLIやターミナル含む）
📅 本日の学習内容
HTML/CSSの基礎問題に挑戦
ターミナルの基本操作とRuby入門
間違えたポイントや、まだ理解があやふやな項目を中心に、復習を兼ねてまとめていきます。
✅ HTML/CSSでの気づき・復習ポイント
セレクタ
CSSでHTML要素を指定してスタイルを当てるための「目印」みたいなもの。
css
/* タグセレクタ */
p {
color: red;
}
/* クラスセレクタ */
.title {
font-size: 20px;
}
/* IDセレクタ */
#main {
background-color: #f0f0f0;
}
align-items
Flexbox（display: flex）で使うプロパティ。縦方向の揃え方を決める。
css
.container {
display: flex;
align-items: center; /* 要素を上下中央に揃える */
}
justify-content
こちらは横方向の並べ方の指定。
css
.container {
display: flex;
justify-content: space-between; /* 要素の間隔を均等に配置 */
}
position
要素の**配置方法（流れから外すかどうか）**を決める。
値 説明
static 初期値（普通の流れ）
relative 元の位置を基準にずらす
absolute 親要素を基準に絶対配置
fixed 画面を基準に固定表示
sticky スクロールに応じて位置が変わる
margin と padding の違い
プロパティ 役割
margin 要素の外側の余白
padding 要素の内側の余白（コンテンツと枠の間）
➕ 判断のコツ
要素同士の間隔を調整 → margin
背景や枠と中身の文字の間隔 → padding
font-weight
文字の太さを設定する。
css
p {
font-weight: bold; /* 太字 */
}
p {
font-weight: 700; /* 数値指定も可能（100〜900） */
}
border-radius
角を丸くするプロパティ。
css
.box {
border: 1px solid #000;
border-radius: 10px; /* 角が10px丸くなる */
}
ブロックレベル要素と構成の考え方
ブロックレベル要素とは？
横幅いっぱいに広がる要素（例：div, p, h1, sectionなど）
上下に余白ができやすい
インライン要素との違い
a, span, strong などはインラインで、横に並ぶ
構成のコツ
大きなパーツはdivやsectionなどのブロック要素で作る
テキストやリンクなど細かいパーツはインライン要素で構成
💻 ターミナル・Rubyの基礎
CLI（Command Line Interface）とGUIの違い
種類 説明
CLI コマンドで操作（黒い画面）
GUI マウスで操作（視覚的）
絶対パスと相対パス
絶対パス： /Users/yourname/Desktop/file.txt（パソコンのルートから指定）
相対パス： ../file.txt（今のフォルダから見た位置）
よく使ったLinuxコマンド
bash
pwd # 今いる場所を表示
ls # ファイル一覧を表示
cd フォルダ名 # フォルダに移動
touch ファイル名 # 空ファイルを作成
mkdir フォルダ名 # フォルダを作成
🐣 Ruby入門：基本の文法
メソッド
ruby
"hello".length # => 5
123.to_s # => "123"
"42".to_i # => 42
irbとは？
ターミナルでRubyコードを試すことができる対話型の実行環境
bash
$ irb
1 + 1
=> 2
式展開（文字列の中に変数を埋め込む）
name = "Taro"
puts "こんにちは、#{name}さん"
=> こんにちは、Taroさん
変数・代入・再代入・自己代入演算
name = "Hanako" # 代入
name = "Taro" # 再代入
age = 20
age += 1 # 自己代入演算（age = age + 1 と同じ）
✍️ おわりに
HTML/CSSとRubyの両方に触れて、少しずつWeb開発のイメージができてきました。
まだまだミスも多いけど、間違いから学びながらコツコツ続けていきます！