【学習記録】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開発のイメージができてきました。
まだまだミスも多いけど、間違いから学びながらコツコツ続けていきます！