display: inline-block を使う（修正版） - understandard
週末に @nagomu さんと @terkel さんが YUI grids.css や stacklayout.css で指定している word-spacing と letter-spacing の値はなんでこの値なんだろうね、という話をされていて、おもしろそうだったので、数字の原因を探ったり、いろいろなブラウザーでチェックしてました。 いろいろなブラウザーでチェックをしている時に、以前書いた記事 display:inline-block; を使うで紹介していた CSS ではブラウザーごとに微妙な誤差があったので、修正版を書いてみました。 以前書いていたコード .parent { letter-spacing: -.40em; } .child { letter-spacing: normal; vertical-align: top; display: inline-block; /di
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
Dreamweaver のコードヒントをカスタマイズしてみる | バシャログ。
こんにちは！スカイツリーに行って参りました Latin です。 ボチボチ花火大会もやってるようですし、あの高さから見る花火ってメチャメチャ綺麗そうですね～！ さて今回は、Dreamweaver の機能拡張について全く別の事を調べていたのですが、少々脱線。 コーディングする際にタグやプロパティのプレビューを表示しアシストしてくれる機能、それが「コードヒント」と呼ばれる機能ですが、CSSを書く際に「" width: "と入力しようとしたつもりが" widows: "と入力された事はありませんか？」との見出しの記事に思わず「あるある！」と飛びついてしまい、実際にカスタマイズしてみました。 手順は予想以上にカンタンでした。 今回はCSSコードヒントのみ編集してみます。 Dreamweaver の設定ファイルの中にある「CodeHints.xml」というXMLファイル、この書き順をかえるだけでCSS
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
WordPressのウィジェットを自作するためのTips
WordPressに標準装備されているウィジェットで、自作のウィジェットを作成してみよう、という内容です。便利な機能で、クライアントワークでは割と必須ですけどあまり情報がない印象だったので復習をかねて書いてみました。 WPのウィジェットに追加できるアイテムボックスを自作する、という方法です。基本的な事しか書いてません。なので、WordPressテーマ開発のビギナーさん向けになります。 ウィジェットをテーマで使えるようにするまずはおさらい。利用しているテーマでウィジェットを使えるようにするには、その為のコードを書く必要があります。 何もしていない状態ですと、上記のようにウィジェットページには注意文しか表示されません。 まずは利用可能にする利用するためには以下のようなコードを利用中のテーマファイル内にあるfunctions.phpに書きます。 if ( function_exists('reg
25 CSS3 Animated Button and Menu Tutorials
Web standards have been changing or rather we should say web standards are improving gradually; and with this improvement every aspect of web development is also improving including CSS3. In this round up, we are presenting a very useful collection of CSS3 Animated Button and Menu Tutorials and experiments for you. With this collection, we aim to showcase some helpful tutorials for you that will h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Quick Tip: Next and Previous Posts With Thumbnails | Envato Tuts+