CSS,HTML,JS

CSSで使用する単位remとem、そして%、pxの違いを解説

今回はCSSで使用できる単位について記事にしたいと思います。CSSで使用できる単位はいくつかありますが、それぞれがどのように違うかご存じですか。 正しく理解していないと意図した通りのデザインで表示されません。この記事では、HTMLやCSSを記述する上で、最初に覚えておきたい単位について説明します。

続きを読む

jQueryで滑らかにスーッと動く「上へ戻るボタン」を実装してみよう!

ページの途中や最下部で、ボタンをクリックするとページの一番上へ戻る「上へ戻るボタン」。 あれって、aタグでページ内リンクを記述すれば実装できます。 ですがこれだと一瞬で上へ戻ってしまって、ちょっとつまらないんですよね。 ・・・

続きを読む

CSSでふわっとフェードインさせる方法!@keyframesアニメーション入門

CSSだけでテキストをフェードインさせる方法です。CSSanimationのキーフレームを使った方法をご紹介します。CSSanimationは、要素を動的に変化(アニメーション)させるCSSです。この記事ではCSSanimationのキーフレームの基本的な使い方について、テキストをフェードインさせる方法を元に書いています。

続きを読む

フルスクリーン(全画面表示)に使用する画像サイズは?重要なのは縦横の比率(横型パソコンの場合)

時々、「フルスクリーンサイトに使用する画像サイズっていくつがいいの」って聞かれることがあります。 私もフルスクリーンを実装する際にいつも考えてしまうので、いろいろ調べたりしているのですが明確に「このサイズ!」と記してある・・・

続きを読む

htmlで謎の余白・隙間ができる時、なくすために試してみるCSS

htmlでもCSSでも指定していないのに、なぜだか2、3ピクセルの余白というか隙間が空いてしまったことってありませんか?WEBデザインをしているとこの2ピクセル、、、いえ、わずか1ピクセルでも意図しない余白や隙間があったりすると気になってしまいます。そんな時、その余白や隙間を消すために試していただきたいCSSをご紹介します。

続きを読む