これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
datalistでコンボボックス（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 18日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 18 日目 今日は <datalist> です。コンボボックスを作れます。 <datalist> – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/wvrdEeZ 基本的な使い方 <select> のように複数の <option> を子に持ちます。画面には描画されません。連携したい <input> の方からは ID を list 属性で指定します。 <input list="my-list" /> <datalist id="my-list"> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value
これは面白い！Photoshopで高性能なHTML/CSSエディタが使えるようになるプラグイン -HTML Block
PhotoshopのPSD上に、HTMLとCSSのコードでエレメントを作成できるPhotoshopのプラグインを紹介します。 外部スタイルシートにも対応した高性能で、Bootstrapのエレメントをといった使い方もできます。 HTML Block HTML Blockの特徴 HTML Blockのダウンロードとインストール HTML Blockの使い方 HTML Blockの特徴 HTML Blockは、Photoshop CC2015 for OS Xのみ対応で、Webkitエンジンを利用してHTMLとCSSのコードでエレメントを作成できます。 ↓左パネルがエディタに見えるかもしれませんが、Photoshop上でのHTML Blockです。
JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」
JSONデータをHTMLにマッピングできるjQueryプラグイン「JSON2HTML」を紹介します。 JSON2HTML １．概要 「JSON2HTML」はJSONデータをHTMLにマッピングするためのHTMLテンプレートエンジンです。 次のようなJSONデータがあるとします。 var data = [ { 'name': 'A', 'value': 10 }, { 'name': 'B', 'value': 20 }, { 'name': 'C', 'value': 30 } ]; たとえば、このJSONデータから次のようなHTMLを出力することができます。 <ul> <li>A (10)</li> <li>B (20)</li> <li>C (30)</li> </ul> jQueryプラグインとnode.jsパッケージの2種類が配布されています。 ２．ダウンロード JSON2HTML
Open Graph Protocol 付きで「いいね！」ボタンを設置する
Open Graph Protocol 付きで「いいね！」ボタンを設置する Permalink URL http://www.magicvox.net/archive/2011/02030020/ Posted by ぴろり Posted at 2011/02/03 00:20 Trackbacks 関連記事 (3) Post Comment コメントできます Category good egg on 2 Oct 2010 - day 275 Photo by Len Matthews フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 ...... 決まった OGP という書き方で
24種類の多彩な表示方法が楽しめるフリーの画像ギャラリー -Slideshow Box
HTML+JavaScript, HTML+swf, Flashで動作する、24種類の多彩な表示方法が揃った画像ギャラリーを紹介します。 HTML slideshows & Flash photo gallery templates _ Slideshow Box ※キャプチャは「24. Wall 3D」 まずは、その24種類の多彩な表示方法を紹介します。 特に目を惹いたのは、9, 12, 20, 22, 24です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
