とんでもないWebサイトに出会った！ https://t.co/yujdJ6kT5W Windows 98をCSSで完全再現してる…。しかも起動画面やBIOSの画面まで笑 メモ帳やペイントも使えるし、シャットダウンも出来る。… https://t.co/xSB4g09hpO
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
Updated 2013.10.21 / Published 2006.01.29 CSS はスタイルを適用する対象であるセレクタ（selector）とスタイル情報を設定する宣言ブロックの2つから成り立っており、宣言ブロックの中身は空にするか、プロパティ（property）と値（value）をセットにした宣言を記述します。この構成を CSS のルールセット（規則集合）と呼びます。 ルールセットはまず先頭にスタイルを適用する対象であるセレクタを記述し、続いて左中括弧（{）から始り対応する右中括弧（}）で宣言全体を囲むようにします。そして、中括弧（{ }）の中に0個以上の宣言を記述していきます（空でも良い）。宣言はプロパティと値をコロン（:）で仕切り、最後に値の指定が終わったことをセミコロン（;）で示します。図のルールセットであれば、p要素といった具体的な要素型名にのみ宣言した前景色（colo
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
もう 6年近く前の話なんですが、JamGraffiti さんが企画した CSS コーディングの大会、「画像の使用を極力控えてかっこいい CSS デザインをやってみよう大会」 を今さら思い出したので懐かしさついでに紹介。今の技術でやったらまた新しい発見があるかも。 2007年の 4月とかの話なので、もうかれこれ 6年近く前の話なんですが、JamGraffiti （@ichi23）さんが企画した、「画像の使用を極力控えてかっこいい CSS デザインをやってみよう大会」 ってのがありましてですね。 簡単に言えば 「css Zen Garden」 なんかと同じで、「同じ XHTML 文書に対してみんなで CSS 書いて、どんなデザインができるか遊んでみようぜ」 っていう試みなわけです。 と言っても、css Zen Garden が盛り上がってたのだって 2006年とか、所謂 Web 標準の啓蒙がと
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
ベンダープレフィクスはクソミソのゲロゲロ
Vendor prefixes are fucking batshit crazy - QuirksBlog この俺がベンダープレフィクス大嫌いだってぇのは皆もう知ってるよな。またやりやがったぜ。FirefoxとOperaのクソ野郎どもだ。 なんでかって？ device-pixel-ratioっつーメディアクエリーのせいだ。こいつにゃベンダープレフィクスがかかってやがる。もちろん、ベンダープレフィクスはよくないが、まあ、CSSの歴史的事情ってやつを考慮すると、まあ認めるしかないわな。 だが見てくれよこのコード。違いが分かるか。 -webkit-min-device-pixel-ratio: 1.5 min--moz-device-pixel-ratio: 1.5 -o-min-device-pixel-ratio: 3/2 分かったか？ つまり、お手軽スクリプトでベンダープレフィクス自動付
OperaもCSS3のグラデーション（gradient）に対応してたので実装方法を再度確認 | モノクロじみている
11/05/19OperaもCSS3のグラデーション（gradient）に対応してたので実装方法を再度確認time:11:50tag:CSS,Opera いつのまにやら前に書いたときよりCSS3のグラデーションの状況が変わってるみたいなんで。 Operaも最近CSS3のグラデーションに対応したみたい。最近と言っても2ヶ月前ですが。 あと、webkitの書き方。最初見たとき面倒臭ーと思っていたんだけど、mozillaと同じ書き方で良いんですね。 ということで統一されてるっぽいので、少しまとめ。 基本形 基本形と言っていいのかわからないが、一番シンプルなやつ。 サンプルbackground: -moz-linear-gradient(rgb(100,100,100), rgb(200,200,200)); /* Firefox */ background: -o-linear-gr
CSSで垂直方向の中央に配置するのがややこしい
CSSで、画像や動画を垂直方向の中央に配置したいと考えた。さっそくどのプロパティを使えばいいかググったのだが・・・どうもプロパティ一発というわけにはいかないようだ。もちろん、この問題は、いまさら知らなければモグリであるほどの古典的なものだが、CSSグルではない私は知らなかったので、書いておこうと思う。 もちろん、垂直に中央配置する方法はある。しかしどの方法も、汚いハックなのである。さらに、大抵の初心者が陥る問題がある。 まず誤解しやすいのが、vertical-alignプロパティであろう。これは名前が宜しくない。vertical-alignは、インライン要素のラインボックス（つまり文字列のレイアウト）の垂直方向の配置を指定するためのプロパティである。残念ながら、凡人が期待するようには動かない。 ただし、テーブルセルにvertical-alignを適用した場合のみ、凡人が期待するように動く。
Googleのページで「do a barrel roll」と検索すると画面が1回転するみたいです。 Google検索で「do a barrel roll」と検索すると画面がぐるりん！ – ロケットニュース24（β） http://rocketnews24.com/2011/11/04/149053/ このネタを聞いてすぐに以前にGIZMODEがエイプリルフールに行ったサイトへのいたずらを思い出しました。 GIZMODEのエイプリルフールネタに触発されてみた - 強火で進め http://d.hatena.ne.jp/nakamura001/20100331/1270053064 解説 今回も恐らくはCSS 3を使った実装に違いないと当たりを付けて調査した所、やはり予想通りでした。 該当箇所はこちら(見やすい様に整形しています)。 <style> @-moz-keyframes roll {
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
さぼてん: 【Javascript】CSSの値を取得する
Webサイト制作。PHPとかMySQLとかプログラム寄り。symfony、CakePHP。Perlと和解交渉中。 DOM:window.getComputedStyle var element = document.getElementById(“elemId”); var style = document.defaultView.getComputedStyle(element, pseudoElt); 概要 要素の算出スタイルを返します。算出スタイルは、要素に対して適用される全ての CSS プロパティにおいて最終的に算出された値です。 pseudoElt は、マッチさせたい疑似要素を指定する文字列です。通常要素には空文字列を指定してください。 詳細 返るオブジェクトは、要素の style プロパティから返るオブジェクトと同じ型ですが、2 つのオブジェクトの用途は異なります。getCo
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね！ さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ javascriptやphpを使わずに CSSだけで文字列を省略して「・・・」を付けて表示 させるテクニックを発見 前からできる感じだったが、つい最近知りました。 FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 どうやるかというと text-overflow: ellipsis; を使う。 ellipsis は、はみ出した部分の最後に「・・・」を付け足す。 ちなみに clip は、何もつけません。 text-overflow: ellipsis; だけだと上手くいかないので やり方としては、 横幅(width)、w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
