無料お見積りブログ
BLOG
制作スタッフじゃない人が珍しいHTMLの活用方法を考えてみる
2023年12月にコーダーのもぐらさんが書いたこちらの記事、皆様お読みになったことはございますか？
コーダー歴1年目の新人が珍しいHTMLタグを調べてみた
https://wwg.co.jp/blog/t40300
営業アシスタントの私キャサリンは、この記事が大好きです。
というのも、入社7年目に突入したとはいえ、私は制作に関しては全然素人。
使えるHTMLと言えば改行の＜br＞タグと非表示の＜!-- --＞タグくらいです。
そんな私にとって、CSSなしで色々な表現ができる記事の内容はまさに楽しい魔法！
せっかくなら使って遊びたい！！
ということで、今回は以前紹介されたタグの活用方法を考えていきます。
ワードプレスの記事内という制限付きで、何ができるでしょうか？
※SEOやユーザビリティは今回考慮しないものとしています、ご了承ください。
目次
1.アコーディオン
元の記事では4つの項目で紹介しているのですが、今回はその中から2つを使っていきます。
まずはdetailsタグとsummaryタグを使ったアコーディオン。
<deatils></details>と<summary></summary>でテキストを囲みます。
ここをクリックすると・・・？
アコーディオンでドーン！！
このタグの活用方法として、王道でまず思いつくのはQ&Aへの利用でしょうか。
質問の数が多かったり、質問や答えの文章が長かったりすると、すべて表示した状態で並べてしまうとスクロールが長くなります。
また、あまり文字が多いと訪問者が圧を感じることも......。
そんなとき、このタグを使えば簡単に答えの部分を収納できます。
Q.見積りに費用はかかりますか？
A.お見積りは無料です！お気軽にご相談ください
Q.オンラインで打ち合わせ可能ですか？
A.可能です！お気軽にお申しつけください
同じようなもので、質問の代わりにクイズを載せることもできますね。
Q.アコーディオンの風を送る部分の名前は？
A.蛇腹（ベロー）
HTMLのタグだけだとあまり派手なことはできませんが、ただテキストを載せるだけよりひと手間かけた演出が可能になります。楽しい！
その他、この動きで思いつくのがまばたきです。
クリックすると目が開いてメニューが見えるとか、可愛いのでは？
「どうすれば目のように見せられるか」問題がクリアできたら行ける気がします！
（※素人の感想です）
2.メーター
次は、meterタグとprogressタグを使ったバーのようなもの。
meterタグ
progressタグ
こちらは見ての通り、物事の進行状況を表示するときに使えます。
通常、タグの中で数値を指定して使用します。
ただ、私が一番好きな左右に動くこちら。
タグの中を空欄にするとできるこの動き、初めて見たときから好きすぎて、絶対にどこかで使いたいと思っていました。
実は一度、記事の合間にスペース代わりに入れてみたこともあったのですが、そのときはあまりにも唐突すぎるという理由でお蔵入りしてしまったので、今回満を持して！
絶対にやりたかったのが、2つ並べて目を表現することです。
きょろきょろしていて可愛いですね！
ホームぺージ内の隠し要素としてひっそり置いておくと、気づいた方にフフッと笑ってもらえるかもしれません。（※個人の感想です）
ここで私、気が付きました。
アコーディオンがまばたきなら、この目と組み合わせられるのでは？
さっそくやってみましょう。
※クリックしてください
"" ""
バッチリまばたきです！まつ毛が可愛いですね！！
どこに、何の目的で使えるのかは謎ですが、個人的に大満足です。
ちなみに、装飾の記述を追加するとこんな風にカラフルなラインを作ることもできました。
インターネット初期の匂いを感じる仕上がりで、コーダーさんにこれを入れたいとお願いしても「ダサいですよ」と言われそうなので、今後自分のブログにカラフルなラインを入れたくなったら使っていこうと思います。（なかなかうまくできず、ChatGPTで2日間粘り続けたのは秘密です）
3.まとめ
今回はタグの活用方法を専門以外の人間が考えてみましたが、やってみて改めてわかるこの難しさ。
やはり餅は餅屋、タグのことはコーダーさんにお任せした方がいいですね。
ただ、あれやこれや考えてみる楽しさは経験することができました。
WWGのコーダーさんは「コーダーが天職！楽しくてしかたない！」と言っている人が多いのですが、その理由を少し感じられた気がします。
この記事の内容はいつかコーダーさんにきちんとテコ入れしてもらいたいと思っています。
その際はぜひ本職の力を感じていただければと思います！
愛知 県内から 名古屋 を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17 花車ビル南館5F
TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから
キャサリン
営業アシスタント
企画・開発部所属、2018年入社の営業アシスタント。
社内イチ業務内容が多岐にわたり、「制作以外のすべてを担う」と言われている、らしい。
渋沢栄一のお札を手に入れたので大事に取ってある。
