ZMGoogleCSS - soundscapeout (仮)
zumuya さんが、「余計なものが目に入らず、見やすく、さらに他のソフトとの統一感のあるように Google の見た目を作り替える目的」で作られた、Safari 用 Google テーマ「ZMGoogleCSS」がリリース。 zumuya » ZMGoogleCSS Safari RSS、Apple ウェブサイト、Xcode などをベースに作られたカスタマイズ用の CSS です。 細部まで作り込まれていて、非常に美しいテーマです。 使い方は、Safari の「環境設定＞詳細」の「スタイルシート」に「ZMGoogleCSS.css」を選択。 Firefox でも試してみましたが、大きな崩れはなく、使えないことはなさそうです。
CODEとAAを入力するCSSのまとめ。 - NOBODY:PLACE - MUTTER
昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。ちょっと気になったので調べてみました。 まぁそんなに頻度も高くないというのもあるけれども、 参考までに色んな人のサイトを見てみたら、 如何に自分のやり方が鈍臭く、かつ、適当でないかがよくわかった。 僕の場合は以下の通り。書くまでもない。 ・コードをコピペ。 ・<>"をそれぞれ、実体参照化（それぞれ、<>"） ・半角スペース（またはタブ）を全角スペース1個または2個に変換 ・blockquoteで括ってそのままアップ この欠点は、 ・等幅ではないので、可読性が低い ・領域が連続してるのでコピーしにくい ・定義的にコードであることがわかりにくい そういうわけで、なにがしかの改良を行おうと思うんだけど、 色々上げられているものを参考にした、 改良案
CSSでブロックレベル要素をセンタリングする
インライン要素をセンタリングする場合は、その要素のCSSで text-align: center; という text-align プロパティを与えれば良いのですが、div や table 等のブロックレベル要素をセンタリングする場合、例えば下記のようにマークアップされた ブロックレベル要素、 <div id="test">[ブロックレベル要素]</div> をセンタリングする場合は、CSSに下記のような設定を行います。 #test { margin-left: auto; margin-right: auto; width: [ブロックレベル要素の幅]; } ブロックレベル要素のセンタリングは上記が正しい方法で、Firefox や Opera、また IE6 の「標準準拠モード」や最近リリースされた IE7 では上記の設定で正常に表示されますが、IE6 の「後方互換モード」ではブラウザにバグ
CSSでタイトルバナーに画像を表示する
ブログの上部タイトル部分の背景に画像を表示するカスタマイズです。CSS のbackground プロパティを利用することで、スクリーンショットのように画像を表示することができます（季節に合わない画像ですいません）。 なお画像は Link Style 様より利用させて頂きました。ありがとうございました。 １．基本的な設定方法 バナー部分のHTMLと画像を表示するCSSの基本的な構造は次の通りです。 HTML HTMLは h1 タグと a タグでブログのタイトルをリンク表示しているだけです。 <h1><a href="http://～/">タイトル</a></h1> CSS この h1 タグに対し、下記のような CSS を設定すれば背景画像（リストの「画像ファイル名」）が表示されます。リストは画像以外のプロパティを省略しています。 h1 { background-image: url("画像フ
moblogテンプレート修正 - lucky bag
久しぶりにValidationチェックしてみたら、not Validateでした。確認してみると、moblogの画像にaltが無いのでエラーが出た模様。すでに投稿してしまったものは、エントリーから修正し、今後の事を考えて、moblog.uva.ne.jpのテンプレートを修正する事にした。また、CSSで写真に枠を作り、floatで回り込みの指定を行いました。 まずtemplateの修正から行う。（MTのテンプレではなく、moblog.uva.ne.jpのテンプレ） <div class=\"caption\">%(caption)s</div>\n<div class=\"photo\">%(imagecontent)s</div> となっていたのを、キャプションが写真の下に来るよう様に修正し、キャプションを段落に設定。 <div class=\"photo\">%(imagecontent
CSSでエントリータイトルに画像を表示する
エントリータイトルの先頭に画像に表示する方法を紹介します。ここでは公開テンプレート（Movable Type）を用いた説明になりますが、HTMLとCSSの設定による一般的なテクニックですので、どのようなテンプレート（あるいはHTML）でも利用可能です。 本カスタマイズを行うことで、スクリーンショットのようにタイトル左に画像が表示されます。 以下カスタマイズ方法です。なお、リスト形式（ul - li）で画像を表示する場合はリストマークの画像のずれを修正するを参照ください。 １．テンプレートの修正 Movable Type の公開テンプレートではエントリータイトルを下記のように設定しています（分かりやすくするために一部省略しています）。 <h3 class="entry-header">●<$MTEntryTitle$></h3> <$MTEntryTitle$> が実際にはエントリータイトル
Lucky bag::blog: CSS の習得度レベル 5
あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変えられるらしい事を知っている CSS を使うのはフォントサイズの指定くらい CSS を使うメリットが良く分からない レイアウトには table 要素を使えば良いと思う まず、何から覚えれば良いのか分からない CSS 習得度レベル 2 外部 CSS ファイルのメリットを知っている ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する CSS ハックでブラウザごとに指定を振り
first-child疑似クラスと隣接セレクタ - lucky bag
CSSで:first-child疑似クラスと隣接セレクタをうまく使えば、見栄えを制御する目的だけの為にspanタグで囲んだり、クラスセレクタ・IDセレクタを付与することなく、特定要素を指定することが出来たりするので、大変便利だと思います。これらを使い、当サイトの投稿者部分のコメントとトラックバックに幅20px高さ15pxのアイコンを付けた例です。が、Win IEは対応していないので、悪しからず。一応、画像でお見せしておきます。 :first-child疑似クラスを使う まず、投稿者部分のHTMLを見てみましょう。要素としては、postedと言うクラスの段落（<p>）と、コメント部分、トラックバック部分の各アンカー（<a>）で構成されているのが分かります。 <p class="posted">投稿者 e-luck 12:32 | <a href="hogehoge#comments" tit
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
Sample_27/CSS margin
背景をクリーム色にして分かりやすくしています。マージンのサンプルです。白い部分がパディングの余白です。通常マージンは見えにくい部分になっています。 スタイルシートコード body { background-color: #ff9;color: #000; font-size: 16px } div.mihon { margin: 10px 100px 60px 10px; padding: 10px; background-color: #fff;} margin をまとめて設定しました。設定は margin 上 右 下 左 margin １つだけの設定は上下左右同じマージンになります。 margin ２つの設定は、上下、左右の設定しなります。 margin ３つの設定は、上、左右、下の設定になります。
"display: block"なリンク - CSS Dencitie
よく、左そでにコンテンツの一覧を並べます。当サイトも例外ではありません。 当サイトはCSSを用いているのみであり、JavaScript等は用いておりません。しかし、ソースから見えるのは普通の ul と li 、それと a のみです。 このページでは、そのカラクリを簡単に紹介致します。完成型は以下の図のとおりです。 勉強する気のない人は、適当にコピーしてちゃっちゃと出ましょう。 メリット デザインにメリットというのも変な話ですが、幾つかあります。 まず、CSSそのものの利点ですが、プレーンでストリクトなHTML宜しく、ul、liとaのみですので、ソースがとても簡潔で、編集がとても楽だという点が上げられます。 また、お気付きの方もいらっしゃるでしょうが、行全体が選択範囲となっており、幾分アクセスしやすくなっております。 作ってみよう では、実際に一から作ってみましょう。 普通にHTMLを書きま
Apple Support Discussions - SafariでヒラギノProをCSS指定したい
トピック: SafariでヒラギノProをCSS指定したい オリジナルメッセージ ( 作成日 2004/9/20 7:45 pm ) Webの制作をやっています。 Safari（1.2.3）の表示についてお知恵をお貸しください。 ヒラギノフォントへのCSSでのBOLD指定が Safariで効かなかったため 当該箇所にヒラギノProW6を指定したいのですが、 ヒラギノStd W8 は指定できるのですが Pro W6は指定できない状態です。 Safariの環境設定で ベースフォントはヒラギノProにしてあります。 （ここの環境設定ではW3かW6かは設定できないですよね？ その事を考えるとSafariはフォントファミリー内のウェイトを 認識できないのかなとも思います） どなたかPro W6を CSSで指定できているという方 いらっしゃいましたらその方法を ご伝授
小粋空間: ナビゲーションバー・シンプルタイプ（その1：基本スタイル）
最近ご近所のサイトでカレンダーやメニューの横配置が増えてきましたので、改めてナビゲーションバー（メニューバー）を作ってみました。まずは div タグと a タグを用いたシンプルなタイプです。これは今日の覚え書きさんのオサレなメニューバーを作ろう経由の Accessify.com：list o matic をベースにしています。このナビゲーションバーを使って3回に分けてカスタマイズ方法をお送りしたいと思います。 １．テンプレートの設定 まずメニューとなる下記のHTMLタグ（青色）をバナーの下に設定します。 <div id="banner"> <h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1> <h2><$MTBlogDescription$></h2> </div> <div id
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LAZY CAMERA Weblog
Travellers Tale: スタイルシートでのフォントの名前
Q＆A/デザイン・CSS - PukiWiki-official
http://note.sonots.com/?PukiWiki%2Fstyle.inc.php
Apple Support Discussions - 「太文字」の表示について