ボタンをクリックした際に全画面に表示される、モーダルウインドウ風のメニューを実装する方法をご紹介いたします。 簡単なデモページを用意したので、挙動についてはデモページをご確認いただければと思います。 デモページを見る ボ…
ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法
スマホで背景画像を固定させる方法(background-attachment:fixed;の代替案)
背景画像を固定して中のコンテンツだけをスクロールさせるページを作成していたところ、スマートフォンでは「background-attachment:fixed;」が効かないことに気付きました。 スマートフォンでも背景画像を…
CSSで背景画像に半透明のレイヤーを重ねて背景のみを暗くする方法
背景画像の上にテキストを重ねた場合に、背景画像だけを少し暗くして上に重ねた文字を際立たせたいことってあるかと思います。 画像自体を編集しても良いのですが、CSSだけでも背景画像の上に半透明のレイヤーを重ねることはできます…
ページネーション用のコードを生成することができるWEBサービス「WordPress用ページャージェネレーター」
WordPress用ページャージェネレーターは、WordPressのページネーション用のコードを生成することができるWEBサービスです。ページネーションを出力するPHPと見た目を整えるためのCSSを生成することができます…
HTML・CSS・JavaScriptのコードを綺麗に整形することができるWEBサービス「DirtyMarkup Formatter」
DirtyMarkup Formatterは、HTML・CSS・JavaScriptのコードを整形することができるWEBサービスです。 コードを貼り付けて、ボタンをクリックするだけで綺麗に整形することができます。 Dir…
WordPressの管理画面で独自のCSSやJavaScriptを読み込む方法
WordPressの管理画面で独自のCSSやJavaScriptを読み込む方法をご紹介いたします。 管理画面に独自のCSSやJavaScriptを読み込むことで、より柔軟なカスタマイズが可能になります。 WordPres…
CSSの::beforeや::afterのcontent内で改行させる方法
CSSの擬似要素である::beforeや::afterのcontent内で改行させる方法をご紹介いたします。 CSSの::beforeや::afterのcontent内で改行させる方法 ::beforeや::afterの…
固定ヘッダーを実装している際にアンカーリンクの移動位置がずれるのを解消する方法
ヘッダー部分を「position:fixed;」で固定してスクロールに追尾させていると、アンカーリンク(ページ内リンク)への移動時に、固定したヘッダー部分の高さ分、移動先の位置がずれてしまいます。 正確には、位置がずれる…
CSSでborderの線の色を途中から変更する方法
border-bottomなどで付けた線の色を途中で変える方法をご紹介いたします。 以下のような線を実装することができます。 CSSでborderの線の色を途中から変更する方法 borderの線の色を途中で変えるには、:…
テキストは左揃えにしたまま要素を中央寄せにする方法
テキストは左揃えのまま、要素全体は中央寄せにする方法をご紹介いたします。文字にするとわかりにくいですが、以下のような状態をCSSで実現する方法です。 テキストは左揃えにしたまま要素を中央寄せにする方法 以下のようなHTM…