HTML・CSS レスポンシブCSS iphoneのセーフエリアに影響されないCSSによる調整方法を紹介 2022年3月24日 コーディングをしていて、iPhoneなどの実機でスクロールした際に画面下部にあるセーフエリアについてサイトが影響されていることはありませんか。iPhoneX以降から導入されたセーフエリアにより、スマートフォンサイトが影響されているケースが発生している場合があります。 特に画面下部にメニューを配置したデザインなどをされて...
HTML・CSS コーディングレスポンシブ レスポンシブで適切な画像を読込み画像を変える方法 2021年8月17日 デバイスに合わせた画像の切り替えについて、どうのような方法をとられていますか? 今回はレスポンシブサイトの構築時に、デバイス合わせて適切な画像を読み込み、画像を変える方法について紹介していきます。 PC用の画像とSP用の画像を読み込ませて、display:none;で表示・非表示している場合には、画像の切り替え方法につ...
HTML・CSS コーディングJSフォームプラグイン フォームの入力補完機能Autocompleteを無効にする方法 2021年4月23日 フォームの入力保管機能は便利ですが、サイトの構築内容によっては、思わぬ妨害にもなってしまう場合があると思います。 そこで今回は、フォームの入力保管機能であるAutocompleteを無効にする方法について紹介していきます。 html側でフォームのAutocompleteを無効にする方法 ■フォーム全体にAutocomp...
HTML・CSS コーディングJS urlパラメータ渡しをページ内リンクで適用する方法 2020年7月17日 以前の記事でHTMLリンクでパラメータ渡しについて紹介しましたが、今回は同一ページ内でのページ内リンクでパラメータを渡す方法について承知していきたいと思います。 HTMLリンクのパラメータ渡しについて先に知りたい方は、下記記事をお読みください。 ↓↓↓↓ https://fractales.jp/javascript/...
HTML・CSS コーディングSEO Google検索にコアウェーブバイタルの改善が重要に!! 2020年7月16日 2020年5月は目まぐるしく、Googleのコアアルゴリズムアップデートによる順位変動の影響を受けた方も多いと思います。ご自身が運営されているサイトの検索順位が、急激に下がってしまった方は、いろいろと苦心されているでしょう。 そのコアアルゴリズムアップデートの後、しばらく経過した2020年5月28日に新たに検索ランキン...
HTML・CSS コーディングレスポンシブ cssを使ってテキストの文字数を制限する方法 2020年7月10日 SEOを意識している方であればH1タグなどを、テキストで表現したいと考える方は少なくないと思います。しかしH1に入力したテキストの文字数が長いと、スマートフォンで閲覧したら見栄えが悪くなってしまうのが悩みとなりますよね。 今回はそんな文字数問題を解決するために、cssを使ってテキストの文字数を制限する方法を紹介していき...
HTML・CSS コーディング動画 Youtubeのembed埋込み方式で関連動画を非表示にする方法 2020年7月9日 Youtube動画を設置するときにどのような方法で設置していますか? ほどんどの方は、設置がしやすいembed(埋め込み)方式で、動画を設置していると思います。設置した動画を再生してみると、再度に関連動画が表示されるので困ったことはありませんか? 今回はYoutubeのembed方式で表示される、関連動画を非表示にする...
HTML・CSS コーディング動画 videoタグの設定・使い方を紹介|MP4の動画を表示する方法 2020年6月24日 今回はMP4の動画を、webサイトに表示するために使用するvideoタグの設定・使い方を紹介していきます。わざわざvideoタグを使わなくてもYoutubeに動画をアップして、Youtubeの埋め込みコードから表示すればいいじゃない?そう思う方もいるかもしれませんが・・・ なかにはYoutubeに動画をアップしたくない...
HTML・CSS コーディングCSS動画画像 画像や動画の基準点を変更する方法 2020年6月22日 今回は画像や動画を拡大縮小する時や、回転させる時の基準点とその基準点の変更方法をお伝えしていきたいと思います。画像や動画の可変の際に思ったように可変してくれない場合に、基準点を変更すると解決する場合もあるので、是非参考にしていただければと思います。 目次 ・基準点を変更する方法 ・動画をメインイメージ使う場合に活用でき...
HTML・CSS コーディングリンク CSSでリンクを無効にできる!!便利な方法を紹介 2020年6月10日 aタグは必要だけど、特定の条件ではリンクは無効化したいという時はありませんか? JavascriptやJQueryを使用して、リンクを無効にしている方もいるかと思います。 実はCSSで簡単にリンクを無効化できるのです。 今回はCSSを使って、リンクを無効にさせる方法を紹介していきたいと思います。 CSSでリンクを無効化...