ウェブ
作業効率UP爆速!!画像圧縮&変換&URL短縮&Code比較サイト一覧【WEB上便利ツールまとめ】
プル デザイン 原神攻略サイト
Web製作をしていく中で、「画像の拡張子を変えたい」「動画のデータ量を減らしたい」といった悩みがつきものです。 そこでデータの「圧縮 … ウェブ
ランダムで画像を取得し表示させることができるサイト「Lorem Picsum」【URLでimg取得】
プル デザイン 原神攻略サイト
Web製作でサンプルとして画像を入れておきたい時、表示させる画像を毎回ランダムで表示させたい。 画像をローカルにダウンロードせずに、 … ワードプレス
JINテーマでページネーションにアニメーションを追加する方法(フワッと順番に表示させる)【jQuery】
プル デザイン 原神攻略サイト
JINテーマを独自にカスタマイズした中で今回はページネーションにアニメーションを追加しましたので紹介します。 ▪アニメーション動作は … ウェブ
スクロールバー(scrollbar)のデザインを変更する方法【CSS】
プル デザイン 原神攻略サイト
CSSのみでスクロールバーをカスタマイズする方法について解説します。ブラウザで一番右側に表示されているのがスクロールバー。 Goog … デザイン
XDで日本語と英文を縦書きにする方法(プラグイン)【Adobe XD】
プル デザイン 原神攻略サイト
WEBデザインを作る際にAdobeの「XD」がよく活用されています。 文字を縦書きにしたい場合、Photoshopでは簡単にできます … ウェブ
scrdownの実装方法-CSSでアニメーション「animation」と「transition」について【@keyframesの指定方法】
プル デザイン 原神攻略サイト
手軽なアニメーションとしてWeb上でマウスを乗せた場合の:hoverアニメーションをつける場合はCSSプロパティtransitionを使っ … ウェブ
フルスクリーントップ画像をズームしながら全画面で切り替えSwiper組み合わせハンバーガーメニュー付き
プル デザイン 原神攻略サイト
フルスクリーントップ画像を「ズームしながら画像を切り替える」Swiper導入と、「ハンバーガーメニュー」を同時にコピーペーストで実装できる … ウェブ
Swiperでスライドを簡単に実装する方法(スワイパー)【jQuery不要】
プル デザイン 原神攻略サイト
スライダーはslickがありますがこちらはjQueryが必要になりますが、Swiperの場合はjQuery不要で利用可能です。 外部 … デザイン
Photoshopでデザインパターンを作る方法【作成時間:1分】
プル デザイン 原神攻略サイト
フリー素材ではなくオリジナルのパターンを作る方法についての解説になります。 Photoshopを使って1分で簡単に作ることが出来ます … ウェブ
約物半角専用のWebフォント「Yaku han JP」記号の字詰めを整える【Web Font】
プル デザイン 原神攻略サイト
デザイナーにとって一番難しいとされる「文字詰め」かなり気を使い調整します。 Photoshopやillustratorで作るグラフィ … デザイン
イラストレーターとフォトショップのフォント履歴の表示を消す方法【illustrator・Photoshop】
プル デザイン 原神攻略サイト
illustratorやPhotoshopではデフォルトで、一度使用したフォントは上部に表示されるようになっています。 この仕様が自 … ウェブ
スクロールすると下から出てくる「トップに戻るボタン」をコピペで実装可能【jQueryで作る方法】
プル デザイン 原神攻略サイト
Webサイトの一番上にいる場合は「トップに戻るボタン」が隠れている状態ですが、下にスクロールすると、下から出てくるように設定。 コピ … ウェブ
CodePen(コードペン)で画像を取得し表示させる方法【Googleドライブ】
プル デザイン 原神攻略サイト
CodePenで自身が指定した画像を表示させるためには、Googleドライブが必要でGoogleドライブに画像をアップロードし、その画像を … ウェブ
カーソルホバー時、ボタン:hoverで背景色が変化するCSSのみで表現【HTML・CSS】
プル デザイン 原神攻略サイト
WEBデザインに必要なホバー時のボタン:hoverで背景色が変化をCSSのみで様々な動きを加えました。カーソルが要素に乗った際に動作します … ウェブ
CSSクラス名の命名や短縮名【まとめ一覧】
プル デザイン 原神攻略サイト
よく使われるクラス名を一覧にしてまとめました。 英語が苦手な方でも読み方と意味も付けています。class名は自由に命名した場合、他の人が見て理解できる単語にしておかないと後 … ウェブ
ハンバーガーメニューでメニュー外をクリックした際も閉じるを実行するナビゲーションの作り方【JavaScript】
プル デザイン 原神攻略サイト
端末の幅が狭い場合にハンバーガーメニューを表示しますが、PC版のサイトでもナビゲーションメニューが入りきらなかった時にも使用します。 … ワードプレス
WordPressのログイン画面をプラグインなしで簡単に変更する方法【functions.php】
プル デザイン 原神攻略サイト
WordPressサイトを複数所有している場合、ログイン画面が全く同じだとURLを確認しないと直感でどこのサイトなのかがわからない。 …