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

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

続きを読む

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

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

続きを読む

Photoshopでヴィンテージ風の石壁のテクスチャの作り方

先日、フォトショでちょっとヴィンテージがかった石壁のテクスチャを作りました。テクスチャって配布されているものを利用するのもアリですが、自分で作るとフォトショ操作の学習にもなるので、時間に余裕のある時は自作するようにしています。作り方を自分のメモも兼ねて記事にしますので、読者の人のフォトショ操作の幅を広げる一助になれば幸いです。多分、15分もあれば作れると思うので、よければ作ってみてください。

続きを読む

右クリックメニューをキャプチャ(スクショ)する方法

会社でマニュアルなどを作っている時など、右クリックメニューをキャプチャしたいことってありませんか。けど、キーボードのPrtScnキーでキャプチャをすると、右クリックメニューが消えてしまいます。右クリックメニューを消さずにキャプチャするには、Windows10に標準で入っている「Snipping Tool」というものを使うと上手くいきます。この記事では、Snipping Toolの使い方をご紹介します。使い方はとても簡単です。

続きを読む

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

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

続きを読む

vertical-align:middleが効かない!CSSでテキストを上下(縦)中央揃えにする方法

h1やpタグなどのブロック要素内のテキストを縦中央にする場合、vertical-align:middle;は効きません。vertical-alignはインライン要素とテーブルセルでしか効かないんです。では、ブロック要素内のテキストを縦中央にしたい場合どうすればいいのでしょうか。先日、これに苦しんだのでまとめておきます。

続きを読む

スポンサーリンク
スポンサーリンク

当ブログ利用サーバー

スポンサーリンク
スポンサーリンク