こういうさらっとしたツールを作る際にGTPは役立ちます。
興味でCSSをいじることがあり、どのCSSにどの要素が含まれているかを解析するためのコードを生成してもらいました。
スクリプト内容
- css-inspector.sh
#!/bin/bash
# CSSファイルを引数として受け取る
if [ "$#" -ne 1 ]; then
echo "Usage: $0 <css_file>"
exit 1
fi
CSS_FILE="$1"
# ファイルが存在するか確認
if [ ! -f "$CSS_FILE" ]; then
echo "Error: File '$CSS_FILE' does not exist."
exit 1
fi
# CSS要素を抽出して解説する
awk '
BEGIN {
print "CSS要素を抽出し、それぞれを解説します:\n"
}
{
if ($0 ~ /\{/ || $0 ~ /\}/) {
current_selector = $0
gsub(/\{|\}/, "", current_selector)
gsub(/^\s+|\s+$/, "", current_selector)
}
if ($0 ~ /font-size/) {
print "font-sizeが見つかりました: テキストのサイズを指定します。セレクタ -> " current_selector ". 値 -> " $0
}
if ($0 ~ /background-color/) {
print "background-colorが見つかりました: 要素の背景色を定義します。セレクタ -> " current_selector ". 値 -> " $0
}
if ($0 ~ /color:/) {
print "colorが見つかりました: テキストの色を設定します。セレクタ -> " current_selector ". 値 -> " $0
}
if ($0 ~ /line-height/) {
print "line-heightが見つかりました: テキスト行間のスペースを制御します。セレクタ -> " current_selector ". 値 -> " $0
}
if ($0 ~ /margin/) {
print "marginが見つかりました: 要素の周囲の余白を定義します。セレクタ -> " current_selector ". 値 -> " $0
}
if ($0 ~ /padding/) {
print "paddingが見つかりました: コンテンツとボーダー間の余白を定義します。セレクタ -> " current_selector ". 値 -> " $0
}
if ($0 ~ /border/) {
print "borderが見つかりました: 要素のボーダーのスタイル、幅、色を指定します。セレクタ -> " current_selector ". 値 -> " $0
}
if ($0 ~ /width/) {
print "widthが見つかりました: 要素の幅を設定します。セレクタ -> " current_selector ". 値 -> " $0
}
if ($0 ~ /height/) {
print "heightが見つかりました: 要素の高さを設定します。セレクタ -> " current_selector ". 値 -> " $0
}
}
END {
print "\nCSS要素の抽出と解説が完了しました。"
}' "$CSS_FILE"
echo "\n完了しました！"
後は
スクリプト実行結果
chmod +x css-inspector.shとして実行権を付与し、
./css-inspector.sh css_fileで解析します。
CSS要素を抽出し、それぞれを解説します:
font-sizeが見つかりました: テキストのサイズを指定します。セレクタ -> :root. 値 -> --font-size: 1.1em; /* 1.1emで10%大きく */
font-sizeが見つかりました: テキストのサイズを指定します。セレクタ -> .issue, .description, .journal, .wiki. 値 -> font-size: var(--font-size); /* 定義したサイズを適用 */
font-sizeが見つかりました: テキストのサイズを指定します。セレクタ -> code, pre. 値 -> font-size: var(--font-size); /* ターミナル風のフォントでもサイズを変更 */
CSS要素の抽出と解説が完了しました。
\n完了しました！さっくりとしたものですが、それでも、ターミナル上での視認性が良くなりました。
