HP制作
キャメルケース・スネークケース・ケバブケースの違いと使い分けを解説
2024.10.032024.10.21
プログラミングにおいて、変数や関数、ファイル名を命名する際には、統一された規則に従って名前を付けることが重要です。命名規則にはいくつかの種類があり、コードの可読…
HP制作
jQueryでナビゲーションの状態をCookieで保持する方法を徹底解説
2023.03.082024.09.10
WEBサイトのナビゲーションやアコーディオンメニューの開閉状態を維持したい場合、Cookieを使って制御する方法があります。Cookieは、訪問者がWEBサイト…
HP制作
スマホ表示でbrタグを消したい？CSSとJavaScriptでの最適な解決方法
2022.06.032024.10.04
レスポンシブデザインが当たり前になった現代、スマホ表示の際にbrタグを非表示にしたいと考えたことはありませんか？ 例えば、PC表示では改行を入れたいけれど、スマ…
HP制作
CSSでposition:relativeを使った右寄せの方法と応用
2022.04.202024.09.10
久しぶりの更新となりますが、今回はウェブ制作に役立つCSSのテクニックをシェアしたいと思います。 日々のコーディングで意外と忘れがちな、[position]を使…
HP制作
CSSで使える正規表現風セレクタの活用法！コードを効率化するテクニック
2020.12.032024.09.05
CSSのソースは少ないコードでシンプルにできると、管理が楽になるだけでなく、サイトの読み込み速度も向上し、容量も軽くなります。いわば「スマートなコーディング」が…
HP制作
Bootstrapで5カラムレイアウトを実現するカスタムCSSの作成方法
2020.08.202024.10.15
Bootstrapは12分割のグリッドを採用しているため、通常は5等分されたレイアウトを実現することができません。 Bootstrapのグリッドシステムは、直感…
HP制作
【CSS】横並びメニューの区切り線を「隣接セレクタ」と「疑似要素」を使って実装する方法
2019.05.302024.08.23
グローバルメニューやフッタメニューで利用することが多い区切り線（罫線）。皆さんはどのように実装していますか？ 区切り線を作る方法はいくつかありますが、CSSのb…
HP制作
CSSでリンク範囲を親要素全体に広げる簡単な方法を解説
2018.11.142024.09.10
今回はCSSでリンク（aタグ）のクリック範囲を親要素全体に広げる方法を紹介します。 PCサイトはもちろん、スマホサイトでは特にリンクのクリック範囲が広い方が使い…
HP制作
【jQuery】外部リンクに自動でFont Awesomeアイコンを表示する方法
2018.08.212024.08.23
通常、外部リンクにアイコンを表示する場合、HTMLに直接アイコンを追加することが一般的です。しかし、HTMLに手動でコードを記述するのは手間がかかり、特に大規模…
HP制作
【CSS】Font Awesome 5を疑似要素で指定するとアイコンが表示されない時の解決方法
2018.08.142021.05.19
Font Awesome 5で、CSSの疑似要素（::before, ::after）でcontent指定をした際、アイコンが表示されない場合の解決方法です。 …