こういうさらっとしたツールを作る際に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完了しました！

さっくりとしたものですが、それでも、ターミナル上での視認性が良くなりました。