今回、CSSのみで、2列の縦方向の表を作りたいと思ったときに、思いの外時間がかかったので解決方法を紹介します。 表のマスの数が常に固定であれば、Gridを使えば直ぐに解決だったのですが、以下のようにシステムで表のマスが可 …
2024.04.04
Web制作・ホームページ制作
2024.04.04
2023.06.16
Web制作・ホームページ制作
2023.06.16
【UIkit】CSSのみで簡単！アコーディオンの開閉ボタンをカスタマイズする方法
UIkitでアコーディオンリストを実装した際、デフォルトの「＋」「ー」ボタンスタイルを変えられず苦戦したので、開閉ボタンのスタイルをカスタマイズする方法をご紹介します。 1 デフォルトのアコーディオン まずはコンポーネン …
2023.04.11
Web制作・ホームページ制作
2023.04.11
【UIkit】高さ可変のスライドショーを実装する方法
スライドショーをUIkitで実装した際、固定の高さではなく、画像の高さに応じて変わるようにする方法を発見したので、ご紹介いたします。 高さ固定のスライドショー（デフォルト） デフォルトは、どんなサイズの画像が入っても、同 …
2023.03.30
Web制作・ホームページ制作
2023.03.30
【UIkit】アンカーリンクのジャンプ位置を調整する方法
ページ内リンクへスクロールするアニメーションをUIkitで実装した際、タイトルが見切れる、ジャンプ位置がアンカーごとにバラバラになる、などの問題が発生したので、今回はその対処法をご紹介します。 アンカーリンクのジャンプ位 …
2023.03.29
Web制作・ホームページ制作
2023.03.29
【CSS】画像を好きな箇所・好きな比率でトリミングする方法
コーディングの際、PCサイトとスマホサイトで、画像のサイズだけでなく、拡大・縮小率やトリミング位置も微妙に異なっていて困ったことはないですか？ PCとスマホで別々に画像を書き出すのは手間がかかる上に、HTML上も2種類表 …
2023.03.29
Web制作・ホームページ制作
2023.03.29
iOS Safariでinputにbox-shadowが効かない問題
inputフォーカス時のアウトラインをbox-shadowで実装した際、iOS Safariでbox-shadowが表示されない問題が発生したので、その原因と対処法をご紹介します。 原因 初めはこのように記述していました …
2021.06.10
Web制作・ホームページ制作
2021.06.10
CSSだけでモーフィングアニメーションを作る
JavaScriptやSVGなども使わず、モーフィングアニメーションを作ることができるので、こちらの記事にまとめました。 実際に、作ったのが下記になります。 See the Pen qBrMZdE by Ju …
2021.06.08
Web制作・ホームページ制作
2021.06.08
vw、vh、vmin、vmaxの使い方
CSSにViewport単位で、vw、vh、vmin、vmaxという単位があります。 今回は、レスポンシブデザインが一般的になってきたからこそ多用されるようになった「vw、vh、vmin、vmax」の単位の使い方を紹介し …
2021.05.18
Web制作・ホームページ制作
2021.05.18
Font Awesome が正しく表示されない対処法
矢印やTwitterのアイコンなど表示させたいとき、多くの方がFont Awesomeを使用して、さまざまなアイコンを使用していると思います。 しかし、しっかり設置しないと下記のように表示されないことがあります。 この状 …
