CSSでふわっとフェードインさせる方法!@keyframesアニメーション入門
CSSだけでテキストをフェードインさせる方法です。CSSanimationのキーフレームを使った方法をご紹介します。CSSanimationは、要素を動的に変化(アニメーション)させるCSSです。この記事ではCSSanimationのキーフレームの基本的な使い方について、テキストをフェードインさせる方法を元に書いています。
CSSだけでテキストをフェードインさせる方法です。CSSanimationのキーフレームを使った方法をご紹介します。CSSanimationは、要素を動的に変化(アニメーション)させるCSSです。この記事ではCSSanimationのキーフレームの基本的な使い方について、テキストをフェードインさせる方法を元に書いています。
時々、「フルスクリーンサイトに使用する画像サイズっていくつがいいの」って聞かれることがあります。 私もフルスクリーンを実装する際にいつも考えてしまうので、いろいろ調べたりしているのですが明確に「このサイズ!」と記してある・・・
フルスクリーンでの画像表示はサイトを開いた瞬間にドドーン!と目に入って迫力がありますよね。 今回は、そんな迫力満点のフルスクリーン、全画面で画像を表示する方法です。 方法はheightに「 vh 」という単位を使って、フ・・・
htmlでもCSSでも指定していないのに、なぜだか2、3ピクセルの余白というか隙間が空いてしまったことってありませんか?WEBデザインをしているとこの2ピクセル、、、いえ、わずか1ピクセルでも意図しない余白や隙間があったりすると気になってしまいます。そんな時、その余白や隙間を消すために試していただきたいCSSをご紹介します。
height:100%を使って上手くいかないことが多く、ちょっと苦労したので、改めてheightの使い方について勉強しました。ポイントは単位による指定方法の違いでした!
h1やpタグなどのブロック要素内のテキストを縦中央にする場合、vertical-align:middle;は効きません。vertical-alignはインライン要素とテーブルセルでしか効かないんです。では、ブロック要素内のテキストを縦中央にしたい場合どうすればいいのでしょうか。先日、これに苦しんだのでまとめておきます。
background-sizeはbackgroundプロパティの一つで、背景画像のサイズを指定するCSSです。 特に最近人気の画像をウィンドウの全画面(フルスクリーン)で表示する際は大活躍のプロパティで、backgrou・・・
Wordpressで「SAKURA RS WP SSL 」のプラグインを有効化しようとしたら、「重大なエラーを引き起こしたため、プラグインを有効化できませんでした。」と表示されました。「重大なエラー?」、何事?と思いましたが、意外に簡単、PHPのバージョンを変更したら解決しました。
ヘッダーメニューをposition:fixedで固定して下位要素をスクロールで上下にずらしていくようなページデザインをCSSで実装した際に、困ったこととその解決方法についてまとめました。
先日、サイドバーを左に配置したレイアウトをコーディングしている時、サイドバーの背景色がコンテンツの高さいっぱいにならなずに途中で切れてしまいました。
その対処方法について、備忘録もかねて記事にします。
テキストをセンター揃えにしたい時に、当たり前のように記述するtext-align:center;ですが、時々、text-align:centerが効かないように思う時があるんです。特にdivタグ、text-alignが効く時と効かない時があるような・・・。ちょっと苦労したので、text-alignの特徴について改めて整理してみました。
先日、突然画面に Error establishing a database connection の文字が表示されました。 データベースへの接続に関するエラーです。 そういえば、昨日wp-config.phpのファイル・・・
レスポンシブウェブデザイン(以下RWD)では、デバイスの幅に応じて、文字や背景画像の幅を可変させることになります。 その際、文字数に応じて高さを自動で可変させ、背景画像を横幅いっぱいに(100%)、更に縦横比も維持して表・・・
ヘッダー、コンテンツ、フッターとHTMLを順にコーディングしただけだと、コンテンツの行数が少ないとフッターがコンテンツのすぐ下にくっついてしまい、画面下部 に余白ができてしまいます。CSSでコンテンツの行数にかかわらず、フッターを画面の最下部に固定する方法です。
ページ全体を横中央に配置するには、htmlのbodyより下の要素を全てdivタグでくくって、 そのdivにwidthで幅を指定して、更にmargin:0 autoを指定します。