IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
Sassオレオレリファレンス
このリファレンスについて 元は社内提出用に書いたレポートです。 レポートは１ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。 （ついでにかなり加筆修正しています） 内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。 もし内容に間違いなどありましたらご一報お願い致します。 おことわり 筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
OOCSS（オブジェクト指向CSS）のススメ | hijiriworld Web
【OOCSS】 <div class="box box-red"></div> <div class="box box-blue"></div> .box { width: 50px; height: 50px; } .box-red { border: 1px solid red; background-color: #FFCCCC; } .box-blue { border: 1px solid blue; background-color: #66CCFF; } といった感じです。 いままで「OOCSS」という言葉を知らなくても、マークアップエンジニアや、ある程度経験のあるWebデザインナーであれば、効率化を図るために自然にやっていることではないでしょうか？ この考え方を体系化してまとめたものがOOCSSです。 では次にOOCSSがどのような考え方のもとに設計されたのかを見ていきまし
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
第1回 LESSのメリットと導入方法 | gihyo.jp
CSSをより柔軟に、わかりやすく、速く、ミスを少なく記述できる 最近、CSSの拡張メタ言語「LESS」が話題になっています。LESSとは、かんたんに言えば、CSSの良いところを活かしつつも 「より柔軟に」 「よりわかりやすく」 「より速く」 「よりミスを少なく」 記述できるという、新しい書き方です。うさんくさいと感じるほどにいいことづくめですね。 CSSの拡張メタ言語には、LESSの他にも、Sass、Stylusといったものがありますが、LESSは一番CSSの書式に近く、活用するためのツールがそろっているのが特徴です。 最近LESSについて、はてなブックマークや技術系ブログでもたくさんとりあげられているので、実際に興味を持っている方や試した方もいらっしゃるかもしれません。しかし、まだ入門記事が多く、実際に導入したときのメリットをイメージできないことも多いのではないでしょうか？ 本連載では、
CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
CSS3 properties exposed | css3files.com
Enables to animate an element. Every animation consists of the animation properties, e.g. delay and duration, and the related keyframes, which define its appearance. Compatibility -webkit-animation Safari 5+, Chrome 10+ iOS 3.2+ Android 4+ Blackberry 7+ @-webkit-keyframes animation Firefox 16+ Internet Explorer 10+ Opera 12.1+ IE Mobile 10+ @keyframes Not supported by Firefox prior to version 5, I
基礎から理解するためのCSS3に関するサイトのまとめ｜Webpark
CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。 CSS3リファレンス 有名なサイトですね。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。 CSS-EBLOG 各ブラウザで先行実装しているCSSプロパティがまとめられています。 CSS3 Files 【2010.4.25 追加】海外サイトですが非常に見やすいです。各ブラウザの対応状況の載っていて重宝します。 次にブラウザごとの対応状況を確認するサイトを紹介。 HTML5 & CSS3 READINESS HTML5とCSS3のブラウザごとの適応状況を視覚的に見ることができます。2008年からの年別でも見ることができます。 HTML5 & CSS3 Support こちらもブラウザごとの対応状況がまとめられています。CSS3はプロパティ、セ
CSSフレームワーク『BlueTrip』が想像以上にすごい - present
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね！ さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
「イカワイパー」なHTMLベースのプレゼンツール「SliDegeso」を作ってみたでゲソ « 岩家ぶろぐ
はじめに イカ娘の侵略度合いの激しさが増す今日この頃，みなさまいかがお過ごしでしょうか？ この中の第3話に登場する「『イカワイパー』（触手ワイパー？）でシーンを切り替える」という手法がなかなか印象的でした．ちょうど近々の勉強会での資料を準備しなければならなかったこともあり，じゃ，その印象的な方法でスライドを切り替えるようなツールでもいっしょに作ってみようかな，とかそんな感じになりました． 少しは形になってきたっぽいので，「SliDegeso」という名前でもつけて公開してみます． サンプル どんな感じかは，次のリンク先で確認できます．ただし，現状では，Safari，Chrome，でしか動作しません，きっと． あと，ウィンドウサイズを 1024×768 くらいで想定しているので，あまりに大きなウィンドウサイズの場合，「拭き残り」が発生しますｗ SliDegesoサンプル ソースコード，ダウンロ
Web Developerで行うCSSデバッグ
Web Developerで行うCSSデバッグ Web Developerはナトラボさんが公開しているWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。 インストール Firefoxで配布ページにアクセスし「ダウンロード：Webdeveloper for Firefox (399kb)」をクリックすることでインストールが開始されます。 インストール開始時にページ上部に「このサイト(lab.tubonotubo.jp)からはFirefoxにソフトウェアをインストールできない設定になっております。」と表示されますが、右の「許可(A)」ボタンをクリックすることでインストールが可能です。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてイン
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flat UI - Free Bootstrap Framework and Theme
GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド | コリス
Components · Twitter Bootstrap
IDEA * IDEA