CSS 特定の要素以外をフェードアウトさせる方法
ギャラリーページなどで、サムネイル画像の一覧を並べて配置する場合などに、ある特定の要素にマウスオーバーした際にちょっとした効果を付けてみたいと思います。ここでは、フォーカスの当たった要素以外を半透明に...
WEB DESIGN
CSS 
WordPress facebook LikeBoxの高さが変更できない時の対処法
Wordpressのサイドバーなどに、「FacebookのLikebox」を配置するときに、FacebookDevelopersからコードを取得しますが、プレビュー画面上ではきちんと高さが確保されてい...
CSS blockquoteのスタイルをCSSのみで指定する
引用文などで用いられる「blockquote」ですが、デフォルトではテキストが斜体になったり、明朝体になったり様々な設定がなされていますが、その都度デザインを考えるのもちょっと大変だなぁ～って場合には...
CSS 英単語の頭文字もしくはすべてを大文字に自動変換する「text-transformプロパティ」
Webサイトの見出しタイトルなどで、英単語を利用する際に「小文字」「大文字」の指定をCSSの「taxt-transform」プロパティを使うことで指定ができるようになります。また、すべて大文字でそのま...
CSS 先頭の一文字だけにスタイルを適用させたいときの「first-letter」
新聞や雑誌などの印刷物でよく見かける手法ですが、文章の先頭の文字だけ拡大表示や、文字色を変えるなどして視線の誘導などに有効だったり、文章にリズムが生まれたりするというものがあります。実際にどういったも...
CSS サムネイルをマウスオーバーした時に画像を拡大表示する方法
CSSの「transform:scale()」を使用することで、マウスオーバー時などで要素を拡大・縮小することが可能になります。各コンテンツへのリンク用に設置するサムネイル画像などなどによく見られます...
CSS text-indentした要素が複数行になった時の左側を揃えたいとき
注意事項などの小見出しなどの後に、インデントを付けて説明分を挿入する場合などでtext-indentを用いて字下げをしたりしますが、複数行になる場合に、2行目以降がインデントされずに左寄せになってしま...
HTML ページ上にソースコードを表示する方法
webページ上に、htmlソースなどを表示したい場合は、「pre要素」と「code要素」を利用します。「pre要素」は、要素ないのテキストの改行やスペースをそのまま表示してくれますので、インデントなど...
CSS WEBフォントを使ってちょっとお洒落に…
CSSでフォントのスタイルを設定する際に一般的なプロパティは「font-style,font-variant,font-weight,font-size,line-height,font-family...
CSS positionプロパティの「absolute」と「relative」の違いって？
横並びの要素＝floatプロパティと考えがちですが、positionプロパティの方が都合がいい場合があります。数あるCSSのプロパティの中で、イマイチ曖昧なpositionプロパティについて「abso...
WordPress 日本各地の3日間の天気を表示してくれる「Weather Hacks」プラグイン
WordPress内に、ライブドアの天気予報を表示してくれるプラグイン「Weather Hacks」をご紹介します。好きな全国各地の都市を選ぶだけで、「今日、明日、明後日」の3日間の天気予報を表示して...
jQuery 異なるサイズの画像をフィットさせるjQueryプラグイン「ImageFit」
ギャラリーや商品カタログページなどで画像を並べて一覧表示する際に、異なるサイズの画像でもきちんと揃えて表示させたい時に利用できるjQueryプラグイン「ImageFit」をご紹介します。まずは、サンプ...
jQuery ページ表示の際にイントロエフェクトを入れてくれる「IntroTzikas」
一昔前にオールフラッシュサイトにおいて、ページを開いた際に横から線が伸びてきて、読み込み完了の割合を表現するというビジュアルが良く見られましたが、そのようなイントロ画面をjQueryで再現することがで...
jQuery 背景にザラつきを表現してくれる「Noisy」プラグイン
バナー画像を作る際など、単色でのっぺりとした印象を少し高級感を加えたくて、ザラつき感を入れることってありますよね。画像などの作成時にもそういった効果を利用したりしますが、サイトのページ背景で実現したい...