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

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

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

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

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

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

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

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

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