2014-11

HTML

何故かページが文字化けしてしまう!?

Webページの文字コードを指定する方法にはいくつか方法がありますが、その指定方法を今一度確認しておきましょう。最も推奨されている文字コードの指定方法は、HTTPレスポンスヘッダー内にて指定する方法にな...
SERVICE

これが無料?しかも商用利用可能!UNSPLASH

「mororeco」でもサンプルデータ等を作成するときに、無料の写真素材をよく利用させてもらっていますが、ほんとちょっとしたものを作りたいときに、せっかくなら格好良くてお洒落な素材を使いたいですよね。...
CSS

CSSで画像にリボン装飾をする方法

ベクターデータなどで見かけるような「リボン」を、「NEW」などのアイコン的要素で画像にひっかけて表示しているサイトなどがあります。一般的にpng画像などで画像を作成し、position属性で絶対配置に...
Photoshop

ベースラインJPEGとプログレッシブJPEGって何が違うの?

ファイル形式のひとつである「JPEG」ですが、“ベースラインJPEG”と“プログレッシブJPEG”というものがあるのはご存じでしょうか?Photoshopでは、画像を保存する際に、下図のような画面にそ...
CSS

特定の要素以外をフェードアウトさせる方法

ギャラリーページなどで、サムネイル画像の一覧を並べて配置する場合などに、ある特定の要素にマウスオーバーした際にちょっとした効果を付けてみたいと思います。ここでは、フォーカスの当たった要素以外を半透明に...
WordPress

facebook LikeBoxの高さが変更できない時の対処法

Wordpressのサイドバーなどに、「FacebookのLikebox」を配置するときに、FacebookDevelopersからコードを取得しますが、プレビュー画面上ではきちんと高さが確保されてい...
CSS

blockquoteのスタイルをCSSのみで指定する

引用文などで用いられる「blockquote」ですが、デフォルトではテキストが斜体になったり、明朝体になったり様々な設定がなされていますが、その都度デザインを考えるのもちょっと大変だなぁ~って場合には...
CSS

英単語の頭文字もしくはすべてを大文字に自動変換する「text-transformプロパティ」

Webサイトの見出しタイトルなどで、英単語を利用する際に「小文字」「大文字」の指定をCSSの「taxt-transform」プロパティを使うことで指定ができるようになります。また、すべて大文字でそのま...
CSS

先頭の一文字だけにスタイルを適用させたいときの「first-letter」

新聞や雑誌などの印刷物でよく見かける手法ですが、文章の先頭の文字だけ拡大表示や、文字色を変えるなどして視線の誘導などに有効だったり、文章にリズムが生まれたりするというものがあります。実際にどういったも...