スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
Public Snippets コードは、現在7つのカテゴリに分けられています。 CSS Apache PHP JavaScript jQuery HTML XML Others [ad#ad-2] 例えばCSSだと、clearFix、角にリボンを配置、画像のフリップ、フッタの固定表示など、たくさんの便利なスニペットが登録されています。 CSS: Clearfix CSS: Pure CSS Corner Ribbon CSS: Flip an Image CSS: Sticky Footer スニペットのページでは、シンタックスハイライト、テキスト表示に対応しており、テキスト形式でダウンロードできます。
clearfix ネタに乗っかってみる。 スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る －モダンブラウザ編－ clearfixはちゃんと考えられてた .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } .clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/ } ホップ本でもうーたんが解説してるんだけど、構造に手を加えずに float を clear させるためのいわゆる clearfix ってやつ。結構色々なサイトで紹介されているのを目にすると思うけど、最初の content 生成して clear させる
floatボックスが親ボックスを突き破る問題 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 floatボックスが親ボックスを貫通して表示される問題について。いわゆるclearfixに関するアレコレ。 親ボックスの中に「box_A (float:left;)」と「box_B (float:right;)」があるとする。OperaやFirefox等のモダンブラウザで見てみると、中身（floatボックス）の高さが親ボックスに反映されていないことが判る。ちなみに上記のソースは以下。 <div style="width:140px; padding: 10px; border:1px solid #666; color: #333;"> <div style="flo
最近、cssでよく使用しているのがclearfixです。 親ボックス内で子ボックスをフロートする場合、親ボックスの背景画像が表示されなかったり親ボックスのマージンがなくなってしまったりと問題がありました。 clearfixを使ってからは、結構スムーズにCSSを設定できるようになりました。 ソースは以下です。 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; min-height: 1%; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hid
以前、floatを解除する clearfixハックという記事を書きましたが、できることならハックは使いたくないと最近思うようになってきました。 いろいろと検証した結果、今回ご紹介するのはハックを使用せずにfloatを解除するための方法です。 divの構成はこちら。 boxというクラス名の div （floatを解除するための div ）は必要です。 cssのソース div.box { overflow: hidden; /* これがポイント */ position: relative; /* IE6でエリアを選択できるようにする */ /* DreamWeaverのデザインビューで正しく表示させる */ } div.left { float: left; /* 左に寄せて配置 */ width: 200px; } div.right { float: right; /* 右に寄せて配置 *
CSS Resets Basic CSS resets are a staple found in many online resources. This snippet, which I’ve customized, is inspired by Eric Meyer’s reset codes. It includes responsive image settings and applies the border-box model to all core elements for consistent margin and padding measurements. /* Resetting Styles */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
SIL Open Font License (OFL) 参考URL : SIL Open Font License (SILオープンフォントライセンス) CC BY 参考URL : 表示 3.0 非移植 (CC BY 3.0)ク CC BY-SA 参考URL : Creative Commons — 表示 - 継承 3.0 非移植 MIT 参考URL : MIT License - ウィキペディア BSD 参考URL : BSDライセンス - ウィキペディア Webフォントアイコンを選んでみる。 http://fontello.com/ それでは、実際に上記サイトへアクセスして使用してみたいと思います。 サイトへ行くと沢山のWebフォントアイコンが用意されています。 Webフォントアイコンの選択 今回は、Webフォントアイコンで有名なFont Awesomeを使ってみたいと思います。 Fo
初めてCSSを触ったときはfloatの概念を理解するまでに苦労しました。ギターで言う「Fのコード」に相当する必ず最初につまづくポイントが、CSSでは「float」っていうやつです。 今日はそのつまづきポイントのfloatを扱いやすくしてくれる救世主「clearfix」について。
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! What is “Float”? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example of
CSSで中央寄せにする方法まとめ | たねっぱ！
CSSで中央寄せ方法(inlineやblockで方法をかえよう！)。text-align:centerやmargin:auto。レスポンシブの場合なんかも紹介します！ CSSで中央寄せにする方法(inlineとblockで方法をかえよう！) おはこんばんちわ、やのっぱです(´・ω・｀) そういえば、周りでcssによる中央寄せがうまくいかないって声をよく聞いてたのでいくつか書いてみたよ。 思いつく限りの中央寄せの方法を書きます。 注意！ 本記事はreset.css、clearfixを導入した状態を基準としてソースコードを載せています。 １．margin: 0 auto;【block要素を中央に】 定番の中央寄せです。 でも、要素がwidth:100%;だと無理です。 margin取れないからです。 例） <style> .marginTest { width:100%; height:40p
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>タイトル | サイト名</title> <meta name="description" content="ディスクリプション" /> <meta property="og:type" content="website" /> <meta property="og:title" content="タイトル" /> <meta property="og:image" content="/img/icon.png" /> <meta property="og:url" content="http://example.net/" /> <me
FacebookページにWordPressで生成したページを埋め込む（FacebookページをWordPressの管理画面から更新）
WordPressでページを更新すると、Facebookページで登録したページを更新できるフローを作りました。まずFacebookアプリを作って、iframeで別サーバのページ読み込めるようにしてください。 ASCII.jp：iframe対応！初めてのFacebookページの作り方｜今日からできるFacebookファンページ制作＆運用ガイド でWordPressでソリッドなテンプレートを作ります。僕はこんな感じにしました。 Facebook用テンプレート /** * Template Name: Facebook */ <link rel="stylesheet" href=" bloginfo('url'); /css/facebook.css" type="text/css" /> <div style="font-size:10pt;"> <div style="margin-bot
さて【CSS 中級講座】シリーズ第２弾は、CSSコーディングには必携の知識「clearfix」について。 なんらかの要素を float した場合、しっかりそれを解除しないと続く要素にも影響しちゃって、レイアウトが崩れてしまいます。 そんな困った時に使われる「float状態を解除する方法」を通称して「clearfix（クリアフィックス）」と呼ぶのですが、実はいろいろな方法があります。 有名所としては「:after疑似要素 + contentプロパティ + IE用ハック」ってのがありますが、そんな手間をかけずとも、もっとシンプルにfloat解除する方法、あります！ そんな訳で、さっそくいってみましょー！ 実装前の状態 まず最初に、clearfixを使う前の「レイアウト崩れてもうた」状態のマークアップをば。 <div id="contents"> <div id="main"> <p>ここは<b
こんにちは、WEBマーケティング部の杉尾です。 今回は、指定した要素を右寄せもしくは左寄せにするプロパティ、『float』の使い方を紹介します。 floatプロパティとは floatプロパティとは、それが指定された要素を左寄せ、もしくは右寄せに配置します。 注意点 ・ある要素にfloatを指定してどちらかに寄せると、後に続く内容が反対側に回り込みます。 ・floatプロパティを指定したい要素に、positionプロパティのrelative、absolute、fixedのどれかを指定すると適用されません。 基本的な使い方 まずは参考ソースをご覧ください。 【HTML】 <p> <img src="css_side_by_side.png" class="box_left"> 回りこみテスト </p> 【CSS】 .box_left { float:left; width:100px; hei
tech-log 控え室改め ありんくtech-log
こちらで続けようと思います。 とりあえず、CentOS5、CentOS6の共生と cpanmでのImage::Magick の取り扱い、Imagerがいまいち美しい処理をしてくれないあたりが目下の目標です。
LESSでCSSを書いてみた - Toro_Unit
CSSのメンテナンス性の悪さは広く知られて居るとは思いますが、その解決策として、SASSとかSCSSなどがあります。今回はその仲間のLESSの導入記録です。 公式サイト:LESS « The Dynamic Stylesheet language LESSというのは、CSSのメタ言語で、コレをコンパイルすると、CSSが出力されます。 LESSを使うとこんなことが出来ます。 LESSを使うと出来ること ルールのネスト 変数 Mixin 四則演算などちょっとした関数 また、普通のCSSの記法も使えますので、リセット用のCSS等そのままコピペも可能です。 ルールのネスト（階層化） CSSのルールをネスト出来ます。いちいちセレクタをコピペしなくていいし、コードの視認性や、構造が非常にわかりやすくなります。親のセレクタを再利用するには、”&”を用います。 less [css] #header { h
float解除 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
tableタグによるレイアウトではなく、divタグのfloatによるレイアウトが主流となっていますが、floatを解除する方法については様々な議論が交わされています。 正解というものはありませんが、ScuderiaWebで使用しているfloat解除方法をご紹介します。 サンプル float解除サンプル（別ウィンドウで表示） ソース 上記サンプルで使用しているソースです。
8 Code Snippets for New Website Projects - Web Design Ledger
Tips 8 Code Snippets for New Website Projects Jake RocheleauOctober 24, 201224 Comments03.2k Working as a web developer often requires compromise and trying out new systems. Some of your code will turn out to be a flunk, and other codes will become staples in your development process. I have learned a lot about useful code snippets and how greatly these can affect your development process. In this
Stylus + Nib を使ってみた
Stylus + Nib を使ってみた Sass の Compass インスパイアードな Stylus のライブラリ Nib を使ってみました。よく使うベンダープリフィックスやグラデーション、clearfix 等の便利な mixin の詰め合わせです。インストールについてはこちら（Stylus, Nib, node-canvas をインストール）。 Stylus って何？という方は公式（LearnBoost/stylus - GitHub, Stylus - Expressive, dynamic, robust CSS）や Kyosuke hamalog (Sass と LESS 以外の選択肢 Stylus) 等をどうぞ。 この記事は Less & Sass Advent calendar 2011 に触発されて書きました。Less, Sass(, Stylus) についての面白くって為
BONKURA BLOG - サイトのテンプレート
仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。 あくまで僕が一番管理しやすいと思うディレクトリ構成です。 「こうしたほうが便利だよ！」ってのがあれば逆に教えてほしいっすなあ。 ■データ一式ダウンロード CSSディレクトリ ■dw.css clearfixはDreamweaverのデザインビューではうまく反映されませんが、overflow:hiddenとするだけでDreamweaver上の表示は改善されます。ただし、overflow:hiddenとしてしまうとネスケなので表示がされなくなるので、Dreamweaverの機能である「デザインタイム」を利用します。この機能を使えばdw.cssはDreamweaverのデザインビューにしか反映されません。 ■pages/ 各ページ個別対応しなきゃならないCSSをページカテゴリー名で管
最近のWebサイトでよく見かけるアニメーションやインターフェースを簡単に実装できる、便利なHTML/CSSスニペット、JavaScriptライブラリを紹介します。 背景にインクが広がるエフェクト(CSS) CSSのstepsを使って、背景にインクを広げるアニメーションを実装します。 Ink Transition Effect | デモ かわいいボタンデザイン(CSS) 手書き風ボーダーのボタンなど、普段見かけないオリジナリティあるボタンをCSSで実装します。 CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ CSS3を使ったホバーエフェクト(CSS) シームレスな動作で、クオリティの高いホバーエフェクトをCSS3を使って実装できます。 Ultimate image hover effects using css3 | デモ ハンバーガーメニューのCSSア
最近、カードローンを発行、利用するとポイントがもらえたり、貯まるキャンペーンが多いですが、そういった目的でカードをたくさん作成するのは、今後銀行での住宅ローンなど審査される際に不利に働くことはあるのでしょうか。特にカードを作成するだけで利用はしたことがないですし、今のところする予定もないのですが。 カードを作成しただけでは、特に不利になることはありません ローンカードを作成することは信用がないということではなく、むしろ信用があるという証拠でもあるよ。確かにカードローンを作成すると、指定信用情報期間のCICに情報が載ることにはなるけれど、特にマイナスにはならないから安心してね。実はカードローンの仕組みを説明するとカードローンで設定している限度額があるよね。その限度額が借金の金額として審査の際には評価になるんだ。例えば50万が限度額であれば50万円は借金金額と評価ということになるんだ。年収の1
はじめに Atomとは、GitHubが開発したソースコードエディタです。Mac・Windows・Linuxに対応しており、無料で使うことができます。 設定画面 Macの場合は「Command + ,」ショートカット、Windowsの場合は「Ctrl + ,」ショートカットで設定画面（Settings）が表示されます。 コアパッケージとコアテーマ Atom本体をインストールすると、77個のパッケージもインストールされます。これらのパッケージを「コアパッケージ（Core Packages）」と呼びます。同様にAtom本体とともにインストールされるテーマを「コアテーマ（Core Themes）」と呼びます。 パッケージとテーマのインストール方法 設定画面で［Install］を選択すると、次の画面が表示されます。 右側のボタンで、パッケージの検索とテーマの検索を切り替えることができます。 自分が使
最近よく見かける上部固定メニュー。今、ユニクロサイトでも採用されていますね。 先日、サイト制作で実際に上部固定メニューを実装したので、作り方を紹介したいと思います。意外と簡単にできました。 上部固定メニューのサンプルはこちら jQueryをHEAD内に記述 まずは、HEAD内に「viewport」を記述。viewportはスマホでもサイトが適切に表示されるようしているので忘れずに。次に、jQueryを呼び込みます。最後に上部固定されるようにjavascriptを記述します。 <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></s
One of the trickiest parts to be responsified on a website is “the Navigation”, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages. There are actually many ways to create responsive web site navigation and even some jQuery plugins are available to do it in a second. However, rather than applying an instant solution, in this post
The CSS clearfix has been a must-have in our web design toolkit for quite some time and, until new layout features like flexbox become more stable, we’ll always need some form of clearfix in float based layouts. There are several ways we can clear floats with native CSS, but each requires repeating either a class in the markup or the same properties and values throughout the CSS. Thankfully, Sass
ここ1年でかなりスタイルシートの分割ルールが変わり、それまではかなり無茶な書き方をしていたものです。 今では固定パターンが出来て、状況に応じて多少仕組みを変えていく感じになってます。 Makit のスタイルシートのファイル分割を元に解説します。 HTML 文書から読み込まれるスタイルシートのファイル構成 import.css default.css elements.css layout.css header.css footer.css sidecontents.css table.css contents.css style.css top.css clearfix.css niftyCorners.css ファイルは大きく分けて3つの役割で構成されています。 要素の再定義 大枠のレイアウト定義 部分装飾の定義 その他 それぞれの役割をスタイルシートのファイルに当てはめると以下のよ
Vanilla CSS Un-Reset | Noscope
Version 1.0.2 Vanilla is a CSS “un-reset” that works in tandem with CSS resets such as the Yahoo CSS Reset. Browser defaults vary. Using a CSS reset, you can level the playing field and remove all those browser default styles, ensuring a consistent cross-platform experience. What then? You rebuild. You re-style lists, paragraphs, headers, bullets and margins. Some of those rebuild styles are likel
仕事でのコーディングでもう3年以上、古いreset.cssとclearfixを使い続けていたため、内容を見直す事にしました。基本的には先人の知恵を引用した形ですｗ reset.css 自分は「YUI Reset CSS」派なので、素直にそちらを使います。 @charset "utf-8"; /* Copyright (c) 2011, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.9.0 */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset
float解除のclearfix float解除のためにoverflow:hiddenが使用されることがある。 .box { overflow: hidden; width: 100px; background: gray; } .a { float: left; width: 50px; height: 50px; background: red; } .b { float: right; width: 30px; height: 50px; background: blue; } しかし、このoverflow:hiddenでfloat解除を使用する方法は使用しないほうが良い。 理由は子要素をabsoluteなどで親要素の外側に表示できなくなるのとoverflow:hiddenがfloat解除に使用されているのか子要素が親要素の外側にはみ出した際に非表示になるように指定しているのかがわか
本文中に画像の入ったブロックなどを入れるときに、float:right などとして右に寄せたとする。このとき、画像ブロックの縦の長さが外側の本文ブロックの長さより長いと下側にはみ出てしまう。これを防ぐために、clear:both でfloatをクリアする。 clear:both のスマートな使い方がわかったので書いておく。 参考にしたページは以下である。 Simple Clearing of Floats 私が使っていた方法 従来から言われているように、以下のclassを定義してクリアする必要がある場所にダミーのブロックを挿入していた。ダミーのブロックは、 <div class="c-both"></div> のような具合だ。 .c-both { clear:both; display:block; visibility:hidden; } こんな風に使っていた。 <div class=
clearfix、下に出る余白をfont-sizeが影響！？：Mac Safari 2 | 秋葉秀樹個人ブログ
Mac Safari 2でclearfixのレンダリング結果を画像付きで検証 俗に呼ばれているclearfixと呼ばれる良く出来た技、例えばボックス要素内に2つの要素が分かれていて、内部要素にfloatで左右に浮動させると、外にあるボックスは内部要素を包括できなくて、周囲をborderで囲んだり、背景色を入れたり、margin-bottomなどで下の余白を取ったりとかが出来ないところに有効とされているやり方なんですが、Mac Safari 2でちょっと難ありって感じでした。 下図は以下のソースコードのレンダリング結果です。 〜XHTMLソースコード〜 <dl class="clearfix"> <dt><img src="images/itemphoto.jpg" alt="写真" /></dt> <dd><h2>商品紹介</h2> <p>商品の案内が入ります。商品の案内が入ります。商品の
いい感じにHTMLのコードが書けた！CSSで文字や背景の装飾などは順調に進み… 最後にページ全体のレイアウトにとりかかってから全くうまくいかず😭 手を加えれば加えるほどぐちゃぐちゃになっていき焦燥感マックス。 あまりにもわからなさすぎて、教えていただいたところ、 基本的にHPはいくつかの箱で出来ている、という考え方から教えていただきました。 floatの解除方法はいくつかありますが、 clearfixを使う方法が１番わかりやすかったので記載していきます。 1.まずは図を書いてみる 大きな箱 box-A(box-aクラス)の中に 小さな箱 box-b(box-bクラス)を左側、 小さな箱 box-c(box-cクラス)を右側に配置。 さらに box-Aの下にbox-Dを配置したい。 このようにざっくり設計図を描く 2.HTMLをコーディング ※body部分のみ記載とします <div cla
floatさせた要素を簡単にfloat解除させる「clearFix」 CSS2008年12月6日 floatした要素を解除する際、その都度floatを解除するための空divをソースにいれたり、CSSでcloar:bothを多用していたりしませんか？ （<br class="clear" />や<div class="clear"></div>等） 実は、「clearFix」を使うことで、簡単にfloatを解除させることができます。 HTML <div id="p52_parent" class="clearFix"> <div class="left">左に寄せた要素</div> <div class="right">右に寄せた要素</div> </div> （IE6,IE7,Firefox 2,Firefox 3,Safari3,Opera9.6で確認済） CSS .clearFix:a
仕事でHTMLコーディングする人の約7割が、Sass(SCSS)を使用しているという調査結果があるように、コーディングする上でSass(SCSS)は欠かせない便利なものとなってきています。今回はSass(SCSS)の基本情報からメリット・デメリットもふまえて紹介していこうと思います。 Sassとは？ まず、Sassを使ったことがない方に向けて、簡単にSassの使い方を説明します。Sassとは「Syntactically Awesome Stylesheets」の略で、訳すると「構造的にとても凄い(最高な・素晴らしい)スタイルシート」という意味になります。 SassにはSASS記法・SCSS記法という2種類の記法があり、元々はSASS記法が採用されていましたが、CSSとの互換性に乏しいなどの理由から、CSSとの互換性を高めたSCSS記法が作られました。SCSSはCSSと記法が近いため、CSS
CSSで使うclearfixをいろいろ調べたあげく、ひかげが自分で使うためのclearfixを決めてみました。 clearfixにもいろんなパターンがあったので、迷いがあったことも事実です。 無難であろう選択をしました。 clearfix CSSのコピペ用 2009年1月13日(火)現在で、多くのブラウザに対応できそうなCSSのclearfixの自分用メモ。 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; min-height: 1%; } /* Hides from IE-mac */ * html .clearfix { height: 1%; } .clearfix { dis
3_greenblue01 当画面のデザインは、 3_greenblue01 を使用しています。 スクロールしても追従するメニュー (改良版) スクロールしても追従するメニューを作成しましたが、ちょっと気に入らない仕様だったので、改良版を作成してみました。この方法は、北研のQHM Proのサイトと同じような動きをします。 通常、画面をスクロールすると、メニューも一緒にスクロールしますが、メニューだけ常に表示する方法です。下までスクロールしてフッターが表示されると、フッターがすべて表示されるまでスクロールしますが、そのときメニューは固定しているのではなく、上にスクロールし自然な感じで見やすくしてくれます。文章での説明は難しいので、画面サイズを小さくして実際の画面で確認してください。 ２カラムと３カラムの両方に対応しています。CSSとjQueryを使用します。 ３カラムの場合、どちら
CSS ClearFix短縮型 – Floatでテキストや画像の回り込みを回避する方法 | Stronghold Archive
どうもこんにちは。今回はちょっと基礎的なtips【Floatでテキストや画像の回り込みを回避する方法】です。正確にはclearfixではなくその短縮系のご紹介です。 通常のclearfix float使用時には、図のようにfloat直下のテキストや画像が回り込んでしまいます。この回避方法で便利なのはclearfixです。 HTML <div id="floatArea" class="clearfix"> <div>div</div> <div>div</div> </div> <p>dammy text.dammy text.dammy text.dammy text.dammy text.dammy text.dammy text.</p> clearfix CSS .clearfix:after { content: "."; display: block; height: 0; c
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者の困ったを解決するコードが盛りだくさん、スニペットを共有するサービス -Code Pad
俗に言う clearfix と言われるコードのバリエーション色々 - lucky bag
ボックスをはみ出さないようにfloatをクリアCSS:clearfixハック | Tech de Go
【CSS 】clearfixを使ってfloatを解除する | バシャログ。
【CSS】clearfixを使わずにfloatを解除する | バシャログ。
50 Useful CSS Snippets Every Designer Should Have
【Fontello】アイコンを選んでWebフォント化してくれるジェネレータ | DevelopersIO
floatによる回り込みを解除する方法の１つ「clearfix」について - ディレイマニア
All About Floats | CSS-Tricks
【HTML】初期開発コーディングテンプレートと CSS コーディング規約
【CSS 中級講座】floatを解除するclearfixのビューティフルな実装法
【CSS】floatとclearfixで要素を横並びにする方法を紹介します（前半はfloatの説明）
最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ
ポイントのためにカードローンを発行していくのはマズイのか | 街金融よりお得？迷ってる方必見の街金よりお得な会社はこちら
コーディング作業を加速するAtom活用法 | satoyan419.com
レスポンシブ対応！上部固定メニューをjQueryとCSSで簡単につくってみた
How to Create a Responsive Navigation For Your Site
CSS Tip: A Better Clearfix with Sass
スタイルシートのファイル分割ルール (plucore.log（プラコア ブログ）)
reset.css、clearfixを見直す｜1bit::memo
CSSのclearfixにoverflow:hiddenを使用してはいけない理由
float を使用したあとのスマートなclear:both | Nyan-Chew's Digital Life
floatの解除にclearfixを使って、思い通りのレイアウトに！ - Qiita
floatさせた要素を簡単にfloat解除させる「clearFix」
Sass(SCSS)の基本機能|メリット・デメリットも紹介！ | Bigmac inc
CSSのclearfixのメモ コピペ用 | ひかげStyle
3_greenblue01 - スクロールしても追従するメニュー （改良版）