《CSSデザイン》見出しメイカー 初心者学習用ツール(α版)

ツール概要

見出しのCSSを確認しながら作成できるツールです。
多分未完成(α版)で終わると思います。
結果的に初めてCSS触る方が勉強するにはいいツールになった気がします。

自分もそうですが、CSS関係のサイトをみてもその時は分かっても、あとから「あれ、colorだっけ?font-colorだっけ?」みたいになっちゃうんですよね。

h1~h6を想定していますが、他のブロック要素(p/div/li等)でも動作はするかもしれません
h7のような未定義タグも可能ですが、:hoverや::before等の疑似クラス、疑似要素に関しては想定通りには動かない点には注意。

select、input、table等のインライン要素には現在対応していません。
作成開始時はもっといろいろ対応させようと思ったのですが、当初の予定より遥かに工数が必要なのが分かり、現在の「とりあえずα版」で区切りとしました。


登録と結果

入力フォーム


使用するタグ/疑似クラス/疑似要素の設定を行ってください。
※HTML常用タグ以外のタグには、スタイルチェックは行わず登録します。
※選択にないタグ/疑似クラス/疑似要素の組み合わせを使いたい場合は「自分でtypeを設定」から行ってください。


追加するスタイルと値を入れてください。値は後で変更可能。
※「自分でstyleを設定」を行う場合、値の設定はtableの設定値(変更可能エリア)から行ってください。



登録CSSテーブル

現在のテーブルを表示
タグstyle設定値(変更可能エリア)cmd
出力したい文字列を指定して下さい


出力文字設定


