Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法posted with ヨメレバ谷 拓樹 インプレス 2014-07-24 AmazonKindle楽天ブックス CSS設計の教科書を読んで、今後意識していくべき項目を大雑把にまとめてみました。 もっと知りたいという方は本の購入をオススメします。 よりよいCSSの設計とは 予測しやすい 期待通りに振る舞い、追加したルールが他のルールに影響を与えない。 再利用しやすい 抽象的で分離され、再度遭遇した同じUIに対して、再度書き直す必要がない。 保守しやすい 新しいルールを追加・更新するときに既存のルールのリファクタリングを必要としない。 拡張しやすい 自分と自分以外の人にもメンテナンス・管理がしやすい。 破綻しやすいCSSの特徴 HTML構造に依存している スタイルを取り消している 絶対値を多様
ビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していくわけですが、その際によく使う、cssのポイントをご紹介します。 画像を可変にする レスポンシブデザインは、ビューポートの設置によって表示されるサイトの表示領域がデバイスのサイズへと変わります。その横幅に対して画像を可変にします。 下記の設定で、最大でも実寸サイズとなり、画面サイズからはみ出すことを防ぐことができます。それ以下のサイズの場合は画面幅に合わせて縮小されます。 img {max-width:100%;} スマホを横にしても文字サイズを変えない デフォルトでは、スマホを横にすると横幅に応じて、文字サイズが大きくなります。これはこれで見やすいですが、文字数が多い時など、デザイン上フォントサイズを変えたくない場合は、スマホ用cssに下記タグを追記します。 body {-webkit-te
同じ記述の繰り返しを防ぎメンテナンス性や柔軟性を向上 W3Cによって策定された仕様の1つで、HTML／XMLの要素の表示をコントロールするために生まれたのが「CSS」（Cascading Style Sheets）です。HTMLとこのCSSを組み合わせることによって、文書構造（HTML）と見た目の表現（CSS）を切り離すことが可能になるほか、HTMLだけでは実現できないデザインやレイアウトが可能になるといった大きなメリットがあることから、Webサイトの構築やWebアプリケーションの開発において欠かせない技術となっています。 このCSSで現在注目を集めつつあるのが「オブジェクト指向CSS」や「Scalable and Modular Architecture for CSS」（拡張性のあるモジュールアプローチ）といった考え方です。これらは、CSSで記述する内容を「コンポーネント化」するこ
斉藤さん（@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 リン
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
コードスニペットを共有できる Webサービスは沢山ありますが、 CSSPopはCSSを専門としたコード 共有サイトです。なかなか珍しい し、結構便利な小技も見かけま した。 CSS専門のスニペット共有サイトです。動作デモも見る事が出来ますよ。 CSSのコード共有サイト。ユーザー登録も出来ますが、しなくてもコードを書いてデモを確認する事も可能です。 Findからコードを探せます。サムネイルがあるので探しやすい。カテゴリはdiv、input、buttonなどのDOM要素で分けられています。 Createでコードを書く画面に進みます。入力項目はHTMLとCSSで、書くと同時にプレビューに繁栄されます。あとはtypeと説明を書けばOKです。 結構見ちゃいますね。数も結構揃っています。 CSSPop
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
鹿児島在住のエンジニアです。Webシステムの受託開発に携わってます。 Playframework/ExtJs/Sencha Touch/Backbone.jsをよく使います。
Publickeyでは、現在策定中の電子書籍フォーマット「EPUB 3」の動向について積極的に伝えていますが、ここでちょっと立ち止まって、EPUB 3とは何か？ という基本的な情報について簡単にまとめておこうと思います。 EPUBの仕様はオープンかつフリー EPUBとは、「電子出版」を意味する「Electronic Publication」からとった名称といわれていて、International Digital Publishing Forum（IDPF、国際電子出版フォーラム）が策定をすすめている電子書籍のファイルフォーマットです。ちなみにEPUBは「イーパブ」と読みます（EPUB 3はイーパブスリー）。また、表記は「ePub」と表記されることもありますが、最近は「EPUB」とすべて大文字で表記されることが多いようです（仕様書などでは「EPUB」と表記されています）。 イースト株式会社の
CSS Nite LP, Disk 23「表示速度最適化」 2012年6月30日、ベルサール九段下で「CSS Nite LP, Disk 23」が開催されました。CSS NiteはWeb制作に関わる方のためのセミナーイベントで、マークアップエンジニアやデザイナーの方が多く参加しています。今回のテーマは「表示速度最適化」でした。 パフォーマンス計測の方法、画像の最適化、モバイル向け最適化、そしてフロントエンドからバックエンドまでを考慮した設計段階からの最適化と、幅広いながらとても密度の濃い内容でした。 自己満足で終わらないためのパフォーマンス計測 サイバーエージェントの石本 光司（@t32k）さんから「Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 - 」というタイトルで、サイトの最適化を行う上で重要なパフォーマンスの計測手段や分析方法に
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
CSS のショートハンド・プロパティは複数のプロパティを一括して宣言できますが、メンテナンスしづらくなったり、思わぬバグの原因になったりすることがあります。そしてその問題が見えにくいことがさらに面倒です。font プロパティ を例に、実際にどのような弊害があるのか検討してみます。 html { font: 87.5%/1.5 "Georgia", serif; } このショートハンドは一見すると次の 3 つのプロパティをひとまとめにしたものに見えます。 html { font-size: 87.5%; line-height: 1.5; font-family: "Georgia", serif; } しかし、font プロパティは上記のほか font-style、font-variant、font-weight プロパティも指定でき、そして省略されたプロパティには初期値が割り当てられます
[対象: 上級] ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。 そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。 スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman（ジョナサン・コールマン）氏です。 ウェブサイトのパフォーマンス最適化 サイトを高速化する理由 コンバージョン率の最適化 カスタマーエクスペリエンスとカスタマー満足度の向上 直帰率を下げる。 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。 全体的な競争力を高める。 運用費を節約する。 数字で見るページスピード Googleではページスピードが検索の1%に影響している。 ユーザーがページ表示に待てるのは2秒まで。 3秒以
Webサイトの待ち時間の80％はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
私の仕事は、Zope/PloneをベースとしたカスタムCMS（その顧客専用のコンテンツ管理システム）を開発するというもので、これは「Web開発」とか「サーバサイド開発」とか呼ばれるカテゴリに入る。 これに対して、HTMLやCSS、JavaScriptなどクライアントサイドの開発・コーディングを担当する人を、最近のWeb業界では「フロントエンド・エンジニア」と呼ぶ場合があるようだ。これはなかなかいい呼び名だと思う。 一般的に「Webデザイナー」と呼ばれる人の仕事は、じつに幅広い。ビジュアル的に「デザイン」すること（どんなサイトにするかの「絵」を作ること）や、サイトの構造・ラベリング・ナビゲーションといった「情報アーキテクチャ」を決めること、そしてHTMLやCSS、JavaScriptといった技術によってそれらを実装することは、それぞれ異質な作業であり、別種のスキルが求められる。 最近はこうし
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
