タグ

2017年5月31日のブックマーク (2件)

  • HTMLで分岐(ツリー図・チャート図)を表現する方法を考えてみる

    こういう分岐図をHTMLで表現するときに、どうすればきれいに表示できるか結構悩みます。 (上の写真はエクセルで簡単に整えてスクリーンショットを撮りました。) ゲームの攻略とかでスキルツリーとか開発チャートとか進化図とか分岐することがよくありますが、なかなかHTMLだけで表現するのは難しいものです。 PREタグと罫線文字を使って分岐を表現する昔からある手法ですがPREタグと罫線文字を使って分岐を表現できます。 文字しか使えない掲示板とかでもよく見るかもしれませんね。 PREタグ整形済みテキストを表示するときに使います。 ソースコードやアスキーアート(AA)を表示するときに利用できます。 スペースや改行がそのまま表示されます。 テキストエディタなどであらかじめ整えておくと良いかと思います。 これを実際にHTMLで表示するとこうなります。 コーヒーカップ ┃ メリーゴーランド ┏━━━━━┻━━

    HTMLで分岐(ツリー図・チャート図)を表現する方法を考えてみる
  • 最近、静的なウェブサイト(ホームページ)の利点を見直しているという話

    「静的なホームページ」という昔ながらのウェブサイトがあります。 「性的」ではありません「静的」です。 静的なホームページとはホームページ・ビルダーやメモ帳などでHTMLタグを直打ちして作った方も多いかもしれません。 単に「ホームページ」というとHTMLを直打ちして作った昔ながらのウェブサイトというイメージがしますね。(ホームページの来の意味は別にあるのですが。) これがなかなか大変で、たとえばリンクを修正しようと思ったら、全てのページのリンクを一つ一つ修正しなければならないなど、何かをするたびに手間がかかりやすいというのが静的なホームページの特徴です。 今は、その静的なホームページがかなり少なくなってきました。 というのはブログなどに代表されるような「動的」なウェブサイトが増えてきたからです。 動的なウェブサイトとはブログはHTMLの知識がなくても、決められたフォームにタイトルや文章を打

    最近、静的なウェブサイト(ホームページ)の利点を見直しているという話