カード UI の入れ子のリンクの問題を解決する Link Area Delegation の提案

2024/12/21 22 users 挙動 ウェブサイト 提案 タグ カード

多くのウェブサイトではリンクを入れ子にしたカード UI が利用されています。入れ子されたリンクとは以下のようなものです。 このような UI ではカード全体をクリックした場合にはカードのリンク先に遷移し、カード内のタグをクリックした場合にはタグのリンク先に遷移するという挙動が期待されます。この挙動を簡単に H... 続きを読む

リンクの入れ子は subgrid が最適解かもしれない

2024/03/27 87 users subgrid クリッカブル 最適解 リンク https

はじめに リンクの入れ子とは何かというと、以下のようなデザインです。 カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。 しかし、以下のようにマークアップすることはできません。 <a href="https:... 続きを読む

marquee 入れ子 どうなる - hogashi.*

2023/07/11 44 users Marquee Direction hogashi div

<marquee scrollamount="1" direction="right"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="9"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> </marquee... 続きを読む

「Google Chrome 112」安定版リリース、CSSがネストに対応

2023/04/05 5 users ネスト CSS developer.chrome.com

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン112.0.5615.49(Linux版・Mac版)・112.0.5615.49/50(Windows版)がリリースされました。この更新からCSSがルールのネスト(入れ子)に対応するようになりました。 New in Chrome 112 - Chrome Developers https://developer.chrome.com/blog/new-in-chrome-112/... 続きを読む

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた

2022/11/18 168 users Sass ネスト CSSネスト CSSコーディング CSS

先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。 続きを読む

CSSでこんなことができるの知ってた？ 要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック

2022/07/13 241 users CSS コンテナ ボーダー 実装 テクニック

h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。 入れ子で実装？ と...記事の続きを読む 続きを読む

知らなかった！ Macの｢Optionキー｣でできること10選 | ライフハッカー［日本版］

2021/09/21 18 users Optionキー ライフハッカー Mac ワンクリック ご存知

Macを長く使っている人は、Optionキーの秘密をよくご存知かもしれません。 Optionキーは、非表示のメニューを表示したり、入れ子になったフォルダを展開する機能など、便利な機能をワンクリックで呼び出すことができます。 Macを使い始めて間もない人や、キーボードをあまり触ったことがない人は、謎に包まれたOptionキ... 続きを読む

CSSにおけるマージンの相殺を徹底解説 | コリス

2021/01/21 28 users コリス パディング マージン 相殺 CSS

CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざま... 続きを読む

GoでXMLを処理する - Qiita

2017/12/17 11 users ストリーミング Qiita xmlファイル 規則 XML

これは、 Go Advent Calendar 2017 その1 の17日目の記事です。 はじめに GoでXMLを処理する際にシンプルなXMLファイルはともかく、入れ子になってたり、XMLがストリーミングで送られてきたりする場合にそれぞれ書き方の工夫が必要だったのでまとめました。 加えてXMLの各要素を構造体に紐付けるにあたって従うべき規則があることを学んだのでそちらも合わせて説明します。 今回や... 続きを読む

Google Compute Engine、仮想マシンの入れ子（Nested Virtualization）を可能に。KVM対応 － Publickey

2017/10/01 42 users ベータ Publickey ディ サーバ オンプレミス

Googleは、Google Compute Engineの仮想マシンの上でさらに仮想マシンを実行できる「Nested Virtualization」をベータ公開したと 発表しました 。 Nested Virtulizationを用いることで、オンプレミスなどのサーバの仮想環境で動作しているシステムのイメージをそのままGoogle Compute Engineに持ち込むことが可能なため、例えばディ... 続きを読む

何この壮大なるSFファンタジー！都市の映像を入れ子のように組み合わせ多重構造を持たせた立体都市タイムラプス映像「Urban Conformation 74:19」 : カラパイア

2015/11/25 28 users カラパイア 万華鏡 ディテール SFファンタジー 造形

