CSS– tag –

こんにちは、ゆうが（@yuuuugablog）です。 今回は、パンくずリストのデザインを紹介していきます。 [box class="box28" title="パンくずリストとは？"] パンくずリストとは、ブログやWebサイトを見ている人に「現在地」を教えてくれる構造化データのこと...

こんにちは、ゆうがです。 今回は、SNSアイコンをマウスホバーで色を変える方法を解説していきます。 たぶん言葉だけだと意味わからないと思うので、こちらを見てください。 上記のような感じで、おしゃれにアイコンの色を変える方法を解説していきます。

こんにちは、ゆうが(@yuuuugablog)です。 今回はブログで使える引用ボックスのデザインを紹介していきます。 [imgfuki src="https://cyberprogress.net/wp-content/uploads/2020/12/image-2-1-5.png" alt="【コピペでOK】引用ボックスのデザイン【CSS】"]...

ついに、Bootstrap5(ベータ版)が実装されましたね。まちどうしかった人もいるのじゃないでしょうか。 私はBootstrap3や4を使っていて「いや、5とか覚えられんわ」と思っていました。ですが、調べてみた結果そこまで爆発的な変更はないので安心してください...

こんにちは、ゆうが（@yuuuugablog）です。 今回はwebサイトで頻繁に使われている、CSSでドロップダウンメニューを作る方法を解説していきます。 完成イメージ 上記のようなドロップダウンメニューを実装していきます。 [box class="box30" title="本記事...

こんにちは、ゆうが(@yuuuugablog)です。 今回はweb制作でかなり使う「メガメニュー」を簡単に作る方法を解説していきます。 完成イメージ メガメニューとは上記のようなもので、スペースが広いのが特徴です。 ※マウスホバーをするとメニューが表示されま...

今回はアプリリンクを作る方法を紹介していきます。アプリリンクは視覚的にもわかりやすいのでテキストリンクで表示するよりも圧倒的にクリック率が上がりますよ。 [box class="box30" title="本記事のもくじ"] アプリリンクとは？ WordPressでアプリリン...

こんにちは、ゆうが(@yuuuugablog)です。 今回は、最新の機種iPhone 13 ProMaxまで対応しているレスポンシブデザインのブレイクポイントを紹介します。 どうぞ、この記事に書いてあるブレイクポイントをテンプレート代わりにし、ご使用くださいませ。m(_ _...

似たようなコードを１から書いたりするのってめんどうですよね。とくに、メニュー部分だったり、フッター、ボタンその他もろもろ。 なのでそんな方向けに、今回は「BoostNote」というエンジニア専用のメモ帳を紹介＆使い方を紹介します。 [box class="box3...

こんにちは、ゆうが（@yuuuugablog）です。 最近スマホのレスポンシブ対応をしている時に、実機で確認していたら「background-attachment: fixedが効かない！」とあせりました。 そこで今回は原因と対処法を解説していきます。 [box class="box30" title="...