floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな

デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅

webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ

スマートフォンサイト 6-06 jQuey Mobileプラグイン DateBoxを利用する jQuery Mobileには、様々なプラグインがある。 ここでは、カレンダーを表示するjQuery Mobileのプラグインである DateBoxについて紹介する。 制作・文／小川和真（ビヨンド・パースペクティブ・ソリューションズ株式会社） BROWSER iOS…4over　Android…1.5over DateBoxについて DateBoxは日付や時間の入力を行いやすいように工夫されたjQuery Mobileプラグインである【01】。DateBoxにはカレンダー形式、スライド形式、フリップ形式、加減フリップ形式、加減ボタン形式といった様々な入力UIが用意されている【02】。 【01】DateBoxプラグインサイト（http://dev.jtsage.com/jQM-DateBox2/）。

iPhone、Androidなどのスマートフォンで動作するjQueryMobileプラグイン - DateBoxが、jQueryMobile v1.1.1に対応*1したので、前回に続き、しつこくまとめてみました。 カレンダー式入力モードを少し使ってみた感じでは、以前より動作が大分安定してきています。 設定オプションがかなり増え、日本語用ローカライズファイルを読込むことで、簡単に日本語表記になってくれます。 また、デフォルトでマニュアル入力が無効にされているので、カレンダーが表示されたと同時にソフトキーボードが起動するということも無くなりました。 以下、主にカレンダー式入力モード（CalBox mode）についてまとめています。 jQueryMobile DateBox とは jQueryMobile DateBox の使い方 必須条件 必要なJavaScriptとCSSを読込む 入力フィー

説明書を読まなくても使い方がわかるのが、iPhoneの魅力であり強みです。しかし、知っているつもりが正しく理解していないこともあるはず。このコーナーでは、そんな「いまさら聞けないiPhoneのなぜ」をわかりやすく解説します。今回は、「iPadのACアダプタでiPhoneを充電してもいいの?」という質問に答えます。 ＊＊＊ 結論からいうと、iPadに付属のACアダプタでiPhoneを充電しても問題ありません。Appleの公式サポート情報にもその旨の記載があるため、安心して利用できます。単品販売されている「Apple 12W USB電源アダプタ」の対応機種一覧にも、しっかりと歴代iPhoneの名が記されています)。 なぜこのような心配が生じるかというと、iPadに内蔵されている大容量バッテリーを高速充電するには、USBの規格を超えた電力が必要だからです。そのためiPadに付属するACアダプタは

バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が

こんにちは～　仕事が恋人のデザイナー、王です φ(≖ω≖｡)♪。 最近海外でもてはやされまくりのテキストエディタ「Sublime Text」と恋に落ちたことをこの場で告白したい！ やっと出会えたぞ！僕が探し求めていた幻のエディタに！！ 昨今話題沸騰中の「Sublime Text」エディタについて、ご紹介しましょう！本記事を読んで、ぜひとも他のエディタからSublime Textに乗り換えていただきたいです！ 見た目的には、このように、優雅（Sublime）そのもの！ Mac、Windows、Linux　三大プラットフォームで動くのも嬉しいですな！ 公式サイトは下記リンクです。 https://www.sublimetext.com/ それでは、動画やキャプチャーを使ってSublime Textの素晴らしい魅力を伝えていきたいと思います。 Sublime Textのチャームポイント 特色機能

SourceGear | DiffMerge | overview http://sourcegear.com/diffmerge/index.html 以下の3つに対応したツール。 フォルダの内容を比較 ファイルの内容を比較 マージ 使用画面 起動時 アイコンは左から「フォルダの内容を比較」「ファイルの内容を比較」「マージ」。 フォルダ比較 比較するフォルダの選択。 同じ名前のファイルを確認する時は赤枠のアイコンをクリックします。 ファイル名は等しいけれど内容は異なる場合はこの様に表示されます。 以下、その右に有る3つのアイコンについての解説。 【ほぼ同じファイル】 半角の空白以外の差異が無いファイル。あくまで「半角の空白」のみで全角の空白や改行が異なるものはここには表示されません。 【差異を表示】 2つのフォルダの差異を表示します。 【フォルダ表示】 結果表示にフォルダも含める。 ファ