CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン
2018年11月14日 CSS, HTML 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。 HTML <details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。 </detai
HTML5タグ articleやsectionなど 構造化タグ 初心者向け
構造化タグとは何だ？HTMLはそもそも文書構造を整え、コンピューター伝える役割を持つ言語ですが、HTML4以前は、その構造を明確に伝えるタグはほとんどありませんでした。「body」以下は、「h」タグくらいだったんでしょうね。 HTML5はそれを解決するために登場したわけです。 HTML5でのサイト構築が一般化され、「セマンティックSEO」の存在も知れ渡ってきました。 文章の意味を明確にコンビューター（検索エンジンのクローラーとか）に伝えることで、そのコンテンツがどんなことを言わんとしているかを認識させやすくしているわけですね。 検索エンジンは、検索するユーザーにとって欲しいであろう情報を返してあげたいので、意味がわからないコンテンツよりも、意味のわかるコンテンツの方が、「ユーザーに役立つだろう、たぶんね」って感じで、評価が高いだろうという考え方です。 実際どうだかわかりませんが、実生活でも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
