どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
え！Photoshop？って見間違うほどのUIを備えたCSSジェネレーター -LayerStyles
Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
[CSS]3枚の画像を使って、立体的なキューブ状にするスタイルシート
Building a 3D Cube With HTML5 and CSS3 デモ [ad#ad-2] 画像はdiv要素で実装されているため、CSSオフ時は上のキャプチャの左のように表示されます。 使用している画像はサイズ100x100の3枚で、下記のようになります。 画像のキャプチャ 実装は、下記のようになります。 HTML HTMLには、HTML5を使用しています。 <div class="cube"> <div class="face top"><img src="img/WPN-P.png" width="100" height="100"></div> <div class="face left"><img src="img/WPN-W.png" width="100" height="100"></div> <div class="face right"><img src="i
[CSS]CSSスプライトの利点と潜在的な問題点、そして解決方法
CSSのテクニックに中でも最も使用されている一つ、CSSスプライトの利点と潜在的な問題点、そしてその解決方法を紹介します。 Transparent CSS Sprites デモ [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに CSSスプライトの利点と潜在的な問題点 CSSスプライトの潜在的な問題の解決方法 解決方法のデモ おわりに はじめに 最近のフロントエンドの開発に必要不可欠なテクニックの一つにCSSスプライトがあります。このテクニックはA List Apartの記事「CSS Sprites」によって普及されたものです。 CSSスプライトは一度理解したら本当にシンプルなテクニックで、あらゆる方法に応用することができます。一般的に利用されるのはナビゲーションで、他にもボタンや見出しにも使用されています。 スプライトは複数のイメージを一つのファイルにマージして使用します
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
[CSS]モバイル端末にも対応、ブラウザごとに異なるデザインのフォームを美しくするフレームワーク -Formalize CSS
既存のフォームにも簡単に適用できる、各ブラウザ、各OSや各モバイルごとのフォームの異なるデザインのギャップを埋め、美しくするフレームワークを紹介します。 Formalize CSS デモページ [ad#ad-2] サポートしているOSはWindow, Mac OS X, Linux、ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Opera、モバイルはAndroid, iOS(iPhone, iPad)などです。 下記のキャプチャは、Windows XP + Firefox 3.6のものです。 他の各ブラウザやモバイルでの表示は、元記事の下部「Screenshots」に掲載されています。 Formalize CSS Formalize CSS：ノーマル時の表示
[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
ウェブデザイナーのための実用的なデザインとコーディングテクニック集
Five Useful Design Techniques and Coding Solutions For Web Designers [ad#ad-2] 下記は各ポイントを意訳したものです。 PHPはWordPressでのものとなっています。 1. 複数の項目がある棒グラフのエフェクト 2. ホバー時に追加情報を表示 3. カテゴリごとに異なるカラーを適用 4. ちょっと面白い画像のキャプション 5. ウェブのための印刷風デザイン おわりに -developersではなく、designers 1. 複数の項目がある棒グラフのエフェクト 下記のサイトで使用している棒グラフでは、上：タグの種類と数、下：コメントのついた記事と数、をそれぞれ素晴らしいエフェクトで実装しています。 こういった数値化されたデータは、ユーザーに対して有用なコンテンツの手がかりを提供し、ユーザビリティを改善することに
黄金比にも対応したグリッドレイアウト用のシンプルなCSSのフレームワーク -The Square Grid
2, 3, 4, 6, 9, 12, 18の均等分割をはじめ、黄金比の分割にも対応したグリッドレイアウト用のCSSのフレームワークを紹介します。 The Square Grid [ad#ad-2] The Square Gridのグリッド設計 グリッドの全幅は994pxで、両端に余白7pxをとり、残りの980pxを均等に35分割したものをベースにしています。 均等分割のカラム
[JS]画像をさまざまなアニメーションで拡大表示するスクリプト -imgZoom
imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズ フェードや回転のアニメーションで画像を拡大 ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法 外部ファイル 下記の3ファイルを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="sc
ブログアフィリエイトで稼ぐのに役立った「最強ツール」２７選【保存版】
検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力
[CSS]条件付きコメントを使用した際にレンダリングを早くするテクニック
IE用に条件付きコメントを使用してスタイルシートを配置した際に、ブラウザのレンダリングをすこし早くするテクニックを紹介します。 ※下記の画像はクリックで拡大 Conditional comments block downloads 上：test 1の測定結果（適用前：CSSの後に読み込み開始） 下：test 2の測定結果（適用後：CSSと並列で読み込み） [ad#ad-2] 下記は上記ページを参考にしたものです。 はじめに スタイルシートの構成 test 1：ごく普通に条件付きコメントを使用 test 2：条件付きコメント使用時に並列読み込みを可能にする その他の解決方法とまとめ はじめに 条件付きコメントを使用しない場合は通常、CSSファイルと次のファイルが並列で読み込まれます。 条件付きコメントを使用した場合 詳しくは後述のtest 1：ごく普通に条件付きコメントを使用を参照 これを並
ナッセ福岡
福岡イベント 2024.08.13 【女子旅EXPO2024 】旅好き女子と観光地をつな... 【女子旅EXPO2024 】旅好き女子と観光地をつなぐNASSE旅の祭典開催！ 福岡エンタメ 2024.08.02 【LIL LEAGUE】 福岡市科学館 夏休みスペシ... 【LIL LEAGUE】 福岡市科学館 夏休みスペシャルサポーター就任！ 任命式に福岡出身の中村竜大＆山田晃大が登場！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
使われていないCSS設定があるか教えてくれる『Unused CSS』 | 100SHIKI
[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