これは衝撃的！CSS開発を爆速化する「Emmet LiveStyle」:phpspot開発日誌
Emmet LiveStyle ? live bi-directional CSS edit of new generation CSS開発を爆速化する「Emmet LiveStyle」。 ブラウザのDOMインスペクタの方でCSSを修正するとSublimeTextに反映され、またSublimeTextを編集するとブラウザに即反映されるというプラグインです。 ブラウザで編集しちゃえば簡単にカスタマイズはできるけど、テキストエディタにコピーが必要で、逆にテキストエディタで書くのもブラウザのリロードが必要といった具合に手間がかかりますが、その手間がなくなります 更に、複数のブラウザウィンドウに即座に反映されるため、横幅を小さくしたブラウザ、通常のブラウザを開けば、レスポンシブデザインのプレビューが同時に終わります。 片方のブラウザのDOMインスペクタでCSSをカスタマイズしてももう一方のブラウザ
dl要素を美しくデザインするスタイルシートのまとめ | コリス
実用的なものからちょっとトリッキーなものまで、dl要素を使った美しいデザインのスタイルシートを紹介します。 In Defence of the Definition List HTML <dl class="wrapper1"> <dt>News Item 1</dt> <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec d
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん！
こんにちはこんにちは！！ 今日はちょっとCSSのメモです！ 半透明について！ opacityを使った透過 #testOpacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */ filter: alpha(opacity=40); /* IE */ -moz-opacity:0.4; /* Firefox(old) */ -khtml-opacity: 0.4; /* Safari(old) */ opacity: 0.4; } Opacity test! opacityは子要素まで全て透過する。 RGBaを使った透過 #testRgba { background: rgba(0, 0, 0, 0.4); /* RGBを10進数(0〜255)で指定、不透明度を0〜1.0で指定 */
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
大量の要素がびっしり詰まっていて全体的に見づらいのを解決 - CSS実践アイデアファイル
04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決 文＝境祐司 マルチカラムレイアウトの各ボックスに配置された大量の要素を一覧すると、その情報量に圧倒されてしまうことがある。ニュースサイトなどは、新聞のフォーマットと同様に、すき間なく情報が詰め込まれる。このような形式のWebサイトは、余白を大きく取るような大胆なレイアウトは難しい。見出しや段落などの間隔をうまく調整し、情報量と読みやすさを両立させなくてはならない。行間、文字の間隔、単語の間隔、そして段落の間隔など、詳細に見ていく必要がある。特に情報のまとまりごとに確保しなければならない余白については、よく検証しよう。 【1】左右、中央の3つのボックスの内容（見出しや記事）が詰まって見える。各ボックスの余白（padding）の値が小さいので、区切り線との間隔がなくなっている。 XHTML 【2】XHTMLで、要素間の余白を確保す
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
ソースが公開されているcss小技11エントリーまとめ
cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント ユーザービリティ（見易さ）を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとｃｓｓでテキストに影を付けるテクニック
[CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer
手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、
jQuery、CSSなどなどWEB開発に役立つチュートリアル集「30+ Eye-Opening Web Development Screencasts」
jQuery、CSSなどなどWEB開発に役立つチュートリアル集「30+ Eye-Opening Web Development Screencasts」 WEBの技術は日々進歩していて、様々な技術、技法が世の中には溢れていますが、今回紹介するのはjQueryやCSS、PHP、ASP、Ruby on Railsなどなど項目毎に、WEB開発に役に立つチュートリアルを30以上まとめたエントリー「30+ Eye-Opening Web Development Screencasts」です。 どれも実用的で、役に立ちそうなものが多いのですが、今回は紹介されている中から特に気になったチュートリアルをピックアップして紹介したいと思います。 詳しくは以下 ■Coda Slider Effect jQueryを使ったスライダーです。カーソルです、メニューからでもカーソルでも自由に動かせます。 ■ Desig
3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - livedoor ディレクター Blog(ブログ)
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]画像を使用しないでもCSS3ならここまでできる実用的な実装サンプル
壁紙に出来るCSSチートシート:phpspot開発日誌
[CSS]左右で色が異なる背景画像を設定するスタイルシート