HTML をドローソフト代わりに使う

概略

HTML と CSS が分かると HTML をドローソフト代わりにすることができます。 ちょっとした図表は HTML と CSS で簡単に作成できます。 部品配置などパラメータの調整が CSS で容易になります。 Web ブラウザで表示した図をキャプチャーすれば画像ファイルも簡単に作れます。

• CSS の flex や position: absolute; を多用します。
  単純な表やブロック図の場合は absolute よりも flex の方が楽です。
  CSS flex
  細かい配置調整が必要な場合は position: absolute; で部品を絶対座標で配置します。
  CSS position: absolute;
  CSS position: absolute; (2) 画像を重ねる
  

サンプル

• パーツの class 名を表示しておくと CSS の編集が楽になります。
  TestCSS_content_display_attribute01.html
  CSS content

  #parent div::before {
  	content: attr(class) ":"; /* div の中に class 名を表示する */
  	color: #fff;
  	font-size: 9pt;
  	font-weight: normal;
  }
  

• 背景にグリッド線を入れておくと大雑把な座標が分かりやすくなります。
  CSS background
  

  

  TestCSS_draw3_1.html
  背景にグリッド線を入れ、パーツの class 名も表示するサンプル。

• 大きさが共通の部品のサイズや整列させたい部品の座標は、CSS の var 変数や calc 関数を使うと便利です。 複数の部品のサイズをまとめて変更したり 整列したりなどの調整を楽に行えます。
  CSS var変数、calc() 関数
  

  

  TestCSS_draw3_2absolute.html

• 単純な図の場合は CSS absolute よりも CSS flex でレイアウトした方が手っ取り早いです。
  

  

  TestCSS_draw3_2flex.html
  CSS: flex

• 矢印や曲線など CSS だけでは表現しにくいものは SVG 画像のパーツを使うと簡単です。
  

  

  TestCSS_transform_img1.html (2023/09)
  img 要素 (SVG の矢印画像)を CSS の transform で変形させるサンプル。 1つの SVG 画像だけ用意して CSS transform で回転させることもできます。
  CSS transform - 変形・回転など
  

  

  TestSVG_arrow01.html (2023/05)
  SVG の矢印のサンプル。 CSS transform の変形だけでは間に合わない場合は個別に SVG 画像を用意します。
  HTML: svg タグ

• 大きな画面サイズの Web ページを画像ファイルに保存する
  

  

  ウインドサイズよりも大きなページ (例: 5000x5000 画素など) も Web ブラウザの開発ツールで png 画像にしてファイル保存できます。
  

サンプルいろいろ (2024/04)

関連

• HTML: HTML をワープロ代わりに使う
• 大きな画面サイズの Web ページを画像ファイルに保存する
• HTML 次の一歩
• CSS flex
• CSS position: absolute;
• CSS position: absolute; (2) 画像を重ねる
• CSS background
• CSS var変数、calc() 関数
• HTML: svg タグ
• table と div を組み合わせる