はじめてのgit(1). gitをインストールして初期設定をするまで(for Windows)
WEB制作を複数人で行うことになったため、ファイルの履歴管理をgitで行うことになりました。 フロントエンドエンジニアは、CSSやjavascriptを学ぶと同時に、gitも必須学習と言われているくらいメジャーなツールで・・・
CSSで複雑なグラデーションを作る方法
CSSでこちらの画像のような、複雑なグラデーションの作り方をご紹介します。 作り方は、「描画モードと透明度を変えた複数のグラデーションを重ねる」だけです。 まるでイラレやフォトショでの作業のようですが、CSSで出来るんで・・・
CSSアニメーションでバウンドしたり回転したりいろいろ
CSSanimationとtransformプロパティを組み合わせた、面白い動きをご紹介します。 ちょっと変わった動きがあるだけで、リッチ感が増すと思うのでサイト作成の参考にしてみてください。 各コードをコピペで実装可能・・・
動画の上下左右の黒い帯・余白を削除する方法(Adobe Premiere Pro)
動画の上下や左右にある黒い帯というか余白を削除する方法です。 ツールはアドビのpremier proで、クロップという機能を使います。 動画加工はこれが最初なので、もしかしたらもっといい方法があるかもしれません。 自分へ・・・
CSSのposition:absoluteとrelativeの使い方を理解する！要素を重ねる方法
要素を重ねて表示する際に、よく使用するのがpositionプロパティ。 topやleftなどとともに使って、自由自在な位置に要素を配置できる便利なCSSですが、 このpositionプロパティ、効かない、変な動きをするっ・・・
後編：WEBデザインを学ぶのに「派遣社員」という働き方は「活用する価値」はあるが長くはやらない方がいいという話
前編では、WEBデザインを学ぶことを目的にした場合の、派遣で働くメリットについて私の実体験を元に書いてきました。後編では、デメリットと派遣で働く際の心構えについて書いていきます。
前編：WEBデザインを学ぶのに「派遣社員」という働き方は「活用する価値」はあるが長くはやらない方がいいという話
現在私は某企業で正社員でWEB担当者兼デザイナーとして働いていますが、数年前までは派遣社員という雇用形態で働いていました。 派遣社員をやっていた期間は6年くらいで、短期派遣（2～3か月）や長期派遣（1年以上）で、WEBデ・・・
jQueryで滑らかにスーッと動く「上へ戻るボタン」を実装してみよう！
ページの途中や最下部で、ボタンをクリックするとページの一番上へ戻る「上へ戻るボタン」。 あれって、aタグでページ内リンクを記述すれば実装できます。 ですがこれだと一瞬で上へ戻ってしまって、ちょっとつまらないんですよね。 ・・・
IEやEdgeでfadeOut()が効かない！ローディングバーが非表示にならなくて困ったこと
先日ローディング画面を実装しました。 ページの内容が読み込まれたらjQueryのfadeOut()でローディング画面を非表示にして、本編を表示させようとしました。 ところがローディング画面がクロムでは非表示になりますが、・・・
CSSで画像を円形に切り抜く方法：object-fitが簡単で便利！
WEBサイトに円形の画像を載せたい時、画像自体を加工しなくとも、なんとCSSだけで円形に切り抜くことが出来るんです！ 「object-fit」というCSSを使った方法をご紹介します。 ほんの数行記述するだけで出来ますよ！・・・
パソコン選びで失敗しない！スペックなど購入前に押さえておくこと
つい先日、パソコンを新しく買い替えました。 これまでに3台買い替えており、これは4台目になります。 私はWEBのコーディングやデザインを仕事にしていますが、これらの仕事は全てパソコンを使用するため、パソコンの性能や使い勝・・・
人気のフリマアプリ「メルカリ」に出品してみた感想
メルカリ歴は2か月ほどですが、出品をメインに（たまに購入も）結構活用しています。 私はメルカリを始める前、家の不用品をバンバン売って自宅が綺麗に片付いて、ついでに小銭も稼いじゃおう！ なんて期待に胸をふくらませていました・・・
スクロールでフェードイン表示させる方法（jQuery+HTML+CSS）
スクロールをすると要素がフェードイン表示する方法です。 jQueryとCSSanimationを使った方法をご紹介します。 スクロールをしてただ表示されていくより、ちょっとでもアニメーションなどの動きがあった方が、 断然・・・
フォトショ（photoshop）の「ぎざぎざのエッジ」が効かない！正しい使い方について
縁をギザギザにしたい時に、フォトショ（photoshop）で行う操作に「ぎざぎざのエッジ」があります。 この操作、ちゃんと理解して使わないと効かないんです。 よくやってしまうことに画像の縁に効かせようとすること。 ですが・・・
ラスター、ベクターとは？SVGとは？おさえておきたい画像ファイルの基礎知識
画像をどんなデバイスでもきれいに表示させたい！ そんな思いを可能にしてくれるのがSVG画像。 SVG画像はベクター形式の画像ファイルで、スマホやタブレットなど高解像度のデバイスで表示してもラスター形式の画像のように画質が・・・
CSSでマウスオーバー時にアニメーションで色を変える方法
マウスオーバー（:hover）をするとふわっと色が変わるボタンの作り方です。 CSSアニメーションのtransitionプロパティを使った方法をご紹介します。 CSSアニメーションには@keyframes(キーフレーム)・・・
CSSで文章を一行ずつ時間差で順番にフェードインさせる方法
ページを開くと、テキストが一行ずつ上から下に向かって時間差で順々に、アニメーションでフェードイン表示する方法です。 先日、プロローグのようなページを作る機会があってその際に実装してみたので、その時のメモも兼ねて記事にしよ・・・
ブログ名変更しました。
ブログ名を変更しました。 些細な変更ですが「なつきメモ」改め、「なつ記メモ」にしました。 読み方は「なつきめも」です。 当ブログは、2014年に開設してから、現在に至るまで2度ほどブログ名を変更しています。 アルファベッ・・・
CSSで円を描いて、中央に文字を配置して、中心を基点に拡大させる方法
画像を使わないでCSSだけで円を描いて、次に円の中央に文字を配置して、更にその円をCSSだけで非表示から中心を起点にアニメーションで徐々に拡大表示させる方法をご紹介します。
