IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
なんとなくCSSを使っている人が，CSS中級者になるために （「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して
CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば，CSS中級者だ。 以下は，CSS中級者になるためのノウハウ。 （１） 要素の分類 （１−１） インライン要素とブロック要素 （１−２） 置換インライン要素と非置換インライン要素 （２） 正確なポジショニング （２−１） positionのrelative/absoluteの使い方 （２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い （２−３） 要素内の高さ位置と，要素の高さ （２−４） floatの崩れない使い方 （３） 正確なテーブルレイ
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
最近ie9.jsを活用することが少々あるので、 いまさらながらまとめです。 配布場所 ie7-js http://code.google.com/p/ie7-js/で配布されています。 デモはhttp://ie7-js.googlecode.com/svn/test/index.htmlで見れます。 使い方 head内に [html] <!–[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]–> [/html] と貼り付けるだけです。フッターに貼ると誤作動起こす場合がたまに合ったような気がします。 できるようになること E > F 子セレクタ。直下の子要素にのみ適応するやつ。 E + F 隣接兄弟セレクタ。Eのすぐ下隣に居る弟要素
HTMLとかCSS ひよこちゃん向けシリーズ、【float】編です！CSSの【float】について本気出して説明してみた。left right ,clearってなに！？？ HTMLとかCSSとかこれから！な、ひよこちゃん向けシリーズ、【float】編です！ 2016/07/15 一番最後のほうにfloat clearfixの修正版追加しました。 float(フロート)とはなんぞや？ floatとは、要素（<div>とか<p>とか）を右に寄せたり、左に寄せたりするときに使います。 よくサイトで見られるサイドバーとかサイドメニューとかもfloatで配置することが多いですね。 まずは、プロパティをおさらいしておきましょう！ left 【左に寄せる】 right 【右に寄せる】 none 【やっぱフロートやめる】 inherit 【継承させる】←使うことあまりない プロパティは以上です。基本的にi
display:table-cell;は特性を理解してから使おう カンタンに横並びや縦横中央揃えができるという理由から「使わな損やで？」みたいに取り上げられがちなdisplay:table-cell;ですが、それ以上に仕様と特性をちゃんと理解していないと、結構危険なCSSプロパティです。 初心者なら「floatって挙動がよくわからないし、clearfixもどう使ったら良いのかわからん。」と理由で、上級者なら「IE8以上から上下中央揃えを実現できるなんて最高だぜヒャッホゥ！」といった理由から選択しがちですが、使う場合は以下の様なデメリットがあることを必ず踏まえておいてください。 レスポンシブレイアウトでの自由さがない コーディングの際にPCで5列、スマホで1列になるグリットレイアウトのデザインがあったとします。 そしてHTMLはなるべく分かりやすく、メンテナンスも簡単に済むように以下の形式で
実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ | Blog hamashun.com
実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions East に行ってきたのでまとめ 実践CSS3 & HTML5 with Microformats ワークショップ :: Web Directions Eastに行ってきました。 会場は恵比寿のとある会議室で、少人数（参加者10人弱くらい）で行われました。 講師はJohn Allsoppさんで、通訳にヤスヒサさん。 色んなお手伝い（という紹介でいいんでしょうか）にOli Studholmeさんというチームでした。 ヤスヒサさんは久しぶりにお会いしましたが、髪が伸びていました（お前が言うな）。 参加者の中で知ってる人はネコゼさんだけでした。 あの人とかあの人とか来ると思ったのになあ。。 休憩時間に技術評論社でHTML5の記事を書いた村田さんと名刺交換をさせてもらったりもしまし
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 初めてエンジニアらしい記事を書きます。 記念すべき？初回はHTML5のcontenteditableのお話です。 contenteditableコンテントエディタブル、と読みます。content editable。 こいつは何なのか、超ざっくり言ってしまうと、HTMLタグ内のテキストを編集可能にしてくれる属性、です。百聞は一見にしかずで例を出してみます。 <p contenteditable=true> コンテントエディタブル </p>これをブラウザで表示すると、pタグの中身が編集可能（キャレットを合わせて、キーボード入力可能）な状態になります。一般的にHTMLの世界でテキストを入力する手段といえば、inputやtextareaを思い浮かべるのではないかと思いますが、通常表示する
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など[2013.2.22改正] | Cappee Design
@cappeeです。 毎回ソーシャルボタンを検索するのもあれなので、リンク先をまとめておきたいと思います。 あと、ソーシャルボタンを設置した後ブラウザによってカウンターの吹き出しが切れてしまうことがあるので、その直し方もメモしておきます。 Facebook いいねボタン https://developers.facebook.com/docs/reference/plugins/like/ ※HTML5のコードで貼り付けるといいねした時にシェアのポップアップも表示されます。 いいねボックス https://developers.facebook.com/docs/reference/plugins/like-box/ コメント https://developers.facebook.com/docs/reference/plugins/comments/ おすすめボックス h
秋田＠豊作さんのStinger3 に対して行ったカスタマイズのセルフまとめ #Stinger-WPから確かにバトン受け取りました！！ ところで、皆さん、「Stingerのここを、もっとこうで、こうしたいんや」と思った時どうしますか？ 「stinger カスタマイズ」とかで検索しますよね。もしくは、このAdventCalendarの記事を全部見返すかもしれない。 Stngerは人気があるだけに、カスタマイズ記事も豊富ですから。 でもね、ひょっとするとですがね、もし自分がやりたいカスタマイズの方法が、どこにも見つからなかったらどうしましょう？ ・ ・・ ・・・ この記事について 安西先生のキツイお言葉に嗚咽をもらしながらも、わからんもんは、わからん。 うぅんぅぬんぅんぅん。 この記事は、そんなストレスを感じて悶々とした日々を送っている全Stingerユーザーに「これ知っておけば、自分の思うがま
初めまして 60歳を間近にウェブデザイナーを目指して独学で勉強しているお婆ちゃんです。 去年の暮れからphpを勉強して、初めてシステムらしきものを作ってみました。 やりたいこと プチ・クラウドストレージ ・ファイルをどこからでもアップ、保管してダウンロードもできる。 ・セキュリティも兼ねてIDとパスワードでログイン形式にする。 まずはパワーポイントでサイトの系図を設計しました。 Excel、Word、パワポは商工会議所で習いたてホヤホヤです。 それぞれ基礎編までクリアして1月半くらいかかりました。 全部で5万円くらいはかかったかな。 次は手順を考えてイメージを具体化。 これは無料版のAdobeのXDを使ってみました。 操作も簡単で、感覚的に作れちゃうので便利です。 ページ自体はシンプルにしたかったのでフォントだけで作りました。 コードを書くのもAdobeの無料Brackets。Adobeド
uBlock Origin（以降 uBO）を入れてから一年ちょい。 快適に使っているけれど、副作用というか誤爆も まあまあ ある。 気が付いたら その都度、Myフィルターにルールを追加して対応するのだけれど、たまにしかいじらないから文法とかぜんぜん頭に入ってないし、参考URL とかリンクを置いとくだけじゃダメだ。 というわけで、きちんと公式のページとか読んだ。 以下、未来の自分に向けてのメモ書き。 と、記事を書いてから随分と経ちます。 ちょいちょい機能変更があるので、ときどき記事を見直してはいますが、正確なところは公式を見てください。 この記事を書いた 2017年のときと比べると、公式のドキュメントも充実してきたことですし。 TL;DR まずは、ブロックの種類から Static Filter の文法 Static network filtering 対象のURL オプション Static
【CSS - zoom:1 - ★★★】 - hasLayout問題を解決するzoom:1;の落とし穴 ― Like@Lunatic
IEのヘンテコなCSS解釈の原因と言われるhasLayoutプロパティ。 どうやらこのhasLayoutプロパティの値がfalse（デフォルト値）の場合に、いろいろとまずいことが起こるようです。IEだけfloatした要素周辺のmarginやpaddingがおかしかったり、相対配置/絶対配置した要素がどこかに消えてしまったりする・・・という経験はcssレイアウトの際に誰もがぶつかる問題です。 また、hasLayoutがTrueとFalseの要素が混在している場合には、IE7のズーム機能を利用した際に、隣あった要素が重なってしまったりします。 この辺はコリスさんのIEでのCSSのバグを回避するhasLayoutに分かりやすい説明があります。 このhasLayoutの問題を解決するためにzoomプロパティが利用されることがあります。（zoomプロパティはIEの独自拡張であるため、これを使うこと自
スマートフォンの普及で、レスポンシブデザイン、スマホファーストが推奨されつつある中、今までどおりにテキストにリンク指定するだけでは、ユーザビリティを損ねてしまう場合があります。 例えばECサイトの検索結果一覧に表示される、画像とタイトル(テキスト)だけでなく、商品BOX(画像、タイトルが含まれる)全ての範囲にaタグ(リンク)を適用するCSSの書き方を記述します。 ※本文中にサンプルとして掲載しているBOXは全て、レスポンシブデザイン対応しているので、PCでご覧の方はブラウンザの幅を小さくしたり大きくしたりすることで、BOXにの伸縮を確認できます。 PR .link_box{ position:relative; width:30%; padding:5%; border:solid 1px #CCC; margin:0px auto 20px; } .link_box a{ positio
HTML、CSS、JavaScriptのお勉強まとめ 学習書籍「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」 ソース：https://github.com/tseno/Basic_HTML_CSS_JavaScript 第2章 申し込みフォームの作成 cssファイルの先頭に@import url(sanitize.css)を置くとcssがリセットされる。または、@import url(https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/4.1.0/sanitize.min.css); margin: 10px auto; のように、左右指定をautoにすると中央寄せされる。 margin ：要素の外の余白、padding：要素の中の余白。 box-shadow: 0 0 8px rgba(
Internet Explorer 8では使えないCSS
Internet Explorer 8では、ひらたくいうとCSS3から使えるようになったもの全般が効かないのですが プログレッシブ・エンハンスメント対応の場合切り捨てられる装飾 そして 対応してなかったのをうっかり忘れがちな便利要素 を中心にピックアップしてみました。 便利な装飾プロパティ 角丸のborder-radiusが使えない 色と不透明度を同時に指定できるrgbaが使えない 影をつけるbox-shadowとtext-shadowが使えない レスポンシブデザイン対応 media max-width min-width が使えない 疑似クラス :last-child が使えない :nth-child() が使えない 擬似要素 擬似要素を::after(または::before)の書式で書けない 擬似要素にz-indexがきかない 擬似要素にfilterがきかない 便利な装飾プロパティ 角
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
【軽い軽い】サルでもできる！広告キラーABP導入 Firefox編【効いてる効いてるｗｗｗ】 蟹速報は移転しました
【軽い軽い】サルでもできる！広告キラーABP導入 Firefox編【効いてる効いてるｗｗｗ】 ツイート カテゴリ:知識検証 参考スレ：http://awabi.2ch.net/test/read.cgi/poverty/1327644500/ http://pcskill.kuronowish.com/software/firefox/AdblockPlus.html ◆サルでもできる！広告キラーABP導入 Firefox編 ・アホでもできるしお金は一切かからないよ ・もしIEとかいう糞ブラウザを使ってるならブラウジング自体マシになるよ ・うっざい広告を皆殺しにして快適なwebライフ 手順 1. Firefoxを起動し、「ツール」→「アドオン」をクリックします。 2. 「アドオンを入手」をクリックした後、検索バーに「Adblock Plus」と入力します。 3. 一番上に出てくる、「Adb
ファイルアップロードのinput type="file"にsize属性とwidthスタイルを適用してみたテスト - kanonji’s diary
ファイルアップロードのinput要素の横幅の扱いが、各ブラウザで異なるようなので、まずは比べてみました。 概要 input要素は下記の4種類を比べてみました。 size属性もwidthも無し。 size="30" width:300px; size="30" と width:300px; あ、size="30"とwidth:300px;は、別に同じ長さになるかとか確認してないです。 結果 下のほうに、スクリーンショットと、使用したhtmlソースコードがあります。 WebKit系のSafariとChromeは、そもそもinput type="file"で生成されるUIが特殊です。 size="30"だと短すぎた可能性もありますが、widthは正しく反映されているような雰囲気です。 IE6とOperaは、割と期待通りの動きをしている気がします。 sizeが有効で、widthが設定されれば、さら
さて【CSS 中級講座】シリーズ第２弾は、CSSコーディングには必携の知識「clearfix」について。 なんらかの要素を float した場合、しっかりそれを解除しないと続く要素にも影響しちゃって、レイアウトが崩れてしまいます。 そんな困った時に使われる「float状態を解除する方法」を通称して「clearfix（クリアフィックス）」と呼ぶのですが、実はいろいろな方法があります。 有名所としては「:after疑似要素 + contentプロパティ + IE用ハック」ってのがありますが、そんな手間をかけずとも、もっとシンプルにfloat解除する方法、あります！ そんな訳で、さっそくいってみましょー！ 実装前の状態 まず最初に、clearfixを使う前の「レイアウト崩れてもうた」状態のマークアップをば。 <div id="contents"> <div id="main"> <p>ここは<b
[CSS]floatの指定が有る要素の親要素に高さを持たせる方法 | Coffee Breakにプログラミング備忘録
divにfloatを効かせた場合の親要素に与える影響について対処法をメモ 親要素divとその小要素divがある関係性の時に、小要素divにfloatを付けると親要素divの高さが0になる（下図） ※下図の場合は行間、margin、paddingの影響で多少の高さがでている状態。 この場合、mainに対して背景色などの設定をした場合にdivの高さがないため、範囲全体に適用されない。 この事象に対する2つの改善方法を記載する 対処法1.clear: both;を新たに作成するコンテントに設定 スタンダードな改善方法。 mainにコンテントを作成しclearfixとしてclear: both;を適用させることでflortをクリア（回り込み解除）する clear: both;を適用する事でクリアされmainが全体を括るサイズとなる。 まずclear: both;を適用させる要素がないためmainの
![[CSS]floatの指定が有る要素の親要素に高さを持たせる方法 | Coffee Breakにプログラミング備忘録](https://cdn-ak-scissors.b.st-hatena.com/image/square/e66e7643d72d4b529afb01e1a87534b7fc2583af/height=288;version=1;width=512/http%3A%2F%2Fto-developer.com%2Fblog%2Fwp-content%2Fuploads%2F2013%2F08%2Fclearfix_l.png)
ホームページを作成していると、画像を中央に寄せたいと思うことがよくあります。 意外とブロック要素で括ってtext-align属性で中央寄せをしている方も多いようですので、今回は簡単に画像を中央寄せ（左寄せ・右寄せ）する方法を紹介します。 text-align属性で中央寄せ まず先に紹介した「text-align属性で中央寄せ」ですが、例えば以下のようなhtmlの場合があります。 <div> <p><img src="画像のパス" alt="画像の代替文" /></p> <p>サンプルテキスト。サンプルテキスト</p> </div> このとき、CSSは以下のようになりますね div p{ text-align:center; } しかし、これだと、画像の下の<p>サンプルテキスト。サンプルテキスト</p>まで中央によってしまいます。これを避けるには、img要素を括っているp要素にid/cla
前段 Sass始めました。くそ便利ですねこれ。 したいこと 以下のような幅の違う横長なナビゲーションがあると想定して、これをCSS Spritesを使ってなるべく簡単にCSSを書きたい。 CSS Spritesは手計算でやるとくそメンドイので。 ┏━━━┳━━━━━┳━┳━━┳━━━┓ ┗━━━┻━━━━━┻━┻━━┻━━━┛ 前提1 Sprites画像 ナビゲーションはホバー時に画像が置換される。 そのSprites画像は以下のように上段に通常のナビゲーションの画像、下段にホバー時のナビゲーションの画像がくっついていると仮定する。 ┏━━━┳━━━━━┳━┳━━┳━━━┓ ┣━━━╋━━━━━╋━╋━━╋━━━┫ ┗━━━┻━━━━━┻━┻━━┻━━━┛ 前提2 HTML 以下のようなHTMLがある仮定する。 <!DOCTYPE html> <html> <head> <meta cha
※本記事は2016年2月14日に公開された記事を一部加筆・修正しています。 あけましておめでとうございます。 最近朝ジョナにハマってます山田でございます。 横並びレイアウトのジレンマ Web制作では毎度毎度お世話になる横並びレイアウトちゃんですが、floatにしろinline-blockにしろtable-cellにしろ、横並びを実現するための色々な方法が巷では語られているものの、それぞれ一癖も二癖もあって扱いづらいのはみなさんご存知の通りです。 ということで、この度は僭越ながら2017年の横並びレイアウトCSSをこの場を借りまして決定させていただく運びとなりました。 ずばり、 2017年は「Flexbox」です！ 異論は受け付けておりませんので、何卒ご了承の程よろしくお願い申し上げます。 Flexboxとは何や CSS3 Flexible Box – W3Schools こちらをご覧いただ
同じスタイルを指定しているのにブラウザによって表示が異なるなどのバグ・トラブルについて解説します。 グローバルナビゲーション webサイト（ホームページ）作成基礎 HTML・CSS基礎 ステップアップ ＆ 小技 素材・テンプレートなど 資料 CSSバグとは何か CSSバグは、ブラウザによるCSSの独自の解釈により、作成者の思ったとおりではない、あるいは他のブラウザと異なる表示のされ方をしてしまう現象を指します。 CSSバグの回避法・初歩の初歩 CSS作成中の表示確認はSafari・Opera・Firefoxなどで行う 残念ながら、ユーザーが多いInternet Explorerにはたくさんのバグが存在します。より多くのブラウザでできるだけ思い通りのデザインを実現したい場合は、上記のようなCSSを極力正しく解釈するブラウザに合わせてCSSを書き、その後IE向けに調整する方が効率的です（参考：
JavaScript1000本ノックで作った物を載せていく場所 11月1週目 フォームにフォーカスしたらデフォルトテキストが消える 11月2週目 タブでコンテンツを切り替える 11月3週目 IEでもimg要素のlabelを効かせる 11月4週目 lightbox風の物を作ってみる 12月1週目 チェックボックスを一括してチェック 12月2週目 Twitter Search的な何か 12月3週目 clearfix Generator 12月4週目 JavaScript製簡易的Twitterクライアント（作り途中） 12月5週目 IEでもimg要素のlabelを効かせる（ライブラリ無し版） 1月1週目 imageのフォームボタンをロールオーバー 1月2週目 ページ内のリストの中から目的の物を探し出す 1月3週目 canvasでモンドリアン風の絵を描いてみる 1月4週目 canvasでグラフを描
先日ポートフォリオサイトをリニューアルした時に、CSSフレームワークであるLESSを初めて使いました。まぁ普通のCSSに比べてその便利さに感動したんですけど(今さらすぎてアレですけど)、「これってレスポンシブなサイト作る時にすげぇ楽だよな」と思ったので、その辺をちょっとまとめてみます。 お先に先人の方々 レスポンシブ対応に使えそうなLESS/Sassの書き方 | Good thinking 【Sass】Sassでレスポンシブ！メディアクエリを便利に書こう。 | バシャログ。 Sassを使ってレスポンシブウェブデザインにする時に覚えておいた方がいいこと4つ | howtohp いやもう参考になりすぎて…なんで僕こんなエントリー書いてるんだろ…。 下2つはSass(SCSS)についてのエントリーですが、書き方が違うだけで考え方はだいたい同じです。 ブレークポイントの設定やらなんやら レス
コーダーが気にしちゃうことバトン - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 反応されたなら、書かざるをえまい！ それが責任と言うものだ（何 エディタは何使ってますか？ 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？ ブラウザごとのCSSバグ対処方法はどうしてますか？ 画像置換についてどう思いますか？ 印刷についてどうしてますか？ スクリーンリーダーにて確認などはしますか？ IE7のズーム機能について、対応させていますか？ JavaScriptライブラリのライセンスについてクライアントに説明しますか？ JavaScriptのフレームワークを使いますか？使っている場合は何を使っています
TEL:075-200-6102(平日9:00～18:00) 担当田中までお気軽にお問い合わせください。 どんな時でも元気に対応いたします。 htmlとcssを使いなれてきてfloatのレイアウトも組めるようになってきたぞ！ ってときに少しつまずくのがfloatの処理です。 「floatをかけたら、clearすればいいんでしょ？」 と、 .clear{ clear:both; line-height:0; } をfloatしたボックスの下のbrにclass="clear"つけて回避したものの表示がおかしい。 floatの親ボックスに指定している 「margin-bottomが効いていない」「backgroundが出ていない」 といった現象が起こります。 なんで？どうすればいいの？という時に使うのがclearfixです。 実際にサンプルをもとに見ていきましょう。
Privoxy のフィルタ - な○の 屋
先日には Beta のバージョンも 4 へ入り、そろそろ安定版も 4 に到達しそうな GoogleChrome 。 GoogleChrome とペアで使い始めた Privoxy、今日 2010/01/20 現在 Privoxy は 3.0.15 beta 。 Privoxy は GoogleChrome とだけでなく、Firefox、IE 全ての組み合わせで個人的必携なアプリに。 Privoxy は Adblock+(Firefoxの/GoogleChromeの) とは比較できないぐらい手軽さで"負けている"ものの、プロキシさえ通せばブラウザは言うに及ばず他のPCなどでも(使わないけどREGZAでも)フィルタリングの一元管理できる事が特に便利。 何より、「非表示」ではなく「最初から無かった」的な状態にしてしまえるのが心地良い、さらには自分に読みやすいようにページを書き換えてしまえるのは気分
以前、「「clearfix」についてちょっと考えてみた。」という記事を書きましたが、 その時は、「「clearfix」はどこでどんなことををしているのか」についてのみ触れましたので、 今回はclearfixのバリエーションについてです。 ■おさらい：初めて「clearfix」というclass名が使われたもの（2004/5/14） .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-m
ブラウザ上でのちょっとしたアニメーション、っていうと長い間 jQuery がそのデファクトの座にいたわけですが、モバイルだと重いし、各ブラウザの CSS3 実装も進んできたし、そろそろ CSS3 だよね！ というわけで、重い腰を上げて本気で CSS3 アニメーション書いてみました。いろいろ調べながら書いているので、ダメな所とか突っ込み歓迎です。 今回は連載の第 1 回目、"Cap" と題して、アイコンに蓋をかぶせてみたいと思います。 ※注意！ ページの下の方にループしているアニメーションがありますが、そのせいで長時間ページを開いたままにしていると、Chrome / Firefox 共に少しずつ重たくなってきます。特に Firefox の方が顕著です。 おそらく何らかのバグではないかと思うのですが、将来的に解消されるまでは、ページが重たくなったらタブを閉じて開きなおして下さい。リロードでも解
![そろそろ本気で CSS3 アニメーション [その1 - Cap]](https://cdn-ak-scissors.b.st-hatena.com/image/square/bfce051a419b91ee728044e598f8b651644d8486/height=288;version=1;width=512/https%3A%2F%2Fwww.otchy.net%2Fs%2Fimg%2Fcover%2Fdefault.jpg)
とあるコーダーの備忘録 日々のマークアップ＆CSSコーディング業務の中で蓄積されていくちょっとしたノウハウとかバグ情報とかいろいろ備忘録的に記録していきます。 後続要素が無いためにclear:both;でフロート解除できない場合、フロートしている子要素を包む親要素に対してoverflow:hidden;を設定したり、clearfixを使ったりすると思いますが、双方メリット・デメリットがあるのでまとめておきます。 【overflow:hidden;】 ＜メリット＞ ・classを追加する必要がないのでHTMLソースコードをシンプルに保てる ・１行で済むので簡単 ・DWのデザインビューが崩れない ＜デメリット＞ ・IE6で効かないことが多いのでIE6用ハック（zoom:1;）を併用する必要がある。 ・FireFoxで印刷バグが発生することがある。 【clearfix】 ＜メリット＞ ・IE6含
http://uniqlo-happy-line.s2factory.co.jp/system/data/all_line_tweets.txt
1 1 http://s.twimg.com/a/1274144130/images/default_profile_3_normal.png 14604129017 UNIQLO LUCKY LINEに行列なう。 1番ゲット！ http://www.uniqlo.com/jp/#line #uniqlo_line 1274678315 2 2 http://s.twimg.com/a/1274144130/images/default_profile_1_normal.png 14621371027 おっともう22時だわさ。 1274705940 3 3 http://s.twimg.com/a/1274144130/images/default_profile_6_normal.png 14605511351 ならんでみたー UNIQLO LUCKY LINEに行列なう。 3番ゲット！
CSSでスタイルを整える 続いて、マークアップを施した要素に対してCSSでスタイルを整えていきます。新しいCSSファイルを作成してHTMLからリンクします。 <link rel="stylesheet" href="_shared/css/base.css"> このCSSファイルの中にスタイルを記述していきましょう。bodyやp要素など基本的なスタイルを整えると以下のようになります。 body { font:14px/1.231 "ヒラギノ角ゴ Pro W3"; } #wrap { padding: 10px; } section, nav { margin-bottom: 1em; } p { margin-bottom: 1em; } /* clearfix */ .clearfix:after { content: "."; /* 新しい要素を作る */ display: bloc
困ったこと↓ 特定のmarginを指定している時だけ、なぜか100％Dreamweaverがフリーズする。 phpのインクルード先に該当コードがある時に、require_onceをコメントアウトしてもフリーズする。 （コメントにしていても読みに行ってしまうのか？） 原因↓ Dreamweaver CS5の現在、そのままではclearfixがデザインビューに反映されない。 clearfixを使用してデザインビューを見ると、親Boxのheightが効いていないのに加え、CSSスタイルパネルが延々と表示の更新が繰り返されたり、上記のような特定のcssでフリーズする。 対処↓ clearfixにoverflow: hidden;を追加する。 clearfix分の表示も整い、フリーズも消えた。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
floatを解除する手法のclearfix と 次世代のレイアウトの話
clearfixでfloatを解除 | d-spica
CSSで要素を横並びにする方法まとめ | HALAWATA.NET
ie9.jsを使うと出来ること、出来なくなること。 - Toro_Unit
CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ！
display:table-cell;を安易に使うべきでない理由いろいろ - Qiita
CSSで要素を横並びにする方法まとめ | HALAWATA.NET
noteと"contenteditable"｜ct8ker｜note
WordPressのStingerを自由自在にカスタマイズするための８つの修行
プチ・クラウドストレージ作ってみた - Qiita
uBlock Origin 再び ＠Firefox - おまえ、うまそうだな
リンク(aタグ)をブロック要素(div)全体に効かせるCSS
「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」まとめ - Qiita
【CSS 中級講座】floatを解除するclearfixのビューティフルな実装法
画像を簡単に中央寄せする | tyto-style
SassでCSS Spritesをなるべく簡単に書きたい - あと味
【実例あり】2017年の横並びレイアウトCSSはこれで決まり！【決定版】 | 株式会社ギルモット
CSSのバグやトラブルについて - 10press
JavaScript1000本ノック | hamashun.com
LESSでサクッとレスポンシブWeb | ryodesignblog
[html/css]clearfixとclearの違い｜京都 WEB制作 株式会社エニシスアソシエイツ
もう一度、「clearfix」について考えてみた。 ｜ Tips Note by TAM
そろそろ本気で CSS3 アニメーション [その1 - Cap]
とあるコーダーの備忘録 |overflow:hidden;とclearfix
HTML5/CSS3で作るスマートフォンサイトの基本 (4/5)
デザインビューでDreamweaverがフリーズする件 | Moral Hazard!! | モラルハザード!!