大規模サイトにおける本当は怖いCSSの話WDF.Vol.8で話したCSSについてのスライドです。 HTMLの見た目を制御するCSS。 CSS3やsassなど技術的な話題を目にすることは多いですが その運用方法について多くは語られていません。 大規模サイトを大人数で制作する状況でCSSはどうあるべきか。 DMM.comという巨大サイトの運用を通じて得た経験を話したいと思います。
初心者でも3か月でwebサービスを必ず作れるようになる！Webサービス学習資料5選 | 就活の未来
最近のソーシャルメディアの台頭により、ここ数年において、Webは更に力を増したといえるでしょう。中でも現役の大学生が、様々なアイディアを形にし、それをWebサービスという形で発信し続けているのが印象的な人もいるかもしれません。 そこで、あなたもWebサービスを作成したいという欲求にかられるでしょう。 Webサービスを作っている人が身近にいれば、その人に聞けばよいかもしれません。 しかし、そうではない人も多いはずです。 そこで、今日は、そんなあなたがWebサービスを作成するにあたって、参考にすべき学習用の資料を5個選びました。これを頼りにあなたの思いをWebサービスに変えて、世界に届けてください。 Webサービスを作成するにあたって身につける必要があるもの 覚える必要があるのは以下のいくつかの言語です。 ・HTML ・CSS ・プログラミング言語1つ(PHP, Python, Rubyなどな
いまさらだけど、2012年にお世話になった神ツールたち（Mac向け） - Flash Black
こんなエントリーは去年末か年明けに書いておけ！って思いますが、blogを書く練習としてまとめます。 これから列挙するツールを使う事により、去年は手を動かす事の楽しさを再確認。 いままでダルかった作業が楽になるだけではなく、HTMLをキレイに書けたり構造を考えるようになったりと一石二鳥。 SASS and Compass 全俺が感動し、咽び泣くほど無くてはならない存在となったHtmlコーディングの革命児。 なぜすぐに導入しなかったのかと過去の自分に言いたいぐらい！ いまさら解説はいらないと思いますので、お世話になったサイトをご紹介いたします。 CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 Sprite画像でもう悩まない？！SassとCompassで速攻Sprite画像を作る方法に感動！ | バンクーバーのうぇぶ屋 CompassでCSSスプライト[to-R] C
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
フロントエンド開発者であれば知っておくべきモバイル/デスクトップブラウザのバグやトリック20 | Web | position: absolute;
斉藤さん（@cssradar）が紹介していた20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should knowがおさらい的に参考になったので各項目の表題だけ訳しておきました。ほとんど邦訳するということがないのでおかしい部分などありましたらご指摘頂けると幸いです。 各内容の詳細については訳していません。本文とサンプルのソースを見れば大体わかると思います。 また、Gistにも置いています。 20 Mobile/Desktop Browser bugs and tricks any Senior Frontend Web Developer should know Link outlines / highlights are misaligned on the Kindle Fire リン
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜知らないと損な機能編 | DevelopersIO
はじめに 基礎編、Compass基礎編ともにたくさんのシェアありがとうございます。この記事は若干釣りっぽいタイトルをつけてしまい・・・あぁ「知らないとちょっと損な機能編」に書き換えようか迷ったけど保存せずにそっとタブを閉じました。 今回は知っている人にとってはそんなの基本だろう！っと思うようなものですが自分のようなマニュアルを読まない日本人向けに（といってもドキュメント英語だし・・・）SCSSを使う際に知らないと（ちょっと）損な機能について紹介したいと思います。 SCSSで扱うファイルの違い - partials SCSSで扱えるファイルには2つの種類「アウトプットされるファイル」と「インポート専用のファイル」があります。 このインポート専用ファイルのことをpartials（パーシャル）と呼ぶそうです。 インポート専用ファイルは先頭にアンダースコアを指定し「_sample.scss」のよう
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
[CSS]便利なセレクタの使い方が実例を見ながら学べる -CSS Selectors
CSSのセレクタの記述例とそれがどのように適用されるか、実例を見ながら学べるサイトを紹介します。 各ブラウザのサポート状況も掲載されています。 Learn CSS Selectors interactively ※閉鎖してしまったようです（2014年11月）。 [ad#ad-2] サイトに掲載されているセレクタをいくつか紹介します。 :first-of-type この疑似クラスは、指定されたエレメントの最初の子エレメントにマッチします。 記述例 #target p:first-of-type {color: #36de4e;} 表示 対応ブラウザ Firefox Chrome Safari Opera Internet Explorer [ad#ad-2] :first-child この疑似クラスは、親エレメントの最初の子エレメントである場合のみマッチします。 記述例 #target p:
納期間近でIEで崩れてる！ そんな時にも慌てないCSS開発のワークフロー
まだまだIE7、そしてIE6のユーザーをターゲットに考えているウェブサイトは多くあると思います。 そんなIEユーザーをターゲットに含めたウェブサイトを制作する上で、より効率的にCSSの開発が行えるワークフローを紹介します。 Cross-Browser CSS Development Workflow [ad#ad-2] 下記は各ポイントを意訳したものです。 1. リセットかノーマライズか 2. 基本的なレイアウトはIEで 3. 最後の確認もIEで 4. 最後の手段：IEのみスタイル 5. 問題に取り組み続ける 6. おわりに 1. リセットかノーマライズか IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。 CSSリセットとは CSSリセッ
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
スマートフォンサイト構築にもHTML5用のreset.css | helog - Webに悩む人のネタ帳
reset.cssは各ブラウザでデフォルトで指定されているCSSをリセットするために読み込むスタイルシートです。 Firefox、Internet ExplorerやGoogle Chromeなど各ブラウザは、コーダーがスタイルシートを適用していない状態では、CSSの初期状態に差異があります。その差異を埋めるべく容易するスタイルシートが「reset.css」です。 少しずつ自身で調整を重ねて作り上げる「reset.css」もありますが、オープンソースとして公開されているものもあります。私はHTML4でPCページを構築する際、YUI(Yahoo! User Interface Library)のCSS Resetは重宝していました。 YUI 3: CSS Reset 今回、スマートフォンサイトを構築するために、スマートフォン用のreset.cssを探していました。そこで気がついたのですが、
レスポンシブなWEB制作のためのCSSフレームワークのまとめ
様々なデバイスが出現してきており、WEBサイトもその環境を考慮した制作を求められており、制作側もどんな端末でも快適に閲覧できるレスポンシブなレイアウトが広まりつつありますが、今日紹介するのはレスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」です。 Less Framework 4 様々な端末に対応したフレームワークが多数まとめられていますが、今回はその中からいくつか気になったフレームワークをピックアップをして紹介したいと思います。 詳しくは以下 Foundation 12カラムで構成されたレスポンシブなフレームワーク。背景も端末に併せて縮小されます。 Skeleton 真っ更なレスポンシブなフレームワーク。 Amazium ブラウザサイズによってレイアウトが組み変わるレスポンシブフレー
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
CSSで様々なアニメーションが実現できる「Animate.css」:phpspot開発日誌
Animate.css - a bunch of plug-and-play CSS animations CSSで様々なアニメーションが実現できる「Animate.css」 要素をバウンス、フラッシュ、フェード、シェイクといった多彩なアニメーションを使ってCSS3だけで変化させられる仕組みです。 CSSだけでもここまで出来るのかというところを確認する意味でも一度みておいてよさそうです 関連エントリ ピュアCSSでページ上に通知を出すチュートリアル Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ ピュアCSSでSVGやcanvasなしの3Dオブジェクト描画デモ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ
コーディングに役立つCSSスニペット集 – creamu
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌
CSS Spriteを活用しよう - DesignWalker
