使い方
- テーブルを作るにはテーブルタブ、影を作るにはボックスシャドウタブを開きます。
- テーブルでは、行数、列数、テーブルの幅、枠線の太さを設定します。影では、オフセット、ぼかし、広がりのスライダーを動かします。
- プレビューを確認し、コードブロックの上にあるコピーアイコンを使います。
テーブルタブは、ヘッダー行と、設定した数の本体の行・列を持つHTMLテーブルを作成します。ヘッダーセルには Header 1 のようなテキストが、本体のセルには Cell 1-1 のようなテキストが入るので、ご自身の内容に置き換えてください。幅の欄にはあらゆるCSSの幅の値を指定でき、初期値は100%です。枠線の欄は枠線の太さをピクセルで設定します。コピーされるコードは、gen-table というクラス用のstyleブロックで始まり、そこには結合された枠線、セルのパディング、網掛けされたヘッダー、縞模様の偶数行、ホバー時の色が設定されていて、その後にテーブルのマークアップが続きます。
ボックスシャドウタブは、単一の box-shadow 宣言を出力します。水平オフセットと垂直オフセット(-50~50px)、ぼかし半径(0~100px)、広がり(-50~50px)、CSSの色の値で指定する影の色、内側の影用の inset オプションを調整できます。初期の色は、薄い透明の黒です。スライダーを動かすと、プレビューのボックスが更新されます。
どちらのタブも、コピーボタン付きのブロックにコードを表示します。行数と列数は1以上、枠線の値は0以上にする必要があります。
コードはブラウザ上で生成され、何もアップロードされません。
よくある質問
テーブルにスタイルは付きますか?
はい。出力には、枠線、パディング、網掛けのヘッダー、縞模様の行、ホバー時の色を持つ gen-table クラスのstyleブロックが含まれます。編集または削除できます。
セルの結合やキャプションは追加できますか?
いいえ。ジェネレーターはヘッダー行が1つの単純なグリッドを作ります。さらに必要な場合は、コピーしたマークアップを編集してください。
影の広がりの値は何をしますか?
ぼかす前の影を大きくしたり小さくしたりします。正の値で大きく、負の値で小さくなります。
内側の影を作れますか?
はい。inset オプションにチェックを入れると、出力の末尾に inset キーワードが付きます。
入力内容はどこかに送信されますか?
いいえ。コードはブラウザ上で作成されます。