CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets
結果ページ どのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。 基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。 リンクを記述するHTMLは、要素を特定できるようにidを与えます。
CSS3のアニメーションがカクカクして動きが悪い時の対処法
Webデザイナー歴10年。 出来る技術は相も変わらずPhotoshopとHTMLとCSS。 数年前から成長がビタッ！！！と、止まっているなぁ・・・と痛感する今日この頃。 ブログを書くことで、少しでも早くWebの最新の動向を知ったり、仕事でつまづいたことなどをアウトプットすることでしっかり復習できればいいなぁと思っています。 さて！今日ハマった問題はですね、特定のボタンを押したら、指定した位置からパネルがスーっと降りてきて、特定のボタンを押したらスーっと上に戻っていく、というCSSとJavascriptを使った簡単なアニメーションの作成中に事件は起こります。 どこにハマったかと言いますと、 iPhone6のSafariでは、スムーズにアニメーションしてくれたけど、iPhone5のSafariだと、許せるか許せないかくらいのカクカクした動き、なんかもっさりした動きになった、事件です。いや許せん
【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。
HTML5からは非推奨（廃止？）となり、今となっては懐かしい<marquee> タグ。 内包する要素をスライドさせて表示することができるこのタグは、一時は廃れたかのように見えましたが、最近再び見直されるようになり、同じ動作をするスクリプトが一部のスマートフォン対応サイトなどで使われています。 <marquee> タグが使えないとなると、同じ挙動は JavaScript で実現させようと考えるのが普通でしょうが、今日は CSS3 で marquee を実装する方法を紹介します。 HTML の書き方<div class="marquee"> <p>The quick brown fox jumps over the lazy dog.</p> </div> 「marquee」というクラスを与えたボックスでスライドさせたい要素を囲む。これが基本の記述です。 シンプルでいいですよね。 こういった簡
【CSS】CSSでマスク、クリッピングをしてみよう | unitopi - ユニトピ -
こんにちは。 今日はCSSに関するポストです。 まず、CSSで以下のようなプロパティを使ったこと有りますか？ clip clipプロパティは、ボックスを切り抜き表示（クリッピング）する際に使用します。 引用：clip－スタイルシートリファレンス .element { clip: rect(10px, 20px, 30px, 40px); } このような形で、通常のCSS指定どおり上から時計回りに指定します。 これはCSS2でも使えました。 ただ、通常はoverflow:hidden;にして、位置を調整するのが一般的だったように思えます。 clip-path 本日の目玉はこちら。これまでのclipでは短形で、かつ絶対的に配置されている場合のみ有効でした。 どうなるか見てみましょう。 img.sample-img{ width:300px; clip-path: circle(100px at
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
画面サイズ別にCSSをメディアクエリで切り替える方法 [ホームページ作成] All About
画面サイズ別にCSSをメディアクエリで切り替える方法画面サイズ別にCSSをメディアクエリで切り替える方法を解説。メディアクエリとは、画面サイズなどの閲覧環境に応じて適用スタイルを切り替えるCSSの機能です。レスポンシブWebデザインを作る際にも使い、HTMLのmedia属性値やCSSの@media規則で条件を指定します。スマホ専用スタイルや、PC等の広い画面幅向けスタイルなどを作成しておき、簡単に切り替えられます。 メディアクエリ（Media Queries）とは、画面サイズや画面解像度などの閲覧環境に応じて適用スタイルを切り替えられるCSSの機能で、CSS3から追加されました。従来からCSSの仕様にあった、デバイスの種類に応じて適用スタイルを切り替えられるメディアタイプ（Media Type）を拡張して作られた仕様です。 メディアクエリを使うことで、Webページの閲覧者が利用しているデバ
![画面サイズ別にCSSをメディアクエリで切り替える方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/445f6566bc34f4193fa83c63d61412ad6fbd33ef/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F9%2F6%2F4%2F0%2F4%2F201706261218%2Ftopimg_original.png)
透過がサポートされたnode-webkit（NW.js）でガジェットを作ろう
こんにちは、古見澤（コミザワ）です。 今回は、前回記事にした node-webkit が透過をサポートし始めたので、HTML5やJavascript、CSSなどのWeb系の言語でガジェットのようなモノを作ってみようという内容となります。 ↓ツイッターから情報を取得して表示するだけの単純なものですが、こんな感じのものを作れます。 動画 node-webkitって何？という方は、前回の記事も合わせてお読みください。 HTML5＋CSS3＋JSでネイティブGUIアプリが作れる、node-webkitを触ってみる ※本エントリーはWindows環境（Win7 Professional x64）での話になります。 （透過機能はMacやLinuxでも使えます、後述するマニュアルを参照ください。） また、Windows環境では、デスクトップウィンドウマネージャーが有効である必要があるため、 Aero機能
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
:first-child疑似クラス (E:first-child)｜セレクタ｜CSS HappyLife ZERO
CSS2で定義された:first-child疑似クラスは、ある要素内で最初に書かれている子要素にスタイルが適用されます。リストの場合ul要素内の最初のli要素に適用されるといった具合です。 ちなみに、CSS3で定義された疑似クラスの、:nth-child(1)と同じ扱いになります。 対応ブラウザ :first-child疑似クラスのサンプル ul { margin: 50px 20px; padding: 5px 0; text-align: center; border: 1px solid #999; } ul li { display: inline; margin-left: 5px; padding-left: 10px; border-left: 1px solid #666; } ul li:first-child { margin-left: 0; padding-left
:last-child疑似クラス (E:last-child)｜セレクタ｜CSS HappyLife ZERO
CSS3で定義された:last-child疑似クラスは、ある要素内で最後に書かれている子要素にスタイルが適用されます。リストの場合ul要素内の最後のli要素に適用されるといった具合です。 ちなみに、CSS3で定義された疑似クラスの、:nth-last-child(1)と同じ扱いになります。 この疑似クラスは後から数えるだけで、:first-child疑似クラスと同じです。 同じですが、定義されたのがCSS3のため、IE8までは対応していません。 サンプル付きの説明に関しては、最初を最後に脳内変換して「:first-child疑似クラス」を参照してください。 対応ブラウザ 関連性が深いページ セレクタのグループ化【CSSの基本】 優先順位・個別性・!important宣言【CSSの基本】 リンク擬似クラス（E:link, E:visited）【セレクタ】 ダイナミック擬似クラス（E:acti
【CSS】エリアに入りきれないテキストを「･･･」で省略する方法 ｜ KLUTCHE
新着投稿などの本文の文頭のみを表示して続きを「･･･」で省略したい時、CSS3 の text-overflow を使うと簡単に表現できます。 PHPでサイト構築することが多いので、一定文字数以上の文章を省略したい場合は、mb_strimwidth 関数を使ったりしていましたが、text-overflow:ellipsis; を使うと、CSS オンリーではみ出した文字を自動で「･･･」で省略してくれます。 現在webkit系のsafariやchrome、operaでしか思い通りに動いてくれませんが、iPhone 用のサイト構築等では活躍してくれます。 .area { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -moz-text-overflow:ellipsis; -o-text-overflow:ellipsi
CSS3が日本語の禁則処理、傍点、縦書きなど対応へ、ドラフト公開
スタイルシートの新たなWeb標準として現在策定が進められているCSS3に対して、日本語に対応した禁則、傍点（圏点）、縦書き仕様などの機能が追加されたドラフトが公開されました。 9月28日にPublickeyで公開した記事「電子書籍フォーマット「EPUB」で縦書きとルビのサポート、来年5月には仕様完成の見通し」では、EPUBでの縦書きやルビ、傍点などの仕様を策定中であることを紹介しましたが、EPUBはXHTMLやCSSをベースにした仕様であるため、仕様策定の作業はEPUBとCSSのそれぞれのグループが協力してCSS3に対して機能を追加する方法で行われていました。 これが最終的にCSS3の仕様として策定されれば、Webブラウザ上での禁則処理、傍点、縦書きなどの組み版処理が充実することになります（ルビはまだ作業中ですが）。大げさではなく、世界中のWebブラウザに対して日本の日本語文化に対応した表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NHN HTML5勉強会 CSS3アニメーション