jQuery 各セクションの開始位置にトップをしっくり合わせてくれるプラグイン「window.js」
表示されるwindowいっぱいにひとつのセクションを表示し、スクロールごとに別のページを閲覧しているような表現をすることが可能な「window.js」をご紹介します。スクロールをすることで切り替わる他、少しズレて静止した状態を修正してくれる...
WEB DESIGN
jQuery 
CSS サムネイル画像を丸くしてちょっと可愛くしてみる
Webサイト内で、サムネイル画像が丸く表示されているものをよく見かけると思いますが、かつては丸く画像を切り抜いて「png」として書き出し配置して表現しましたが、今ではCSSの指定のみで簡単に行えます。ちょっとしたアクセントとして、プロフィー...
CSS 画像のキャプション表示を重ねるのに便利な「Label.css」
ギャラリーサイトなど、写真などを一覧で並べたりするときにキャプションやコメントを画像に重ねるような表示にしたいときに便利な「Label.css」をご紹介します。白半透明のラベルを上下左右や角、さらにはマウスオーバーでフェードやスライドしなが...
jQuery 上からスライドしてくるツールチップ
テキストにマウスオーバーすると、上からスライドしながらツールチップが表示されるような動きを実装していきたいと思います。// // DEMOまずは、必要なソースをダウンロードしてください。ダウンロードHTMLを記述 対象となるテキストを囲う要...
CSS CSSでリボン装飾を描く方法
前記事に引き続きCSSのTipsになります。今回も可愛らしい装飾をCSSで描いていきたいと思います。装飾の定番とも言える「リボン」をWebサイト上で使いたい時に試してみてください。// // DEMOHTMLを記述サンプルのHTMLは以下の...
CSS CSSでステッチ風タグの描き方
ちょっとしたタグや記事タイトルなどの背景を装飾するとき、女性らしく可愛い雰囲気にしたい場合など「ステッチ風タグ」を使ってデザインしてみるのもいいかもしれません。また、その場合に背景画像を配置するのではなくCSSによる表現で実現してみましょう...
CSS CSSでいろんなカタチを表現してみる
CSS3の新たなプロパティ「transform」と「border-radius」を使って、CSSのみでいろんなカタチを表現できるようになりました。すべてを暗記するのも大変なのでコピペで再利用できるようにメモしておきたいと思います。(adsb...
CSS フォーカスしたフォームにエフェクトを加えたいとき
お問い合わせ入力フォームや検索フォームなどで、フォーム欄にフォーカスした際に背景色を変えるなどのエフェクトを加えたいときには、疑似クラスの「:focus」を利用します。これは、「:active」や「:hover」などと同じ「ダイナミック疑似...
CSS PDFファイルリンクにのみPDFアイコンを表示させる
前回、「外部サイトへのリンクにアイコンを付ける方法」をご紹介しましたが、今回は「PDFファイル」のように、拡張子が違うファイル「.pdf」のような場合にアイコンを変えて表示したい際の方法になります。こちらも、CSSの属性セレクタを利用します...
CSS 外部リンクにのみアイコンを表示させる
Webサイト内において、外部リンクがある場合、何の注意もないまま外部サイトへリンクしてしまうと、ちょっとした不安感を感じることがあります。そこで「このリンクは外部ページへ移動します。」ということが一目でわかるようにしておくと、ユーザーにとっ...
HTML faviconの設定方法
ブラウザのタブなどでよく見かけるマークのようなもの、通称「ファビコン」と呼ばれる画像ファイルを設定したい場合の方法をご紹介します。// // 指定方法はいくつかありますが、今回はルートディレクトリに「favicon.ico」というファイル名...
CSS テキストリンクをボタンのように配置したい
テキストリンクを配置したい場合に、デザイン的にリンクボタンであることを直感的に見せたい場合、背景のスタイルを指定して実現出来ますが、いくつか注意しなければならない点もありますので確認していきましょう。// // DEMOまずは、下記のような...
HTML 何故かページが文字化けしてしまう！？
Webページの文字コードを指定する方法にはいくつか方法がありますが、その指定方法を今一度確認しておきましょう。最も推奨されている文字コードの指定方法は、HTTPレスポンスヘッダー内にて指定する方法になります。Webサーバは、ブラウザなどのユ...