» 覚えておくと便利！CSSのセレクタ一覧 | isee ウェブに関するブログ
CSSの記述は「セレクタ」「プロパティ」「値」の3つを使って記述します。 プロパティと値の書き方はほとんど一定ですが、セレクタに関してはたくさんの種類があり、 これをちゃんと使いこなすことができれば、余分なclassやidを減らす事ができとても便利です。 CSSのセレクタにはいろいろな種類があります。 ・IDセレクタ ・classセレクタ ・ユニーバーサルセレクタ ・疑似クラス ・疑似要素 ・属性セレクタなど様々です。 よく目にするのは「a:hover」という疑似クラスな気がします。 おそらくこの記述が書かれていないスタイルシートはないんではないかと思うくらいにとても良く使われています。 これはa要素にhover(マウスカーソルがaに乗った)した時にどのような装飾にするかということを表しています。 CSSのセレクタはとても多くあり、CSS3から導入された新しいものもあるので、使え
Flexbox Grid
ResponsiveResponsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"> <div class="box">Responsive</div> </div> </div> FluidPercent based widths allow fluid resizing of columns and rows. .col-xs-6 { flex-basis: 50%; }Simple SyntaxAll you need to remember is
CSS Image Replacement Museum
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques
じっくり解説！Sublime Text 2 プラグイン 「ColorPicker」 - フロントエンドとかPCとかスマホとか
Sublime Text 2 での作業楽しいですね。 そんな作業をもっと楽しくするプラグインの紹介。 今回は、Color Picker。 CSSやSCSSを書いているとき、簡易にカラーコードを入力するのにとても便利！ これ、とりあえずPackageインストールしている人多いと思います。 でも、動いてますか？ なんか動かないな～とか思ってませんか？ 実はインストールするだけでは動きません。 キーバインディング設定しましょう！ 【手順】 １．まずはパッケージインストール Preferences / Package Control / Install Package ※ メニューバーの「Preferences」を選択、プルダウンメニューで、「Package Control」を選択、出てきた選択肢から、「Install Package」を選択という意味です。 その後、「ColorPicker」と入
Windowsでも綺麗な明朝体を表示する | HR & WebMarketing Diary
※ (株)プロトン・シモヤマ寄稿 こんにちは。 ひっそりと活動場所が 東京から大阪に変わったシモヤマです。 大阪に来て知ったのは、飴ちゃんをくれるのはおばちゃんだけではない。ということです。 さて、突然ですが webサイトに真面目な感じやリッチな雰囲気を出したい時、明朝体を使いたくなりませんか？ なりますよね。 でも、ほとんどの場合、使いません。 なぜなら macでは、基本的に全てのサイズのフォントにアンチエイリアス処理が施されていますが windowsは…。 なので、どうしても明朝にしたいときは 今までだったら：画像にする 先人の知恵を借りるなら：裏技を使う 最近：webフォント という感じでした。 わたしはもう、そこまでするなら大人しくゴシックで頑張ろうと思っていました。 ・・・が！ありました！ 使える！Officeフォント 参考記事：http://creazy.net/2007/08
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
CSSOM View Module (W3C Working Draft 17 December 2013)
This version: http://www.w3.org/TR/2016/WD-cssom-view-1-20160317/ Latest version: http://www.w3.org/TR/cssom-view-1/ Editor's Draft: https://drafts.csswg.org/cssom-view/ Previous Versions: http://www.w3.org/TR/2013/WD-cssom-view-20131217/ http://www.w3.org/TR/2011/WD-cssom-view-20110804/ http://www.w3.org/TR/2009/WD-cssom-view-20090804/ http://www.w3.org/TR/2008/WD-cssom-view-20080222/ http://www.
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
CSS TransformsでCSS Animation/Transitionと組み合わせて、要素を移動させたり、拡大縮小させるとちらつくことがあります。背景色を指定しても発生することがあります。また、一部の子要素だけちらつくこともあります。ちなみに、CSS 2D Transformsを指定した要素でもちらつきが発生するときがあります。 「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」を指定 これがいちばん効果の高い対処方法です。ほとんどのちらつき問題が解消されます。2D Transformsには関係ないプロパティのはずなのですが、なぜか有効な対策です。 「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」と「overflo
inputのズレを揃えるCSSまとめ - Qiita
ブラウザ間でインプットやチェックボックスの表示がズレるのを自分なりに修正したCSSのまとめメモ。 ちなみにIE6ではinput[type="text"]や、input[type="checkbox"]の標記が無効？のようだったので、もしやんごとなき事情でIE6に適用させるためにはチェックボックスやラジオに対して別途クラスを当てる必要。 ・buttonには overflow:visible;を入れる。 ・vertical-alignを指定する ・positionをrelativeにして、高さを相対的に揃える（topは各フォントサイズにより変更する） ・font-familyに日本語フォントを指定する こんな感じで書くと書くブラウザでズレが軽減されます。 body, form { margin:0; padding:0; border:0; outline:0; font-size:100%;
知っておくと速い！CSS3に関する「便利」なまとめ
作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １
ベンダー拡張プリフィックスヲ削減セヨ
Translation of: Cutting down on vendor prefixes とあるブラウザーで特定の機能を有効化する場合、現在、多くのウェブ開発者たちはCSSでベンダー拡張プリフィックスを使っていることでしょう。そのこと自体は良いのですが、サンプル・コードやプリフィックスを追加するツールで、時々サポートし過ぎでやたらめったら全てのプリフィックス(今まで実装されたことがないようなものまで)を追加しようとしているのを見かけます。最早ベンダー拡張プリフィックスが不要なCSSプロパティーは数多くあると思いますし、そうでないとしてもその数は減らすことができるでしょう。 以下の例ではどのプレフィックスを、使用しているのなら、使用しているかの注釈をつけておきました。だいたいが削除でき1行で済ませられるにも関わらず、様々なベンダー拡張プリフィックスと共に使われてしまっていることが多いC
画面上の文字や画像を選択できないようにする at softelメモ
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
CSS Media Queries（メディアクエリ）を使用した指定方法
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 CSS Media Queries（メディアクエリ）を使用したデバイスごとの指定方法です。 CSS3のMedia Queries（メディア クエリ）を使用して、デスクトップのブラウザ用をはじめ iPhone, iPadなどのモバイル用にスタイルシートの分ける方法です。 スタイルシートの分け方は ※プロパティ単位 ※ファイル単位 の2種類になります。 プロパティ単位でデバイスごとにスタイルシートを設定 スマートフォン（縦長・横長） @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } スマートフォン（横長） @media only screen and (mi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 & CSS3 Tools and Tutorials
Redirecting to Animate.css
CSSでheight:100%を使う方法について。 | Ginpen.com
