Web制作者は要チェック！ Chrome 131で新しく追加された8つのCSSの機能

2024/11/14 14 users CSS 要チェック WEB制作者 機能 アップデート

Chrome 131で追加された、CSSの新しい機能8つを紹介します。 今回のアップデートでは、CSSのハイライト継承が変更されたり、details要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを使用した印刷レイアウトが簡単になるなど、Web制作者は要チェックです！ New in Chrome 131 Chrome 131 beta 下... 続きを読む

タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG

2024/04/02 12 users Hidden None TAKLOG display タブ

タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるhidden="until-found"はhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキ... 続きを読む

これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます

2024/01/11 90 users details ウィジェット 連動 かなり 個別

<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動... 続きを読む

非表示コンテンツはSEO的にOK？NG？アユダンテが徹底検証 | アユダンテ株式会社

2022/10/13 11 users アユダンテ インテ アユダンテ株式会社 MFi 徹底検証

アコーディオンで折り畳まれたものなど、初期状態で隠れている非表示コンテンツはSEO観点で問題がないものなのでしょうか？ この記事では非表示コンテンツのGoogleからの評価を調査し、非表示コンテンツの適切な対応について紹介いたします。 隠れているコンテンツのGoogleからの評価 MFI（モバイル・ファースト・インデ... 続きを読む

JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI

2022/02/14 16 users モーダル タブ UIコンポーネント 各UIコンポーネント 個別

アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。 各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。 CSSUI MITライセンスで... 続きを読む

「朝鮮学校の高校無償化排除やめて」日本人有志の抗議運動450回に | 毎日新聞

2021/12/05 15 users 毎日新聞 タンバリン 朝鮮学校 高校無償化排除 自営

火曜日行動は正午から30分ほど。アコーディオンやタンバリンなどを手にした「火曜日バンド」が参加してメッセージを込めた歌の合唱もあり、抗議と言っても柔らかな雰囲気だ。30～40人の参加者の多くは日本人で、各地の朝鮮学校に子どもを通わせる母親や生徒たちも交代で駆け付け、現状を訴える。 奈良県大和高田市の自営... 続きを読む

アコーディオンのアイコン：どのシグニファイアが最適か – U-Site

2021/04/08 13 users U-Site シグニファイア UI要素 アイコン ユーザー

キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 アコーディオンが、現在、人気のあるUI要素で... 続きを読む

detailsを使ってHTMLとCSSのみでアコーディオンを実装する | Pulp Note

2021/03/29 10 users Polyfill details アニメーション CSS 質問

よくある質問でよく利用するアコーディオン機能をHTMLのみで実装する方法です。アニメーションはCSSで実装し、JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。 続きを読む

横山アキラさん死去、88歳　音曲漫才　「お～ま～え～は～ア～ホ～か～」 - 毎日新聞

2020/12/11 30 users 毎日新聞 腎不全 エレキギター 未定 葬儀

音曲漫才の兄弟トリオ「横山ホットブラザーズ」のリーダー、横山アキラ（よこやま・あきら、本名・彰）さんが9日、腎不全のため死去した。88歳だった。葬儀は近親者で営んだ。お別れの会は未定。 アキラさん（ギター）、マコトさん（アコーディオン）、セツオさん（エレキギター）の3人組で、楽器を交えた掛け合い漫才で... 続きを読む

CSSのみでアコーディオン・2パターン | かちびと.net

2019/06/15 28 users CSS net absolute result checked

