ウェブサイトを読み込む際に表示されるjQueryで簡単に実装できるローディング画面のエフェクトを作成しましたので掲載します。今回作りましたのは、読み込み時にロゴ(画像)を中央に表示し、読み込み完了後にバックグラウンドが左…
人気のスライダー【swiper.js】にサムネイルを表示させ、更に両サイドが少しづつ見えるカルーセルにカスタムする案件がありましたので、備忘録を兼ねて記載します。 サムネイルは、ギャラリーの中央にエフェクトを付けてメイン…
jQueryを使わずに設置ができると人気のスライダー【swiper.js】の矢印をFont Awesomeや画像でカスタマイズする…
ロゴ画像をSVG形式のファイルで埋め込む事ってありますよね。PNGはどうしてもボヤけてしまったりします。しかし、SVG形式の画像は埋め込むと表示されない事があります。そんな時の対処法を備忘録も兼ねて掲載します。 [htm…
ボックス要素の中にテキストを中央で配置したい時ってありますよね。これまでは「vertical-align: middle;」を使って…
ある案件でボックス内側に波線を作り、ボックスの角をドックイヤーにするという作業をしましたので備忘録を兼ねて掲載しておきます。掲載されているソースコードはコピーペースト、またはカスタムしてご自由にお使いください。 demo…
ウェブサイト内の様々な用途で使用する事が多い【矢印】をcodepenで集めたので紹介させて頂きます。全てCSSで作られておりコピーペーストで簡単に実装できます。 See the Pen Arrow Animation b…
多くのウェブサイトで当たり前のように設置されており、ユーザビリティーの向上につながるページトップスクロールのコードを掲載します。様々な制作方法があると思いますが、今回紹介する方法にはjQueryを用います。動きがスムーズ…
リスト項目として利用されるli要素にcontentでFont Awesomeのアイコン矢印を表示しマウスオーバー時にアニメーション…
画像ホーバーした時に画像はズームさせ下のキャプション文字は「にゅ〜」っとアップスクロールさせるエフェクトを作成しましたので掲載いたします。また、画像全体にリンクをかけているので、ユーザービリティー向上にも一役かえそうです…
ブログ機能の付いたウェブサイトを公開し最初はマメに更新していたが、徐々に存在を忘れ放置されて気付けば1年以上も新着記事が更新されていないウェブサイトって時々ありますよね。そんな状況をみて数年前から地味に始めていたブログ記…
ブログを掲載していると「引用文」などを記載する事があります。そんな時に役立つのがhtml5のblockquoteタグです。WordPressでは、挿入が簡単でブログ初心者のクライアント様でも使用できるので重宝しています。…