出力文字列指定(未指定時「サンプルデータ」




※保存データを表示








セーブ&ロード

※セーブすると、次回アクセス時にデータを自動で読み込みます。

※セーブしたデータに差し替えます。


※ローカルストレージにセーブしたデータを削除します。外部出力したファイルデータが消えることはありません。



詳細な仕様

・登録について
登録すると、テーブルにタグ/style/設定値が追加されます。
同じタグ/styleが存在していた場合は上書きします。
「自分でtypeを設定」は見出し以外のタグを使いたい場合に利用して下さい。
きちんと動作するかは分かりません。


・登録CSSテーブルについて
現在登録されているタグ/style/設定値が確認できます。
style部分をクリックするとグレーアウトし、その部分の設定を一時的に無効化できます。
もう一度クリックするとグレーアウトがなくなり、再びその設定が有効化します。
第4カラムの「削除」を押すとその行の設定がテーブルから削除されます。

・出力文字設定について
テキストボックスに入力した文字を各種CSSを加味して出力します。
テキストボックスの指定がない場合は「サンプルデータ」が表示されます。
その下のセレクトボックスで、現在使用しているCSS(文字情報含む)が表示されます。
「CSSをクリップボードに保存」を押すと、表示されているテキストがクリップボードに保存されます(CTL+Cと同等)。

・セーブ&ロード機能について

セーブしておくと、ブラウザ開きなおしても残ってるいつものヤツです。
自分のツールでよく使うので、今回汎用(jsファイル)化しました。

tblsavelord.js
/* ///////////////////////////////////////////////////////////////////////////////////
html上のテーブルデータをローカルストレージに保存する関数

最近自分でもよく使うので、外部関数化して公開します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ 《セーブ機能》
■ SaveTableData(tblid,thline);
■ 該当のテーブルIDのデータ(値と背景色)をローカルストレージに記録します。
■
■ (引数1)tblid:セーブするテーブルのID
■ (引数2)thline:セーブの対象外とするデータ行数
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ 《ロード機能》
■ LoadTableData(tblid,thline,confirm);
■ 該当のテーブルIDのデータ(値と背景色)をローカルストレージから読み込み、テーブルに表示します。
■ 
■ (引数1)tblid:ロードするテーブルのID
■ (引数2)thline:ロードの対象外とするデータ行数(見出し除外用)
■ (引数3)confirm:1:ロード時の確認メッセージ有り 未設定:無し
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ 《セーブデータ消去機能》
■ clearTableData();
■ 該当のhtmlに関するローカルストレージを消去し、ページをリロードします。
■ 
■ (引数)なし
■ 
■■■■■■■■ jsファイルの取り込み方法 ■■■■■■■■■■■■
■   ローカル環境/自分のweb環境に取り込む
■   本ファイルをダウンロードするなり、コピーするなりして.jsファイルを作成して使ってください。
■   htmlと同じ階層に配置するのであればhtmlファイルに以下を記載すれば関数が使用できます。
■      <script src="./tblsavelord.js"></script>
■   設置階層が違う場合は適宜パスを変更して下さい。
■
■ 
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ 《その他注意事項》
■ 
■ ・ダウンロードした場合、本ファイルの内容は自由に改変してもらって構いません。
■ ・本ファイルの利用によって被った被害等に関しては責任を負いかねますので、承知の上で利用下さい。
■ 
////////////////////////////////////////////////////////////////////////////////////////*/

function createTableKey(tableId) {
    return "table_" + tableId;
  }
  
  function SaveTableData(tableId, thline) {
    var table = document.getElementById(tableId);
    var rows = table.rows.length; // データ数(見出し含む)
    var row_start = thline; // 見出し行数
    var data = [];
  
    for (var i = row_start; i < rows; i++) {
      var row = table.rows[i];
      var cols = row.cells.length;
      var rowData = [];
  
      for (var j = 0; j < cols; j++) {
        var cellText = row.cells[j].textContent.trim();
        var bgColor = row.cells[j].style.backgroundColor; // 背景色情報を取得
        var num = Number(cellText);
        rowData.push({
          value: Number.isNaN(num) ? cellText : num,
          bgColor: bgColor // 背景色情報を追加
        });
      }
      data.push(rowData);
    }
    var key = createTableKey(tableId);
    try {
      localStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.error("Failed to save data to local storage: " + e);
    }
    console.log("セーブしました:" + key);
  }
  
  function LoadTableData(tblid, thline, confirm) {
    var key = createTableKey(tblid);
    console.log("ロードしました:" + key);
  
    var data = JSON.parse(localStorage.getItem(key));
    if (!data) {
      console.error("No data found in local storage for key: " + key);
      return;
    }
    if (confirm == 1 && !window.confirm("本当にロードしていいですか?")) {
      return;
    }
    var table = document.getElementById(tblid);
    var rowCount = table.rows.length;
    for (var i = rowCount - 1; i >= thline; i--) {
      table.deleteRow(i);
    }
    for (var i = 0; i < data.length; i++) {
      var row = table.insertRow(-1);
      for (var j = 0; j < data[0].length; j++) {
        var cell = row.insertCell(-1);
        cell.innerHTML = data[i][j].value;
        cell.style.backgroundColor = data[i][j].bgColor; // 背景色情報をセット
      }
    }
  }
      
function clearTableData() {
    var res = confirm("本当にテーブルデータの削除を行いますか?");
    if (res == true) {
        localStorage.clear();
        location.reload();
    }
}

ほとんどchatGPTに作ってもらったコードですが、使う方いたらどうぞ使ってください。



参考

設定のうち、分かりづらいものについての補足。

transformが動作しない場合

見出し(h1~h6)はhtml側のデフォルトとして
display: block
が設定されています。
これが設定されている場合、transformが動作しません

なので、今回のように見出し(h1~h6)に対してtransformを動作させたい場合は、該当の見出しに対し
display: inline-block
を設定する必要があります。

余談ですが、見出し(h1~h6)の前後に改行コードが入る原因も
display: block
が設定されているのが原因なので、
display: inline-block
を設定することにより自動改行もなくなりますので、改行を手動で行う必要があります

他に、display:blockにより影響を受けるstyleとして、margin、vertical-align、line-height等があります。

余談になりますが、transformの設定値は複数種類を指定することも可能です。
transformの設定値として、”scale(1.5) rotate(45deg)“を指定すれば、1.5倍に拡大した上で右に45%傾くことになります。

transformではみ出る場合

・左方向への拡大を防止する
transform-originではみ出させたくない方向を指定して下さい。
ただし、この方法を取る場合はtransformとtransform-originの相性の悪さ(対象の位置がズレると:hover等の挙動が不安定になる)に注意が必要です。

・一定の範囲内に収めたい場合
親クラスで囲んで、親クラスのCSSで一定範囲外に出ないように制約をかけます。

具体的には
<html>

<div class="parentarea">
        <h1>サンプルデータ</h1>
  </div>

<css>

.parentarea { 
width: 200px; /* 幅を200pxに指定 */ 
height: 100px; /* 高さを100pxに指定 */ 
overflow: hidden; /* 子要素が親要素からはみ出した場合は隠す */ }

このように、周囲を他の要素で囲んで、その要素から子要素が出た部分を隠蔽することができます。

font-family (字体)について

表示される字体はクライアント側にインストールされているかどうかで決まるため、複数指定するのが一般的です。

一例としては以下のようになります。

<style>
p{
font-family: “Yu Gothic”, “Hiragino Kaku Gothic ProN”, Meiryo, “MS PGothic”, sans-serif;
}
</style>

この場合、見る側のPC(クライアント)にインストールされているフォントのうち、上位の物(上なら”Yu Gothic”が最優先)が表示フォントとして適用されることになります。
最後の sans-serifはほぼすべてのクライアントにインストールされているデフォルトの字体です。
他に適合する(指定されていて、クライアント側にインストールされている)字体がなければ、sans-serifになります。

つまりクライアント依存となりますので、font-familyを設定する場合は上のように複数指定しておくのが一般的です。

最後に

最初はCSS全体の万能的にコード作成できるようにしようと考えてたりしましたが、想像以上に大変で当初考えていた規模よりかなり小さくなりました。
逆にこれから勉強しようという人には丁度扱いやすいくらいのツールになったんじゃないかと思います。
バグやUIとしてイマイチの部分もあると思いますが、よかったら使ってください。
今回の記事では、できるだけ(ツールの影響を受ける)h1~h6を使わないようにしましたが、肝心の題名がh1なんですよねぇ…