Result 今更感半端ないですが、CSSのみでアコーディオン 全部開けられるやつと1つ開けると他が自動で閉まるやつの2パターンあります 両方ともinput要素と:checkedを使います 違いはcheckboxかradioか、なので基本的には同じコードで動きます css input {/*input要素自体は非表示にしておく*/ position: absolute; opacit... 続きを読む

CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン | Webクリエイターボックス

2018/11/14 207 users details CSS Webクリエイターボックス 補足説明

2018年11月14日 CSS, HTML5 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部... 続きを読む

Nintendo Laboコンテスト受賞作品発表。太陽光を使ったアコーディオンなど9作品 - Engadget 日本版

2018/07/16 182 users 太陽光 Engadget 日本版 9作品

米Nintendoが開催していた、Nintendo Laboを使った創作コンテスト「Nintendo Labo Creators Contest」の受賞作品を発表しました。 Nitendo Laboは、SwitchのToy-Conに搭載されているセンサーやスイッチ類を使い、段ボールを組み合わせてピアノや釣り、ラジコンなど様々な遊びを行えるもの。また、Toy-Conガレージを使用... 続きを読む

どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS | コリス

2018/05/18 250 users モーダル コリス パララックスエフェクト スライダー アイコン

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに... 続きを読む

モバイルサイトのサブナビゲーション – U-Site

2017/11/16 61 users U-Site モバイルサイト 下位カテゴリー 実装方法 うち

モバイルサイトのサブナビゲーションの主な実装方法としては、アコーディオンやシーケンシャルメニュー、セクションメニュー、カテゴリーランディングページが挙げられる。このうちのどれがそのサイトに最適なのかは、IAにある下位カテゴリーの数やサイトでのユーザーの移動パターンによって決定される。 Mobile Subnavigation by Raluca Budiu on July 16, 2017 情報ア... 続きを読む

「トランプのスピーチを二度と前のように見られなくなる」、喋りながらアコーディオンを演奏するトランプのムービーがYouTubeで公開中 - GIGAZINE

2017/01/17 129 users GIGAZINE YouTube スピーチ 二度 両手

2017年01月17日 20時00分00秒 「トランプのスピーチを二度と前のように見られなくなる」、喋りながらアコーディオンを演奏するトランプのムービーがYouTubeで公開中 ドナルド・トランプ氏がスピーチで両手を動かす様子にアコーディオンの映像と音を合成させ、トランプ氏のスピーチに合わせて軽快な音楽が奏でられるムービーがYouTubeで公開中です。「トランプ氏のスピーチを二度と前のように見られ... 続きを読む

[jQuery] レスポンシブWebデザイン対応のメガメニュー - かちびと.net

2016/02/02 25 users jQuery ウインドウサイズ ウィ net ドロップダウン

Result See the Pen megamenu.js – Last responsive megamenu you’ll ever need by Mario Loncarek ( @riogrande ) on CodePen . ウィンドウサイズが943px以上はドロップダウン、以下の時はクリックで開閉するアコーディオンのメガメニュー。上記デモはモバイル向けになっていると思います。ウィ... 続きを読む

Wordpressのメニューとサイドバーをスマホ用に横からスライドイン表示させるカスタマイズ方法

2015/03/19 60 users WordPress グローバルナビ モーダル 本文 サイドバー

WordPressテーマのスマホ表示は、結構頭を悩ませるところです。 中でも特に、グローバルナビメニューや、サイドバーのスマホでの扱いには悩むところです。 僕はこれまで、グローバルナビの場合は、非表示にしておいて、アコーディオン表示させるか、モーダル表示させるかしていました。 サイドバーの扱いはもっとぞんざいで、回り込みを解除して、本文の下に表示させるということぐらいしか、できていませんでした。 ... 続きを読む

グリッドからナビゲーション、スライダー、フォームなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワーク -Responsive Framework | コリス

2014/12/12 52 users コリス フレームワーク スライダー グリッド コンポーネント

ページのグリッドをはじめ、ナビゲーション、スライダー、タブ、アコーディオン、フォーム、ショッピングカートなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワークを紹介します。 Free Responsi...記事の続きを読む 続きを読む

[JS]WordPressにも最適！シンプルなHTMLをさくっとアコーディオンにしてしまうスクリプト -Magic Accordion | コリス

2014/09/25 45 users コリス jQuery スクリプト 切替 見出し

h2の見出し、コンテンツ（テキストや画像）、h2の見出し、コンテンツ（テキストや画像）、、、と実装されたシンプルなHTMLをアニメーションで開閉するアコーディオンにするjQueryのプラグインを紹介します。 ↓上の赤いボタンは切替で、見出し付きのコンテンツをアコーディオンにしています。 「Some amazing header」「And yet another」が見出しです。 Magic Acco... 続きを読む

FICC Workbook

2014/08/28 29 users Evernote vim 見出し 視認性 メモ

FICC inc. 制作スタッフの学習帳にわかVim使いです。 いっちょまえに指使いだけはVimに調教されたので、Evernoteなんて使ってられません。 メモをとる時もVimです。 Vimの折りたたみ機能を使うとメモ書きの視認性がぐぐっ上がるので、折りたたみ機能の基本を紹介してみます。 どんな機能？ Webサイトによくあるアコーディオンみたいな機能 こんな感じに見出しとか読みやすいように適当に付... 続きを読む

デスクトップの複雑なコンテンツに対するものとして、アコーディオンが常に答えになるとは限らない – U-Site

2014/07/09 73 users 見出し アコーディオンメニュー 垂直方向 ユーザー リスト

アコーディオンメニューとは見出しを垂直方向に並べたリストで、見出しをクリックすることでそれに関連したコンテンツを出したり、見えなくしたりできるもののことである。これはコンテンツをユーザーに徐々に見せる方法の1つで、広げたり、あとで見るために隠したままにすることでコンテンツをコントロールできるので、読むものと無視するものをユーザー自身で決められる。ユーザーがコントロールできるようにする、というのは、... 続きを読む

最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills | コリス

2014/04/16 387 users Refills コリス ブッダ モーダル ヘッダ

ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。 Refills Refills -GitHub デモでは、さまざまなコンポーネントの動作が確認できます。 ナビゲーション 下に半分見えてるのは、打ち出しコンテンツ 各デモの「Show C... 続きを読む

レスポンシブWebデザインやスマートフォンサイトに最適なメニューを実装できるプラグインやチュートリアル 25 | NxWorld

2014/02/13 180 users NxWorld ウインドウサイズ セレクタ チュートリアル

いずれもメニューを実装する際に便利なプラグインやチュートリアルで、もちろんPCサイトでも問題なく使えますが、レスポンシブWebデザインやスマートフォンサイトといったサイトを制作する際には特に便利なものです。サイドからスライドしてくるものやウィンドウサイズが狭まるとセレクタやアコーディオンに変化するものなど、見せ方も様々なタイプがあります。ずらっと並んではいますが、大まかに同じような動きをするものは... 続きを読む

あ、アコーディオン!?　と見紛うキーボード、背面からの高速タイプが可能 : ギズモード・ジャパン

2014/01/07 10 users iPhone ギズモード CES 背面 ジャパン

Android , CES , Mac/PC関連 , iPad/iPod/iPhone/iTunes , イベント , キーボード , レポート , 周辺機器/グッズ , 携帯電話 あ、アコーディオン!?　と見紛うキーボード、背面からの高速タイプが可能 2014.01.07 17:00 とりあえず触りたい！ このカーブした板みたいなもの、キーボードなんです。CESで見つけたこちらはTrewgrip... 続きを読む

ナタリー - 椎名林檎、“電気楽器禁じ手”15周年ライブで計22曲披露

2013/11/29 32 users ナタリー 椎名林檎 王冠 ピアノ ロングドレス

椎名林檎がデビュー15周年ライブ「椎名林檎十五周年 党大会 平成二十五年神山町大会」を5日間にわたって実施した。この記事では彼女の誕生日に行われた11月25日公演の模様をレポートする。 東京・Bunkamuraオーチャードホールの幕が上がると、総スパンコールのロングドレスに身を包み王冠を頭に載せた椎名林檎がステージに登場した。ピアノとアコーディオンのみをバックに1曲目「都合のいい身体」を伸びやかな... 続きを読む