[B! css] kopugのブックマーク

プロが実践するモダン CSS の書き方入門テクニック20選まとめ

海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー

kopug 2016/09/06

リンク

CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日で

kopug 2011/11/08

リンク

モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ

こんにちは、「livedoor Blog」を担当している吉沢です。スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。アクセスシェア〜ライブドアの場合まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.

kopug 2011/09/15

リンク

スマフォンサイト iPhone4等の高解像度デバイス対応画像を cssでの切り替え

前回の補足？続きになるのですが、スマートフォン devicePixelRatio　について iPhone3GS iPhone4では解像度に違い（2倍の解像度）により、配置した画像がピンぼけしちゃいます。（アンドロイドは1.5倍機種によって異なりますが。）それを回避するため、通常の画像の2倍の画像を用意し、 cssでサイズの調整を行う。って方法を前回紹介しましたが、通常画像 180px×66px 2倍画像 360px×122px CSS .image img{ width:180px; height:66px; } てな感じで2倍画像を配置しCSSで通常サイズに調整することによって、 iPhone3g（devicePixelRatio 1.0）とiPhone4g（devicePixelRatio 2.0）の様に異なる解像度（devicePixelRatio）でも綺麗に表示できます

kopug 2011/07/08

リンク

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