[B! css] daizo1117のブックマーク

CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

daizo1117 2017/03/17

css

リンク

プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック

作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。エンジニア速報は Twitter の@commteで配信しています。もくじマスク１．マスク・キャプション２．円形キャプション３．全画面+オーバーレイ４．ストライプの背景フルスクリーン系５．スライド＋フルスクリーン６．全画面背景動画７．パララックス８．フルスクリーンにフィット９．背景画像をブラウザごとに最適化１０．メガメニュー画像可変１１．画像で枠線を表現する１２．半透明＋フィルタ１３．文字以外を透明にしてレイヤーさせる図形１４．ループ＋ローディング１５．3Dボックス１６．矢印ナビ画像切り抜き１７．六角形１８．卵型＋星形

daizo1117 2014/08/12

2014
css

リンク

[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It

アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.google apis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat

daizo1117 2014/07/04

リンク

Gemtracks - Buy Beats, Hire Music Freelancers, Book Studios

A music industry marketplace to buy original beats, get your music into playlists, hire freelancers and book recording studios.

daizo1117 2014/03/28

css

リンク

H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -

HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transf orm」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。サンプルページ » 01.切り取り線紙を切り取ったようなデザインです。サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);

daizo1117 2014/03/10

css
2014

リンク

アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン / SQUEEZE - Web Design Studio -

HTMLはシンプルにCSSの「border」や「box-shadow」、擬似要素の「:before」や「:after」を使って実装する立体的な見出しデザインをご紹介します。以下2つの記事にインスパイアされ、見出しデザインをいくつか作成しました。両記事を参考にしつつも、私なりの方法を説明していきたいと思います。 CSSの擬似要素を使った見出しデザイン｜Webpark[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリスまずはサンプルをご覧ください。サンプルページ » 「border」で三角形や台形を作る最初に、今回の大きなポイントでもある「border」で三角形や台形を作る方法をご紹介します。「border」は要素の周囲四辺それぞれを囲むものですが、隣接する二辺の「border」が設定された時に、境界線の内側と外側の頂点を結ぶ対角線で要素が分けられ

daizo1117 2014/03/10

リンク

CSSアニメーションを実行するトリガーのまとめ５＋１個

先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか？と思い、とりあえず調べてまとめてみた。 E:hover まずは前回同様:hoverから。マウスを要素に乗せることで動作します。 .demo1 div{ width:150px; height:100px; background-color:#0066cc; border:3px solid #ffffff; color:#ffffff; -webkit-border-radius: 5px; -moz-border-radius:5px; border-radius: 5px; -webkit-transition: 1s; -moz-transition: 1s; -o-transiti

daizo1117 2014/01/09

css
jQuery

リンク

[報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ

先日、勉強会でAdobe Bracketsをはじめて触ってきました！私はST2に恋している身なのでそこまで興味はなかったのですｇげふんげふん！これ、使ってみたらなかなか良かったのですよ…！なので、今日はそこで学んできたAdobe Bracketsの魅力と、コーダー必須アイテムであるEmmet（Zen-Coding）のインストール方法を皆さんにご紹介したいと思います！！というわけで、@stocker_jpさんがオープンされた教室『Stocker.jp / Space 』にて行われた@glatyouさんのAdobe Brackets勉強会にいってきました。こういう勉強会に参加して、アプリケーションに触れてみるのって大事ですねー。ST2の時も触るまで微塵も興味なかったなぁ…ｗ Adobe Bracketsとは Adobeから出ている無料のテキストエディタです。CCに加入している必要はなく

daizo1117 2013/09/09

“e Bracketsの魅力と、コーダー必須アイテムであるEmmet（Zen-Coding）のインストール方”

リンク

メンテナブルCSS

概要メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、非常にメンテナンスコストがかかる負の遺産が作られてしまいます。そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。これらルールの適用を補助するツール群を、合せて報告致します。

daizo1117 2013/09/03

css

リンク

【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ

エンジニアの菊池です。今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。今回、初めてブログを投稿させていただくことになりました。業務では主にフロントエンドの実装とマークアップ等を担当しています。さて、Windows XPのサポート終了まで残り約8ヶ月となりました。ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I

daizo1117 2013/08/20

リンク

ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL

俺ももう30だし、夏なんで、CSSフレームワークはじめました。とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴これを作るにあたって

daizo1117 2013/07/30

css

リンク

IEでもCSS3で角丸ができるPIE.htcの使い方と注意点 - ウォルディズ

覚えたてのCSS3で見出しタグを角丸にしてみたのですが、普段使ってるのはChrome。ふとIE8で見てみると角丸になってない！あ～、、、、IEめんどくさい！ ◇PIEの設置ちょっとググルとPIE.htcを使うと良いらしいので試してみました。 PIEのダウンロード先ダウンロードしたのは PIE-1.0beta3.zip 。解凍すると下記5ファイルが出てきます。WebサーバにPIE-1.0betaディレクトリを作成して全部コピーします。設置はこれで終わり。

daizo1117 2013/05/02

css

リンク

CSSでfloatを解除する方法のまとめ

CSSのfloatを解除（クリア）する方法をまとめてみました。以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除するということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。１．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi

daizo1117 2013/03/29

css

リンク

Loading...

daizo1117 2013/03/23

3Dで動く

css

リンク

これはすごい！TLで話題にのぼった3D CSS Testerで私も3Dを体験してみた！

javascriptを使用せずCSSのみで画像を3D回転させる事ができてしまう時代が既に到来していたようです。面白そうなので早速試してみました！ 3D CSS Tester CSS3を利用して画像を3D回転させることができるジェネレーター。横の数値を変更すれば即座に反映されます。反映された3D回転は、コードが書き出されているのでコピーしてそのまま使用することも可能です！！作ってみたただ単に書き出されたコードをまるまるコピーして、画像を差し替えただけですがちゃんと動いたことに感動しましたー！！ヾ(*´∀｀*)ﾉｷｬｯｷｬ ※CSS3のZ軸を用いた3D回転を使用しているため非対応ブラウザの方には表示されなかったり止まって見えたりすると思います。とりあえずChromeかiPhoneで見て頂ければ動くかと。参考：CSS transf orms の利用 – MDN （FireFoxの対

daizo1117 2013/03/23

css

リンク

Quite realistic buttons

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

daizo1117 2013/03/23

リンク

CSSだけで画像を上下中央に配置する « SRC Blog -samurai-rok.com-

久しぶりすぎて若干死に掛けたブログですがたまにはWEB屋らしい情報を「CSSのみで画像を上下中央に配置する方法」イメージ的にはこんな感じ HTML5やCSS3の話題で盛り上がってる中今更なネタですが調べてみると中々バッチリとした答えが見つからないので書いときます一応仕様としては 1.HTMLを汚さない、余計なタグは書かない 2.ハックを使わない 3.IE6、IE7、IE8、その他モダンブラウザ対応 4.imgはどんなサイズでも囲うdivの上下中央に配置するこんなとこですかねで早速答えは【HTML】 <div><img src=”images/src.jpg” alt=”img” width=”100″ height=”50″ /></div> 【CSS】 div { width:300px; height:200px; display:

daizo1117 2013/02/25

リンク

[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート

画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。デモページ：480pxで表示実装実装の準備 CSS3をサポートしているか判別するためにModernizeを使用します。実装にはSassを使用します。ダイヤモンド一つまずはダイヤモンドを一つ実装してみましょう。 HTMLはdiv要素をa要素で囲みます。 <a href="#" class="diamond"> <div class="content"> Diamonds Are Forever </div> </a> CSSは下記のようになります。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } $diamondSize: 190p