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

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

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

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のテクニックを紹介します。 入れ子で実装？ と...記事の続きを読む 続きを読む

メールアドレスの正規表現 - @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 続きを読む

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

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 読みやすさが重要 「特殊なケース」は... 続きを読む

[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... 続きを読む

[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー | コリス

2011/04/04 453 users コリス ユーザビリティ CSS チュートリアル 見栄え

IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。デモページ：IE6での表示下記は各ポイントを意訳したものです。HTMLHTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。Home 続きを読む

MOONGIFT: » 複雑なWebサイトデザインを容易に実現するテンプレート「YAML」:オープンソースを毎日紹介

2009/01/31 338 users YAML マルチカラム MOONGIFT CSS スバラシイ

なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり... 続きを読む

Leo's Chronicle: 正規表現に見切りをつけるとき

2009/01/27 429 users Leo's Chronicle 正規表現 JSON perl

2009年1月27日 正規表現に見切りをつけるとき Perl, Rubyなど手軽に使えるプログラミング言語に慣れてくると、あらゆるテキストデータの処理に正規表現(regular expression)を使ってしまいがちです。 けれど実は、正規表現の処理能力を超えるフォーマットというのが存在します。その典型的な例が、XMLやJSONのように、入れ子になったデータフォーマットです。 例えば、 (a, ... 続きを読む

CSS のコメントの書き方コレアレ

2006/12/02 375 users CSS 差異 HTML 宣言 文字列

CSSもHTMLと同じように、ソース中にコメントを挿入することができます。 /*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。 適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハ... 続きを読む