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