CSS Stylesheet – スタイルシート

body タグの class 属性にユーザー権限グループを追加

ユーザー権限に応じて表示 / 非表示を切り替えたい場合にブロックやウィジェット毎に表示 / 非表示を切り替えることができるプラグインはいろいろとあります。 Elementor 用のものもあるのですが、これまで使用していた […]

body タグの class 属性にユーザー権限グループを追加 Read More »

横並びのボックスの高さを揃えて、画像を下揃えにする

Bootstrapで左右幅を決め、左側にロゴ、右側にメニューや電話番号というような配置のヘッダーを作成することが少なくありません。 ヘッダー全体の高さを指定していなければ、左右のいずれかのボリューミーなほうのコンテンツに

横並びのボックスの高さを揃えて、画像を下揃えにする Read More »

スタイルシートからブロックの順序を入れ替える

cssは編集可能で、htmlソースに手を加えたくない、もしくは手を加えられないような場合って以外とあると思います。 そのような場合にhtmlソースをそのままで、スタイルシートに手を加えることで、ブロックの順序(表示位置)

スタイルシートからブロックの順序を入れ替える Read More »

特定のclassセレクタを持つ要素の親要素にスタイルを適用する

言ってること伝わります?(笑) WordPressだと、function.php にごにょごにょすると、bodyタグのクラスセレクタにページスラッグを追加できたりするので、コンテンツ部分を作ってしまってからでも、各ページ

特定のclassセレクタを持つ要素の親要素にスタイルを適用する Read More »

before擬似要素で指定した背景画像の位置決め – 行頭マークなどの配置

こんな具合にメニュー項目の左側にアイコンをつけたい。なんて場合が多々ありますが、あとあとのメンテナンスのしやすさや、工数を削減するために、既存サイトのコンテンツを活用しながらデザインリニューアルするために、HTMLに i

before擬似要素で指定した背景画像の位置決め – 行頭マークなどの配置 Read More »

なんだかゆっくりしたいわぁ♨ ゆっくりスクロール ゆっくり色変わり

ページトップボタンのついているサイトの中で、ボタンの色がシュッと色が変わって、シャキッとページトップに移動するサイトって少なくないですね。 お硬いサイトやなんかはそれで良いと思うのですが、デザインに凝っているサイトだった

なんだかゆっくりしたいわぁ♨ ゆっくりスクロール ゆっくり色変わり Read More »

疑似要素を利用して融通の利く下線を引く

慣れてしまえば、そういうものだと割り切れるのですが、スタイルシートのボーダーは長さが指定できない。 border-width は指定できるが、そこでいう「幅」はボーダーの幅(長さ)ではなく、ボーダーの太さ(線の高さ)なの

疑似要素を利用して融通の利く下線を引く Read More »

要素の最初、最後、偶数、奇数、n番目にスタイルを適用させたーい

リスト項目やメニュー項目で、「奇数項目に背景色を」とか「最初だけ左枠線をつけたい」とか、結構あります。 簡単にスタイルシートで指定できますが、簡単に忘れます(;´Д`) なので、備忘録としてメモメモ 最初の要素 &#82

要素の最初、最後、偶数、奇数、n番目にスタイルを適用させたーい Read More »

クリッカブルでレスポンシブな日本地図 – Clickable and Responsive Japanese Map

クリッカブルな日本地図を描きたい。とき、日本地図の画像を用意して、都道府県の座標を落としていく、イメージマップを使われてきたのが一般的かと思いますが、イマドキ「Japan Map プラグイン」という jQuery プラグ

クリッカブルでレスポンシブな日本地図 – Clickable and Responsive Japanese Map Read More »

↑上へまいりま〜す