HTML5のタグ(31)

detailsタグというのがある。<details close>詳細情報</details>と書くと、横向きの三角マークの右にDetailsの文字。三角をクリックすると三角は下向きになり「詳細情報」の文字がDetailsの下に表示される。また<details open>詳細情報</details>と書くと、ページにアクセスした時に「詳細情報」が表示された状態となり、三角をクリックすると三角は横向きになり「詳細情報」の文字は消える。「詳細情報」の部分はいくらでも長い文章にしても大丈夫のようだが、元から下にあった通常のデータは下方向に追いやられるかたちのレイアウトとなるようなので、使い方には工夫もいりそうだ。対応ブラウザはChromeのみのようだ。


ウェブデザイナの苦言

市外局番

ウェブページに掲載する電話番号。例えば商工会や商店会の事業所や店舗の紹介で市外局番が省略されているものを見かける。恐らく地元で配布するリアルな名簿からテキストデータをコピーして作ったものなのだろう。しかし良く考えてみよう。ウェブページは日本中から見に来る人がいるわけで、自分の住んでいる地域以外の市外局番は普通は知らない。例え03でも入れておくべきだろう。


ウェブデザイナの苦言

HTML5のタグ(30)

SVG画像にテキストを組み込みことができる。Illustratorの塗りと線のようなものだ。線は内側に入るようなのでちょいと細身に見えるが、まあ、これも今までIllustratorで行っていた効果でブラウザ側でできてしむというもの。<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlinks="http://www.w3.org/1999/xlink"><text x="100" y="100" style="font-family:Arial; font-size:48pt; stroke:#ed5026; fill:#fdc744; kerning:1;">この文字が装飾されます</text></svg>といった感じだ。strokeが線、fillが塗りつぶし、kerningが文字間。今のところ実装しているのはChromeとFireFoxのみのようだ。


ウェブデザイナの苦言