理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
cssの情報・まとめ
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版RoundedCornr / 角丸のHTML・CSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of
Sexy Music Album Overlays · Komodo Media
Resources Download Sample File Download PNG overlays Preview Show Mass Love It’s the social web now. We share everything, from our musical tastes, to the bacon avocado burger we ate for breakfast , to the very funny things we say and do. With amazing APIs such as the ones offered by Last.fm, Twitter, Flickr and more, we can now put them all on our sites, showing close to real-time updates of the m
WEB色見本 原色大辞典 - HTMLカラーコード
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
norah'# : CSS でグラデーション
Firefox 用の拡張機能を公開するサイト兼駄文(目指せ!! 打倒 真鍋かをり)Trunk に -moz-linear-gradient が入ったので試してみた。-moz-linear-gradient というのは CSS でグラデーションを実現するもので、Chrome の Beta 版なんかでも使える -webkit-gradient と同じもの。 実際に使ったものが上のスクリーンショットなんだけど、片方はグラデーションした画像を貼り付けている物で、片方は CSS を使ってブラウザにレンダリングさせていて、画像と違ってブラウザがレンダリングするので多用すると動作が遅くなる場合もあるみたいだけど、今まで簡単なグラデーションのためにわざわざ画像を貼り付けているようなケース（例えば Mac 版のコンテキストメニューの選択表示とか)なら CSS で代用できるレベルだと思う。 ちなみにスクリ
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
セレクタ - CSS2 リファレンス
この文書では，CSS2のセレクタ構文とその概要について述べます。CSSでは適用対象の選択のためにセレクタと呼ばれるパターンマッチングの規則が用いられ，文書ツリーの各要素に適用されるスタイル規則を決定します。 このセレクタの章を読み始める前に，まづCSS2構文の概説を通読されることを，お奨めします。 目次 パターンマッチング（Pattern matching） セレクタの構文（Selector syntax） グループ化（Grouping） 全称セレクタ（Universal selector） タイプセレクタ（Type selectors） 子孫セレクタ（Descendant selectors） 子供セレクタ（Child selectors） 隣接兄弟セレクタ（Adjacent sibling selectors） 属性セレクタ（Attribute selectors） クラスセレクタ（C
Web Directions East「実践 CSS3 & HTML5 with Microformats ワークショップ」レポート | gihyo.jp
上記の表の「*」の部分にはプロパティ名が入ります。なぜこのようなプレフィックスが必要かというと、仕様として完全に固まっていない要素であるということ、そしてブラウザ側でバグがあるかもしれないがベータとして実装している場合がある、この2つが理由としてあげられます。 レイアウト HTML5の書き方やCSS3の書き方の説明後、レイアウトの説明が行われました。 ブラウザリセット Internet Explorerの問題がありますが、テストしきれていないベータのブラウザなどもあり、一概にデフォルトセッティングが今後も仕様が変更されない保証はありません。 このreset.cssを使用するのは非常に有効です。 カラム落ちの原因 フロートを使用してカラム落ちしてしまう原因は、各ブラウザのボックスモデルの違いによるものです。たとえば、%などで横幅の指定をしてもwidthの計算方法がブラウザごとに違います。 特
iモードブラウザ2.0のJavaScript (Kanasansoft Web Lab.)
今日、正確には昨日発表されたdocomoの携帯電話に組み込まれているiモードブラウザがやっとJavaScriptに対応したようだ。 他には外部CSSやCookieにも対応している。 これまでのドコモはWindows・Microsoftよりのイメージだった。ダウンロードできるツールは(ほぼ?)全てWindowsでしか使えなかったり、サービスもWindowsばかりだった。JavaScriptもWindows寄りだったら嫌だなぁと思っていたが、今回はどうも違うらしい。 仕様をざっと見たところ、標準に準拠しているようだ。例えば、addEventListenerがあってattachEventはなかったり。XMLHttpRequestにも対応しているのを見てちょっと興奮した。Cookieに対応したため、個体識別番号を使う必要がなくなり、開発も楽になるし(個体識別番号による名寄せが不可能になるため)セキ
XPathからセレクタへの移植は簡単なお仕事です - 2009-04-27 - fublog
みんなセレクタ登録しようぜ！って書いたのに1件も増えてなかったので現状fub専用のDBなんて俺しかメンテしないんだったらこりゃダメだな、と思ったんだけど更新履歴見たら試行錯誤してた人が1人いたので少し希望があった。 セレクタ書き方講座みたいの書いたら少しは増えるだろうか。MSN産経ニュースは俺が書いちゃったけど。 ステータスバーのアイコンダブルクリッコでuser.jsを無効にすると以後有効にしてもスクリプトエラーになってたので、一応exeだけ差し替えておきました。 http://madchester.s54.xrea.com/archives/test.zip あとユーザースタイルシートの効きが悪い件は認識済みなのですが、IE8のバグだと思うのでちょっと保留中です。（以前のよく効く方式だと全く適用されずに違う方法で適用してます） 最終的に捨てるかもしんないしあれだけど、頭の体操だと思って1
JavaScriptでCSSとイベントを扱う from Kanasan.JS | Blog.37to.net
最終更新日 Sun, 19 Apr 2009 20:27:25 +0900 最後のコメント Mon, 14 Jul 2014 08:14:00 +0900 ブックマーク 先日開催された、Kanasan.JS JavaScript第五版読書会#7のレポートです。 今回はCSSとイベント処理の入門的内容でした。 ご参加頂いた皆様、ありがとうございました。 JavaScriptからCSSを扱う それ程難しくはないので、簡単にまとめておきます。 はまりがちな事 Element.style.colorなど、Element.style.〜のスタイルオブジェクトで操作出来るのは、 インライン指定されたスタイルのみなので気を付ける必要があります。 僕も最初の頃は知らずによく間違えていたのですが、これを知っていると無駄に時間を使わなくて済むと思います。 <style> #foo { background-c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS4セレクタ (Selectors Level 4) の新機能
Web制作 W3G
IBM Developer
uuAltCSS.js をリリースしました。 - latest log
JavaScriptからCSSを操作する方法を結構詳しく調べてみた (Kanasansoft Web Lab.)