よくやってしまいがちな日本語タイトルのままのブログ記事投稿。 一応モダンブラウザだと問題なく日本語URLで表示されますが、サーチコンソールでチェックしづらく、SEO的にもイマイチそうな文字化けの可能性があるURLになってしまいます。 ですので、気づい…

面白いサイトがないかリサーチしていると、ふと、「お！」と目を引かれるサイトがありました。 ▼株式会社フリースタイルエンターテイメントというWeb制作会社のホームページです。 www.freestyle-entertainment.co.jp フリースタイルエンターテイメントさん…

Youtube動画を埋め込む際に、評価スコアへの影響を下げるように動画を読み込ませる方法を解説します。 data属性を利用したjavascriptによる遅延読み込みと、代替画像に置き換えてクリック後に読み込ませる方法を解説しています。

Slick.jsや、当ブログでも解説記事を書いたSwiper.jsなどの便利なスライダープラグイン。 ウェブのフロントエンド制作においては必須クラスに重宝すると思います。 今日も、とある案件作業でlaravelアプリケーションのフロントエンドでサクッと使用しようと…

たまに、ウェブ上で調べものをしてるとテキストをコピーするボタンってみかけますよね。 「これをコピペしてください。ボタンを押すとコピー出来ます」的な。 「 」こういうアイコンと一緒に表示されてたりもしますね。 通常コピーしたい部分を選択してCtr+C…

前回、スクロールに合わせてふわっと表示させるJavaScriptのライブラリ ｢AOS (Animate On Scroll)｣ について導入、実装について解説しました。 webabc.hatenablog.jp AOSの標準機能だけでお手軽簡単にふわっとフェードインなどの効果が実装出来ますが、今回…

// サイトを印象付ける方法としてアニメーションが用いられているのをたまに見かけると思います。 ページをスクロールさせると、その場所に来たタイミングでふわっとタイトルや画像がフェードインしてきたりするアニメーション等ありますよね。 こんな感じに…

スマホやタブレット対応といえば、CSSで画面幅に応じて要素のスタイルを変更したり上書きするメディアクエリを用いた方法が主流です。 ただ状況によってはJavaScriptでもうまくスマホ/タブレット対応する必要があります。 例えばスマホの場合は余計なファイ…

前回解説したJavaScript製のスライドショープラグイン「Swiper.js」について、カスタマイズ方法をもう少し詳しく見ていきたいと思います。 カスタマイズによっては上の画像のような昔のiTunesっぽいカーバフロースタイルにも出来ます。 導入については前回記…

ウェブサイトではトップ画面などによくスライドショー/スライダーを見かけますよね。 でもHTML/CSSだけではスライダーは実装出来ません。 なるべく簡単に実装できるよう、私もよく利用するSlick.jsやbxSliderなどのプラグインがありますが、jQuery必須だった…

JavaScriptでウィンドウを閉じる動作が動かない件について調べてみた内容を解説しています。 window.close();だけで以前は閉じれたウィンドウやタブが現在効かなくなっています。

Googleフォームをサイトに埋め込む連載、第三回目です。 前回までの回はこちらから↓ 【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.1 - ABC ウェブエンジニアblog 【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.2 カスタマイ…