タグ

TipsとCSSに関するharu-ru-ru-ruのブックマーク (4)

  • 紙面に近づけたい!HTML+CSSで作る文字レイアウト12個 | PRESSMAN*Tech

    印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理?」といったご相談を受けることがよくあります。 今年に入って、HTML5&CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLCSSをご紹介したいと思います。 目次:段組み縦組み(縦書き)行末揃え(両端揃え)先頭文字スタイル(ドロップキャップ)段落先頭1字下げ2行目から1字下げ(ぶら下げインデント)行頭禁則文字ふりがな(ルビ)圏点(傍点、脇点)大文字と小文字の変更スモールキャップス(スモールキャピタル)長体、平体(水平比率、垂直比率)※IE以外のブラウザは、2014年7月4日現在の最新版にて

    紙面に近づけたい!HTML+CSSで作る文字レイアウト12個 | PRESSMAN*Tech
  • [CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック

    テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換:-9999px 改善したテクニック 画像置換:-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p

    haru-ru-ru-ru
    haru-ru-ru-ru 2012/04/17
    画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
  • [WP]トップページだけに表示させる | THE ROAD AHEAD v.3.0

    またまた仕事がらみWPいじくりエントリです。 よくある「ようこそ○○へ!」みたいな場所を作ろうとしたんだけど、テンプレートのindex.phpにそのまま記述すると全ページで表示されてしまいます。 個別エントリページのみで表示させるにはindex.phpを見てすぐ分かるように <?php if ($single) { ?>個別エントリページのみで表示させる<?php } ?> ってすればOK。 ということは、トップページだけに表示させるには・・・ <?php if (is_home()) { ?>トップページだけに表示させる<?php } ?> もちろんこれでもいいんですが、これだと「次のページ(« previous)」でも表示されてしまいます。(個別エントリページではないから当然ですが・・・。) <?php if (is_home() && !is_paged()) { ?>トップページだ

    [WP]トップページだけに表示させる | THE ROAD AHEAD v.3.0
  • WordPressでカテゴリー毎に背景などのスタイルを変更する方法 - A.K.A and more ブログ

    WordPressで、CSSを利用してカテゴリーごとにスタイルを変更する方法をメモ。MovableTypeにはそういったプラグインがあったが、WordPressにはプラグインが無い(見つからない)ので力技で対応。例えば特定カテゴリーだけヘッダー部分の背景を赤色にしたい場合などに使う。 例:カテゴリー「日記」「写真」のタイトル文字色をそれぞれ青と赤にする 1.カテゴリーごとに英文字でカテゴリースラッグをつける カテゴリー作成時(作成済みの場合は編集画面)のカテゴリースラッグ欄に、英数字で名前をつけておく。この名前を後々cssのクラス名として使う。 今回の例の場合、「日記」のカテゴリースラッグを「diary」に、「写真」のカテゴリースラッグを「photo」にする。 2.カテゴリーを表示するテンプレート(今回はarchive.php)にカテゴリースラッグを出力 ページの階層は以下の通り。divの

  • 1