WEB DESIGN

jQuery

各セクションの開始位置にトップをしっくり合わせてくれるプラグイン「window.js」

表示されるwindowいっぱいにひとつのセクションを表示し、スクロールごとに別のページを閲覧しているような表現をすることが可能な「window.js」をご紹介します。スクロールをすることで切り替わる他、少しズレて静止した状態を修正してくれる...
CSS

サムネイル画像を丸くしてちょっと可愛くしてみる

Webサイト内で、サムネイル画像が丸く表示されているものをよく見かけると思いますが、かつては丸く画像を切り抜いて「png」として書き出し配置して表現しましたが、今ではCSSの指定のみで簡単に行えます。ちょっとしたアクセントとして、プロフィー...
CSS

画像のキャプション表示を重ねるのに便利な「Label.css」

ギャラリーサイトなど、写真などを一覧で並べたりするときにキャプションやコメントを画像に重ねるような表示にしたいときに便利な「Label.css」をご紹介します。 白半透明のラベルを上下左右や角、さらにはマウスオーバーでフェードやスライドしな...
jQuery

上からスライドしてくるツールチップ

テキストにマウスオーバーすると、上からスライドしながらツールチップが表示されるような動きを実装していきたいと思います。 // // DEMO まずは、必要なソースをダウンロードしてください。 ダウンロード HTMLを記述  対象となるテキス...
CSS

CSSでリボン装飾を描く方法

前記事に引き続きCSSのTipsになります。 今回も可愛らしい装飾をCSSで描いていきたいと思います。装飾の定番とも言える「リボン」をWebサイト上で使いたい時に試してみてください。 // // DEMO HTMLを記述 サンプルのHTML...
CSS

CSSでステッチ風タグの描き方

ちょっとしたタグや記事タイトルなどの背景を装飾するとき、女性らしく可愛い雰囲気にしたい場合など「ステッチ風タグ」を使ってデザインしてみるのもいいかもしれません。また、その場合に背景画像を配置するのではなくCSSによる表現で実現してみましょう...
CSS

CSSでいろんなカタチを表現してみる

CSS3の新たなプロパティ「transform」と「border-radius」を使って、CSSのみでいろんなカタチを表現できるようになりました。すべてを暗記するのも大変なのでコピペで再利用できるようにメモしておきたいと思います。 (ads...
CSS

フォーカスしたフォームにエフェクトを加えたいとき

お問い合わせ入力フォームや検索フォームなどで、フォーム欄にフォーカスした際に背景色を変えるなどのエフェクトを加えたいときには、疑似クラスの「:focus」を利用します。これは、「:active」や「:hover」などと同じ「ダイナミック疑似...
CSS

PDFファイルリンクにのみPDFアイコンを表示させる

前回、「外部サイトへのリンクにアイコンを付ける方法」をご紹介しましたが、今回は「PDFファイル」のように、拡張子が違うファイル「.pdf」のような場合にアイコンを変えて表示したい際の方法になります。 こちらも、CSSの属性セレクタを利用しま...
CSS

外部リンクにのみアイコンを表示させる

Webサイト内において、外部リンクがある場合、何の注意もないまま外部サイトへリンクしてしまうと、ちょっとした不安感を感じることがあります。そこで「このリンクは外部ページへ移動します。」ということが一目でわかるようにしておくと、ユーザーにとっ...
HTML

faviconの設定方法

ブラウザのタブなどでよく見かけるマークのようなもの、通称「ファビコン」と呼ばれる画像ファイルを設定したい場合の方法をご紹介します。 // // 指定方法はいくつかありますが、今回はルートディレクトリに「favicon.ico」というファイル...
CSS

テキストリンクをボタンのように配置したい

テキストリンクを配置したい場合に、デザイン的にリンクボタンであることを直感的に見せたい場合、背景のスタイルを指定して実現出来ますが、いくつか注意しなければならない点もありますので確認していきましょう。 // // DEMO まずは、下記のよ...
HTML

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

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