先日ローディング画面を実装しました。 ページの内容が読み込まれたらjQueryのfadeOut()でローディング画面を非表示にして、本編を表示させようとしました。 ところがローディング画面がクロムでは非表示になりますが、・・・

続きを読む

WEBサイトに円形の画像を載せたい時、画像自体を加工しなくとも、なんとCSSだけで円形に切り抜くことが出来るんです！ 「object-fit」というCSSを使った方法をご紹介します。 ほんの数行記述するだけで出来ますよ！・・・

続きを読む

つい先日、パソコンを新しく買い替えました。 これまでに3台買い替えており、これは4台目になります。 私はWEBのコーディングやデザインを仕事にしていますが、これらの仕事は全てパソコンを使用するため、パソコンの性能や使い勝・・・

続きを読む

メルカリ歴は2か月ほどですが、出品をメインに（たまに購入も）結構活用しています。 私はメルカリを始める前、家の不用品をバンバン売って自宅が綺麗に片付いて、ついでに小銭も稼いじゃおう！ なんて期待に胸をふくらませていました・・・

続きを読む

スクロールをすると要素がフェードイン表示する方法です。 jQueryとCSSanimationを使った方法をご紹介します。 スクロールをしてただ表示されていくより、ちょっとでもアニメーションなどの動きがあった方が、 断然・・・

続きを読む

縁をギザギザにしたい時に、フォトショ（photoshop）で行う操作に「ぎざぎざのエッジ」があります。 この操作、ちゃんと理解して使わないと効かないんです。 よくやってしまうことに画像の縁に効かせようとすること。 ですが・・・

続きを読む

画像をどんなデバイスでもきれいに表示させたい！ そんな思いを可能にしてくれるのがSVG画像。 SVG画像はベクター形式の画像ファイルで、スマホやタブレットなど高解像度のデバイスで表示してもラスター形式の画像のように画質が・・・

続きを読む

マウスオーバー（:hover）をするとふわっと色が変わるボタンの作り方です。 CSSアニメーションのtransitionプロパティを使った方法をご紹介します。 CSSアニメーションには@keyframes(キーフレーム)・・・

続きを読む

ページを開くと、テキストが一行ずつ上から下に向かって時間差で順々に、アニメーションでフェードイン表示する方法です。 先日、プロローグのようなページを作る機会があってその際に実装してみたので、その時のメモも兼ねて記事にしよ・・・

続きを読む

ブログ名を変更しました。 些細な変更ですが「なつきメモ」改め、「なつ記メモ」にしました。 読み方は「なつきめも」です。 当ブログは、2014年に開設してから、現在に至るまで2度ほどブログ名を変更しています。 アルファベッ・・・

続きを読む

画像を使わないでCSSだけで円を描いて、次に円の中央に文字を配置して、更にその円をCSSだけで非表示から中心を起点にアニメーションで徐々に拡大表示させる方法をご紹介します。

続きを読む

CSSだけで上や下、横からスッとフェードインしながらスライドインさせる方法です。CSSanimationと、transformプロパティのtranslate関数を使った方法をご紹介します。

続きを読む

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

続きを読む

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

続きを読む

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

続きを読む