都市部の建造物などの映像や写真を入れ子のように組み合わせ、万華鏡のように動かしたら、壮大なる多重構造のSF都市が出来上がった！ その造形の変化を楽しんだり、元となった写真や映像のディテールを楽しんだり、ずっと眺めていたくなるのタイムラプスショートフィルム。ま次元を超えたパラレルワールドで2つの代替世界の戦いが行われているようだ。 続きを読む 続きを読む

二枚の板があっという間に収納家具へと変身！【FRAMES 2.0】｜インテリアハック

2015/02/11 39 users インテリアハック 格子状 変身 木製フレーム フレーム

二枚の板があっという間に収納家具へと変身！【FRAMES 2.0】 Posted by hazat in 収納・本棚 On 2月 11, 2015 『FRAMES 2.0』は、ショップディスプレイなどにもぴったりな組み立て式家具です。 サイズの異なる複数の木製フレームで構成されたこちら。それぞれのパーツを組み合わせることで、格子状の収納家具を作り出すことが出来ます。 フレームは入れ子になっていて二... 続きを読む

メールアドレスの正規表現 - @tmtms のメモ

2014/09/08 268 users たいてい 形式 文字列 tmtms メモ

2014-09-09 メールアドレスの正規表現 たまにメールアドレスの形式を正規表現で表すのは不可能とかというのを目にするのですが、そんなことはありません。入れ子がなければたいていの文字列の形式は正規表現で表すことができます。 ということで、RFC5321, 5322 からメールアドレスの正規表現を書いてみました。 /\A([0-9a-z!\#$%&'*+\-\/=?^_`{|}~]+(\.[0-... 続きを読む

vimでtodoリストを書くためのtips - Qiita [キータ]

2013/08/13 66 users leader Space キータ ラク Qiita

vimでmarkdown書ける前提で、以下のような設定を書くと- [ ]のようなtodoリスト記法をラクに書いたり、Leader（僕の場合はSpace）でオン・オフを切り替えられるようになる。 " todoリストを簡単に入力する abbreviate tl - [ ] " 入れ子のリストを折りたたむ setlocal foldmethod=indent " 折り返された行にもjkで移動する nno... 続きを読む

[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック | コリス

2013/04/18 289 users border-radius コリス 絵筆 div ラッパー

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 HTMLはdiv要素が一つだけで、ボーダーも単にborderとborder-radiusを使用しているだけです。 デモページ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 [html] This is my para... 続きを読む

JavaScriptと非同期のエラー処理 - Yahoo! JAPAN Tech Blog

2013/02/19 157 users Yahoo 非同期 エラー処理 JavaScript 例外

Yahoo!デベロッパーネットワークの中野(@Hiraku)です。前回のコールバック地獄に関する記事では、複雑な入れ子になりやすい非同期処理でも、GeneratorやjQuery.Deferredを使うことで、同期的な見た目に変形できることを示しました。 ところで、非同期処理においてはもう一つ「 エラー処理に例外が使えない 」という問題があります。今回はエラー処理について考えてみたいと思います。 ... 続きを読む

[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu | コリス

2012/11/19 133 users item コリス スクリプト HTML アニメーション

ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 [html] item... 続きを読む

IE8から始めるテーブルレイアウト と IE10からのFlexible Box｜Web Design KOJIKA17

2012/11/08 94 users Flexible Box テーブルレイアウト IE8 IE1

テーブルレイアウトと聞くと<table>タグを使い、入れ子で<tr>, <td>タグのオンパレードを連想する人も多いと思いますが、今回の内容はCSSの display: table; を使用したテーブルレイアウトの話です。 display: table; はCSS2.0からある仕様です。 要素をCSSでテーブルのようにあしらうことができるため、多くの利点があります。 display: table;... 続きを読む

Postfixの管理に使える仮想メールアドレス管理ソフトウェア「ViMbAdmin」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2012/10/04 68 users postfix MOONGIFT ITエンジニア 転送メール

メールアドレスの管理というのは意外と煩雑になりがちです。特に転送メールなどで入れ子になっていたりすると非常に面倒な管理になるでしょう。そこでWebブラウザ上で分かりやすい管理ができるViMbAdminを使ってみましょう。 0 続きを読む

ネストされたリストにも対応のドラッグ&ドロップによる要素の入れ替えを可能にするjQueryプラグイン・Nestable - かちびと.net

2012/06/19 45 users ドラッグ＆ドロップ net 要素 リスト iPhone

入れ子のリストにも対応した、 ドラッグ&ドロップによるソート 可能なjQueryプラグインの ご紹介。jQuery UIを使うほど でも無いような時はこういう のあると嬉しいですね。 ネスとされたリストのソートをドラッグ&ドロップで可能にするjQueryプラグインです。非圧縮で13KBほど。うまくキャプチャ撮れなかったですけど、iPhoneでも動きました。 Nestable ネスとされたリストでも... 続きを読む

外気が高いほど内部が冷える「原始的なクーラー」の作り方 : ライフハッカー［日本版］

2012/06/14 296 users 外気 エコロジー クーラー 防犯 飲料

DIY , エコロジー , 生活術 , 節約術 , 防犯・防災 外気が高いほど内部が冷える「原始的なクーラー」の作り方 2012.06.14 13:00 「zeer pot」という、気化熱を利用して食品や飲料を冷やす昔ながらのクーラーがあります。作り方はいたって簡単。使うものは「砂」と「水」、そして「入れ子にできる大きさの植木鉢2つ」だけです。 記事冒頭のデモビデオは、zeer potの基本的な作... 続きを読む

禅 of Python: 20の格言 - 西尾泰和のはてなダイアリー

2012/03/17 63 users 暗黙 西尾泰和 Python 単純 複雑

Pythonには "Zen of Python"という、Pythonの設計原則を簡潔に20個の格言にまとめたものがあります。それを単純に翻訳しても伝わりにくいだろうなぁと思ったので、訳注をたくさんつけて翻訳してみました。 美は醜より良い 明示は暗黙より良い 単純は複雑より良い 複雑なほうが理解しにくいよりは良い *1 平坦は入れ子より良い 疎は密より良い *2 読みやすさが重要 「特殊なケース」は... 続きを読む

最低限の高さ・幅を保ったボックスの中で、入れ子のボックスを上下中央配置するサンプル | バシャログ。

2012/02/07 28 users ウィンドウ ソースサンプル バシャログ 言葉 上下中央

こんにちは、まだ1月感覚の抜けない箱石です。 ただでさえ短い2月、気がついたら「そんなのあったっけ？」になってそうでどうしよう。 さて、今回は最低限の高さ・幅を保ったボックスの中で、入れ子のボックスを上下中央配置するソースサンプルをご紹介します。 言葉では伝えにくいので早速サンプル。 最低限の高さ・幅を保ったボックスの中で、入れ子のボックスを上下中央配置 ウィンドウを広げたり縮めたりしてみてくださ... 続きを読む

[CSS]可変でも固定でも対応できる、シンプルなグリッドシステム -Grid | コリス

2011/07/03 211 users グリッドシステム grids Grid コリス class

FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。 デモページ：入れ子のグリッド Gridの使い方 Gridは、使い方も簡単です。 コンテナとなる要素のclassに「grids」を加えます。 子要素に望むサイズのclassを指定します。 Gridのスタイルシート 2011年7月1日リリース版のスタイルシートです。... 続きを読む

押さえておきたいHTML5におけるタグまわりの変更点｜Webpark

2011/05/06 60 users 英訳 Webpark なか 参考 HTML4

最近ぼちぼちHTML5を勉強しているところですが、そのなかで個人的にへぇ〜と思ったタグまわりでの変更点を5つ紹介します。今回は本家W3CのHTML5 differences from HTML4を参考にしました。雑な英訳もあると思いますがご勘弁ください。 strong要素を入れ子にできる まず、strong要素の意味についてHTML5では　"The strong element now repre... 続きを読む