車いすなコーダーAbout小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。赤い電動車いすに乗って生活をしています。不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。FebHTML5見出しと長い説明文のセットで情報を掲載したい場合によく使われるアコーディオンですが、HTML5で追加されたタグを使うとなんと、CSSにもJSにも依存することなくアコーディオンが実装できちゃうのです!!いやいや、、便利な時代になったものです。Edgeは非対応ですコンテンツ一覧detailsとsummaryについてdetails詳細折りたたみ要素という扱いで、実装したいアコーディオンの数だけセットで記述する形となります。この要素の最初の子要素としてsummaryタグがラベル(見出し)の役割で使用されます。summary概要明示要素という扱いで、主にdetailsタグの最初の子要素としてラベル(見出し)に使用されます。上記で紹介した2つのタグは、次のような形で使います。ラーメンとは、中華麺とスープを主とし、様々な具を組み合わせた麺料理。漢字表記は拉麺、老麺または柳麺。別名は中華そばおよび支那そば、南京そばなどである。中華人民共和国や中華民国では日式拉麺または日本拉麺と呼ばれる。焼肉とは、牛・豚などの肉を焼いたもの。肉や内臓にタレをつけ、直火で焼きながら食べる料理である。寿司とは、米飯と主に魚介類を組み合わせた日本料理である。大別すると、酢飯と生鮮魚介を用いた「早鮨」と、魚介類を飯と塩で乳酸発酵させた「なれ鮨」に区分される。</details>このようにHTMLを記述するだけで、クリック開閉可能な3つのアコーディオンが実装されるのです!ビックリするぐらい超簡単ですね!サンプルはこちら!サンプルを確認するコンテンツ一覧へ戻るラーメンだけ初めから開いておきたい先程のマークアップ例で言うと、ラーメン焼肉寿司の3つのアコーディオンで構成されてましたね。その内の1つ目であるラーメンだけを初めから開いておきたい場合、次のようになります。ラーメンとは、中華麺とスープを主とし、様々な具を組み合わせた麺料理。漢字表記は拉麺、老麺または柳麺。別名は中華そばおよび支那そば、南京そばなどである。中華人民共和国や中華民国では日式拉麺または日本拉麺と呼ばれる。焼肉とは、牛・豚などの肉を焼いたもの。肉や内臓にタレをつけ、直火で焼きながら食べる料理である。寿司とは、米飯と主に魚介類を組み合わせた日本料理である。大別すると、酢飯と生鮮魚介を用いた「早鮨」と、魚介類を飯と塩で乳酸発酵させた「なれ鮨」に区分される。</details>変わっているのはハイライトされた1行目のみで、openという属性が追加されているだけですね!コンテンツ一覧へ戻るCSSでアレコレCSSもJSも不要でアコーディオン自体は動くのですが、デフォルトだとちょっと素っ気無い感じがするので、CSSで少し見栄えを整えていきたいと思います!要所要所の紹介になりますので、まずは全貌を見たいという方はこちらからご確認ください!サンプルを確認するsummaryタグのデフォルト黒三角を消すデフォルトの状態ですと、次のように黒い三角がアイコンとして表示されます。Safariでは手法が違いますので、注意してください。none;}あ、ついでにカーソルがポインターになるようにしておきましょう。Awesome」を使用し、summaryタグのアイコンを装飾していきたいと思います。閉じている時はプラスアイコン、開いている時はマイナスアイコン。いうようにしたいと思います。ん...つまり開いている状態をCSSで指定できる必要がありますね。はい、このようにすると開いている状態を指定することができます。20px;}font-familyとmargin-rightは両方とも共通の部分になりますね。'\f068';}プラスアイコン→マイナスアイコンに変更しているだけの記述になります。Edgeでは残念ながらまだNGであったり、アニメーションを付けようと思うとちょっと現実的ではなかったりと、まだまだ発展途上な点もありますが、便利な時代になったなぁとつくづく感じております。Posts2019.07.15「別のプログラムがこのフォルダーまたはファイルを開いているので、操作を完了できません。