フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
CSSで2カラムを作ってみる - kojika17
CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
Post by @0-9
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); (function () { var href = 'style sheet url'; var html = document.documentElement; html.st
Front end standards
Being a web developer Is as awesome as Chewbacca riding a squirrel, fighting Nazis with a cross bow. - @codepo8 Foreword This little book is to aid a shared understanding of front-end development best practice at PUP. It's to help us deliver high quality content that works better, reaches more people - not only in today's browsers & devices, but in tomorrows. Browsers Statistics, naturally Our own
Responsive background images with fixed or fluid aspect ratios – Voormedia
Responsive background images with fixed or fluid aspect ratios What's the easiest way to scale background images in responsive layouts? We use an old technique and enhance it to fluidly change the aspect ratio of background images. Responsive layouts make it possible to dynamically scale the width of a website to fit on small mobile devices as well as larger desktop computers. An <img> element wit
CSS Style Guides | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, indentation, overall file s
CSSのプロパティを正しい並び順でソートし直してくれる『CSScomb』
CSSのプロパティを正しい並び順でソートし直してくれる『CSScomb』 CSScomb OnlineはCSSファイル内のプロパティを一定のルールにしたがった正しい並び順でソートしてくれるオンラインツール。 使い方はコードをペーストして『RESORT』をクリックすれば結果が右半分に表示されます。 変換したコードは『Copy result code』をクリックすればすぐにコピーができます。 ソートのルールはあらかじめ設定されていますが、必要に応じ『Setting』からカスタマイズすることも可能です。 こちらのオンライン版以外にも各種エディタ用のプラグインなども公開されているので、興味のある方は試してみてはいかがでしょう。 書き方によってはエラーとなる場合があるようですが、具体的にエラーとなるケースなどはこちらのページでに詳しく載っています。 （特にLESSやSASSの記法では注意するケースが
主要なCSS Resetのスタイルシートとドキュメントのまとめ -CSS Reset.com
ブラウザのスタイルを初期化するCSS Resetのスタイルシートとドキュメントをまとめたポータルサイトを紹介します。 CSS Reset.com [ad#ad-2] 現在、登録されているCSS Resetは下記の7つです。 Eric Meyer's "Reset CSS" Eric Meyer's "Reset CSS"のドキュメント HTML5 Doctor CSS Reset TML5 Doctor CSS Resetのドキュメントメント Yahoo! CSS Reset (YUI 3) YUI 3のドキュメント Vanilla CSS Un-Reset Vanilla CSS Un-Resetのドキュメント Tripoli CSS Reset – David Hellsing Tripoli CSS Resetのドキュメント 'undohtml.css' – Tantek Celik
[CSS]ブラウザのスタイルを初期化するスタイルシートの総まとめ -2010年版
ブラウザごとに異なるデフォルトのスタイルを初期化するスタイルシートの歴史を振り返りつつ、2010年の最新のCSS Resetまでのまとめを紹介します。 A Comprehensive Guide to CSS Resets [ad#ad-2] ユニバーサルセレクタから始まったCSS Resetの進化の過程をたどり、最近リリースされたCSS Resetを紹介します。 下記は、各ポイントを意訳したものです。 (X)HTML "Hard" Reset undohtml.css -2010 version Poor Man's Reset Siolon Reset Inman Reset Tripoli Reset Dan Schulz's Reset Thierry Koblentz's base.css Simple Reset CSS Mini Reset Soft Reset Less i
[CSS]モバイルデバイス用のスタイルを初期化するフレームワーク -CSS Mobile Reset
iPhoneなどのモバイルデバイスを対象とした、スタイルを初期化するCSSのフレームワークを紹介します。 CSS Mobile Reset キャプチャ：Demo 2（Demo 1もあります） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS Mobile Resetの指針 CSS Mobile Resetのスタイルシート Media Queriesを併用 CSS Mobile Resetの指針 このフレームワークは下記を指針として、現在もプロジェクトとして進行中のものです。 軽量にすること。 必要なHTML要素のみリセットすること。 必要なHTML要素のみを用意すること。 より良いタイポグラフィを提供すること。 軽量にすること モバイルデバイスでのインターネット接続はスピードが遅く、そして高価です。そのため、CSSファイルをより軽量にし、速いダウンロードを提供することが良い
iPhone 4 の CSS を切り替える方法
携帯電話 (Nokia, Sonye Eicsson, iPhone) やMac、写真、吉田カバン、スマートフォンサイト制作 (HTML5, CSS3) などについてのブログ iPhone 4とiPhone 3G/3GSとで、スタイルシートを切り換える方法を考えてみました。 iPhone 4のディスプレイ解像度は従来機と比べて縦横それぞれ2倍になりましたが、iPhone 4のSafariではviewportを従来どおり「width=device-width」と指定しても、320×480ピクセルの画面を2倍に拡大して表示されるため、ディスプレイ解像度の違いを考慮しなくても、従来と同様に表示できます。 しかし、これでは画像にジャギーが発生してしまうので、iPhone 4を区別できないかと色々探っていたところ、JavaScript（DOM？）に「window.devicePixelRatio」と
W3C cheatsheet
Accessibility: WCAG2 at a Glance Perceivable Provide text alternatives for non-text content. Provide captions and alternatives for audio and video content. Make content adaptable; and make it available to assistive technologies. Use sufficient contrast to make things easy to see and hear. Operable Make all functionality keyboard accessible. Give users enough time to read and use content. Do not us
「なぜ CSS が巨大になってしまうのか、なにがいけないのか」 - by edvakf in hatena
Nicole Sullivan さんの素晴らしいプレゼン。 5 Mistakes of Massive CSSView more presentations from Nicole Sullivan. 内容は30分ぐらい。ビデオのほうが分かりやすいのでおすすめ。だいたいスライドの35ページ目まではあんまりおもしろくないので飛ばしてもいいと思う。 スライド中に出てくる衝撃的な統計は、Sullivan さんのブログにもまとめられているのでご一見を。 Top 5 Mistakes of Massive CSS | Stubbornella 要旨 CSS の「ベストプラクティス」は間違っている。 プレゼンでは Facebook の例を挙げているけど、例えばサーバー側のロジックでは、ページヘッダー、右コラム、中央、左コラム、フッター、のようにビューを分けるところだけど、CSS をそのような区分でデザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちゃんとCSSを書くために - CSS/Sass設計の話
re-dzine.net situs togel online toto 2023 -
SASSIENCE ～ 世界が嫉妬するCSSへ
[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ
Determine iPhone orientation using CSS
bashalog.biz