CSS 特定の要素を画面の中央（上下左右）に配置する方法
意外と多いかもしれませんが、ある特定の要素を画面の中央に配置したいときに、左右は簡単なのに上下は一体どうやるんだろう？と、迷い迷ってmargin-topで誤魔化してしまう…。 そんな方は、ここでこっそ...
CSS
CSS 
CSS サムネイル画像を丸くしてちょっと可愛くしてみる
Webサイト内で、サムネイル画像が丸く表示されているものをよく見かけると思いますが、かつては丸く画像を切り抜いて「png」として書き出し配置して表現しましたが、今ではCSSの指定のみで簡単に行えます。...
CSS 画像のキャプション表示を重ねるのに便利な「Label.css」
ギャラリーサイトなど、写真などを一覧で並べたりするときにキャプションやコメントを画像に重ねるような表示にしたいときに便利な「Label.css」をご紹介します。白半透明のラベルを上下左右や角、さらには...
CSS CSSでリボン装飾を描く方法
前記事に引き続きCSSのTipsになります。今回も可愛らしい装飾をCSSで描いていきたいと思います。装飾の定番とも言える「リボン」をWebサイト上で使いたい時に試してみてください。// // DEMO...
CSS CSSでステッチ風タグの描き方
ちょっとしたタグや記事タイトルなどの背景を装飾するとき、女性らしく可愛い雰囲気にしたい場合など「ステッチ風タグ」を使ってデザインしてみるのもいいかもしれません。また、その場合に背景画像を配置するのでは...
CSS CSSでいろんなカタチを表現してみる
CSS3の新たなプロパティ「transform」と「border-radius」を使って、CSSのみでいろんなカタチを表現できるようになりました。すべてを暗記するのも大変なのでコピペで再利用できるよう...
CSS フォーカスしたフォームにエフェクトを加えたいとき
お問い合わせ入力フォームや検索フォームなどで、フォーム欄にフォーカスした際に背景色を変えるなどのエフェクトを加えたいときには、疑似クラスの「:focus」を利用します。これは、「:active」や「:...
CSS PDFファイルリンクにのみPDFアイコンを表示させる
前回、「外部サイトへのリンクにアイコンを付ける方法」をご紹介しましたが、今回は「PDFファイル」のように、拡張子が違うファイル「.pdf」のような場合にアイコンを変えて表示したい際の方法になります。こ...
CSS 外部リンクにのみアイコンを表示させる
Webサイト内において、外部リンクがある場合、何の注意もないまま外部サイトへリンクしてしまうと、ちょっとした不安感を感じることがあります。そこで「このリンクは外部ページへ移動します。」ということが一目...
CSS テキストリンクをボタンのように配置したい
テキストリンクを配置したい場合に、デザイン的にリンクボタンであることを直感的に見せたい場合、背景のスタイルを指定して実現出来ますが、いくつか注意しなければならない点もありますので確認していきましょう。...
CSS CSSで画像にリボン装飾をする方法
ベクターデータなどで見かけるような「リボン」を、「NEW」などのアイコン的要素で画像にひっかけて表示しているサイトなどがあります。一般的にpng画像などで画像を作成し、position属性で絶対配置に...
CSS 特定の要素以外をフェードアウトさせる方法
ギャラリーページなどで、サムネイル画像の一覧を並べて配置する場合などに、ある特定の要素にマウスオーバーした際にちょっとした効果を付けてみたいと思います。ここでは、フォーカスの当たった要素以外を半透明に...
CSS blockquoteのスタイルをCSSのみで指定する
引用文などで用いられる「blockquote」ですが、デフォルトではテキストが斜体になったり、明朝体になったり様々な設定がなされていますが、その都度デザインを考えるのもちょっと大変だなぁ～って場合には...
CSS 英単語の頭文字もしくはすべてを大文字に自動変換する「text-transformプロパティ」
Webサイトの見出しタイトルなどで、英単語を利用する際に「小文字」「大文字」の指定をCSSの「taxt-transform」プロパティを使うことで指定ができるようになります。また、すべて大文字でそのま...