コーディングをしていて、iPhoneなどの実機でスクロールした際に画面下部にあるセーフエリアについてサイトが影響されていることはありませんか。iPhoneX以降から導入されたセーフエリアにより、スマートフォンサイトが影響されているケースが発生している場合があります。 特に画面下部にメニューを配置したデザインなどをされて...

デバイスに合わせた画像の切り替えについて、どうのような方法をとられていますか？ 今回はレスポンシブサイトの構築時に、デバイス合わせて適切な画像を読み込み、画像を変える方法について紹介していきます。 PC用の画像とSP用の画像を読み込ませて、display:none;で表示・非表示している場合には、画像の切り替え方法につ...

フォームの入力保管機能は便利ですが、サイトの構築内容によっては、思わぬ妨害にもなってしまう場合があると思います。 そこで今回は、フォームの入力保管機能であるAutocompleteを無効にする方法について紹介していきます。 html側でフォームのAutocompleteを無効にする方法 ■フォーム全体にAutocomp...

以前の記事でHTMLリンクでパラメータ渡しについて紹介しましたが、今回は同一ページ内でのページ内リンクでパラメータを渡す方法について承知していきたいと思います。 HTMLリンクのパラメータ渡しについて先に知りたい方は、下記記事をお読みください。 ↓↓↓↓ https://fractales.jp/javascript/...

2020年5月は目まぐるしく、Googleのコアアルゴリズムアップデートによる順位変動の影響を受けた方も多いと思います。ご自身が運営されているサイトの検索順位が、急激に下がってしまった方は、いろいろと苦心されているでしょう。 そのコアアルゴリズムアップデートの後、しばらく経過した2020年5月28日に新たに検索ランキン...

SEOを意識している方であればH1タグなどを、テキストで表現したいと考える方は少なくないと思います。しかしH1に入力したテキストの文字数が長いと、スマートフォンで閲覧したら見栄えが悪くなってしまうのが悩みとなりますよね。 今回はそんな文字数問題を解決するために、cssを使ってテキストの文字数を制限する方法を紹介していき...

Youtube動画を設置するときにどのような方法で設置していますか？ ほどんどの方は、設置がしやすいembed（埋め込み）方式で、動画を設置していると思います。設置した動画を再生してみると、再度に関連動画が表示されるので困ったことはありませんか？ 今回はYoutubeのembed方式で表示される、関連動画を非表示にする...

今回はMP4の動画を、webサイトに表示するために使用するvideoタグの設定・使い方を紹介していきます。わざわざvideoタグを使わなくてもYoutubeに動画をアップして、Youtubeの埋め込みコードから表示すればいいじゃない？そう思う方もいるかもしれませんが・・・ なかにはYoutubeに動画をアップしたくない...

今回は画像や動画を拡大縮小する時や、回転させる時の基準点とその基準点の変更方法をお伝えしていきたいと思います。画像や動画の可変の際に思ったように可変してくれない場合に、基準点を変更すると解決する場合もあるので、是非参考にしていただければと思います。 目次 ・基準点を変更する方法 ・動画をメインイメージ使う場合に活用でき...

aタグは必要だけど、特定の条件ではリンクは無効化したいという時はありませんか？ JavascriptやJQueryを使用して、リンクを無効にしている方もいるかと思います。 実はCSSで簡単にリンクを無効化できるのです。 今回はCSSを使って、リンクを無効にさせる方法を紹介していきたいと思います。 CSSでリンクを無効化...