君は自分の書いたCSSを本当に理解しているのか？
CSSは非常に簡単な言語だ。セレクタとプロパティと値を宣言するだけである。だが、スパゲッティなコードにならずにメンテナンスしやすく、スケーラブルなCSSを書くことは非常に難しい。 そのため、あなたの書くスタイルシートは時とともに重く、汚いものになっていき、手の施しようがなくなる。そうなると、今度はそれを読み込むWebサイト・アプリに害をもたらすことになってしまう。 そう、Critical Rendering Pathの問題だ。レンダリングをブロックするのはなにもJavaScriptだけではない。CSSもレンダリングをブロックするので、我々はCSSに関しても細心の注意を払わなければならない。 しかし、CSSを書く人にその意識があるのだろうか、疑問だ。前述のとおり、CSSをただ書くこと自体は簡単なため、CSSという言語自体も軽んじられている気がする。 CSSを書くためには自分を厳しく律しなけれ
WebデザイナーのためのSass/Compass入門 先生：石本 光司
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/228/room ーーーーーーーーーーーーーーーーーーーーーーー
Object Oriented CSS · stubbornella/oocss Wiki
Object Oriented CSS Slides: https://www.slideshare.net/stubbornella/object-oriented-css How do you scale CSS for thousands of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites. Nicole Sullivan first presented it at We
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
ボックス－CSSの基本
■ボックス 内容・パディング・ボーダー・マージン 要素は、ボックスと呼ばれる領域を生成します。 ボックスは、内容（content）、パディング（padding）、ボーダー（border）、マージン（margin）から成り立ちます。 内容（content） widthプロパティとheightプロパティで指定する領域です。この部分にテキストや画像などの要素内容が表示されます。 パディング（padding） paddingプロパティで指定する内側余白です。この部分には背景が適用されます。 ボーダー（border） borderプロパティで指定する境界線です。太さ・線種・色を指定することができます。 マージン（margin） marginプロパティで指定する外側余白です。この部分には背景は適用されません。 ボックスサイズの算出 ボックス全体のサイズは、内容領域・パディング・ボーダー・マージンの合計
margin-top派かmargin-bottom派で言えば、margin-top派です - あと味
世の中にはmargin-top派とmargin-bottom派がいるとかいないとか。 自分はmargin-top派です。 margin-left派とmargin-right派がいるならば、margin-left派です。 試しにmargin-bottom派になってみようかなと頑張ってみたんですけど、やはり慣れもあり、margin-topの方がしっくりきたのでエントリーを起こすことにしました。 margin-top派な理由 margin-top派になったのには理由はなくて、なんとなくmargin-top派になった気がするのですが、margin-bottom派に移るのが少し面倒な理由はあります。 その理由は:first-child擬似クラスの存在です。 例1 例えば、以下の様なHTMLがあったとします。各section.contentの間には30pxの余白が欲しかったとします。 <section
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
みなさんは、サイトをスクラッチで作る時にどうされていますか？ HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか？ それは、 パーツが完璧に揃いすぎている！ のが原因です。 Twitter Bootstrapがバージ
a:hoverを使ってアンカーのスタイルをJavaScriptを利用せずスタイルシートだけで変更します
疑似クラス a:hover を使うと アンカーテキストにマウスが来たとき(onmouseover)にアンカーのスタイルを変更する という動作を、JavaScriptを利用しなくてもスタイルシートだけで実行する事が出来ます。 スタイルの変更 CSSコード
縦タブを作る - Cheese Pie
これまで横のタブデザインは何回か作ったけど、縦のタブデザインを初めて作ったのでメモっておく。 DOCTYPEは、XHTML1.0 Transitional で作ってます。 タブ部分横幅固定でコンテンツ部分はリキッド。 まず、タブとコンテンツをマークアップします。 <div class="tabWrap"> <ul class="tabList"> <li class="tab">hogehoge</li> <li class="currentTab">foo</li> <li class="tab">bar</li> </ul> </div> <div class="inputArea"> <span>Tab Contents</span> <p>contentscontentscontentscontents</p> </div> 次に、タブとコンテンツが横並びになるようにスタイルを指定
読み込み中にNow Loading...を表示 - 水無月
当ブログデザインは、IE6以前のブラウザには対応していません。 できれば、お使いのブラウザを新しいものへ更新してください。 Windows Internet Explorer 8: ホーム JavaScriptでページ読み込み中に画像等を表示する方法の紹介です。 下の画像のようなものを読み込み中のみ表示させます。 読み込み完了時の処理にはJavaScriptのonloadを使用します。 そのonloadで読み込みが完了したとき、JavaScriptからスタイルを指定して非表示にします。 今回はHTML、JavaScript、CSSを利用し作成します。 では早速HTMLに書く内容から書き始めます。 赤字は各々で変更してください。(書いてあるURLに飛べばどんな内容か分かると思います) HTML <body onLoad="init()"> <script type="text/javascr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Simple CSS: How To Make Clickable Areas Bigger · The Watchmaker Project
【旧版】Bootstrap 3.0入門 (全18回) - プログラミングならドットインストール
いまさら聞けないCSSレイアウト入門
現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）
Amazon.co.jp: Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語: 平澤隆, 森田壮: 本
Amazon.co.jp: 現場のプロから学ぶXHTML+CSS: 益子貴寛 (著), 堀内敬子 (著), 小林信次 (著), 千貫りこ (著), 伊藤学 (著), 山田あかね (著), 西畑一馬 (著), CSS Nite (編集): 本
Edit fiddle - JSFiddle - Code Playground
Components · Twitter Bootstrap
サービス終了のお知らせ
CSSの優先順位〜CSSテクニック〜