横並びのボックスの高さを揃えて、画像を下揃えにする
Bootstrapで左右幅を決め、左側にロゴ、右側にメニューや電話番号というような配置のヘッダーを作成することが少なくありません。 ヘッダー全体の高さを指定していなければ、左右のいずれかのボリューミーなほうのコンテンツによってヘッダー全体の高さが決まります。 このままだと、左右いずれか、高さの小さい方のコンテンツは上から配置（上揃え）されるのですが、下を揃えたいという場合も少なくありません。 とこ […]
Stylesheet – スタイルシート
1/3ページ
- 2019.02.11
スタイルシートからブロックの順序を入れ替える
cssは編集可能で、htmlソースに手を加えたくない、もしくは手を加えられないような場合って以外とあると思います。 そのような場合にhtmlソースをそのままで、スタイルシートに手を加えることで、ブロックの順序（表示位置）を変えることが可能です。 PCは左右に振り分けて表示で、スマホは全幅にしてPCと並び順を変えるなんてことが可能です。 こんな感じですね。 これで、PCのときはblock1、bloc […]
- 2019.02.06
特定のclassセレクタを持つ要素の親要素にスタイルを適用する
言ってること伝わります？（笑） WordPressだと、function.php にごにょごにょすると、bodyタグのクラスセレクタにページスラッグを追加できたりするので、コンテンツ部分を作ってしまってからでも、各ページの特定の部分だけに要素を適用することも可能だったりします。 ところが、基本的にコンテンツ部分のソースには手を加えられない（もしくはページ数が多すぎで手を加えたくない）ようなサイトリ […]
- 2019.02.02
before擬似要素で指定した背景画像の位置決め – 行頭マークなどの配置
こんな具合にメニュー項目の左側にアイコンをつけたい。なんて場合が多々ありますが、あとあとのメンテナンスのしやすさや、工数を削減するために、既存サイトのコンテンツを活用しながらデザインリニューアルするために、HTMLに image タグで配置するのではなく、スタイルシートに before 擬似要素として設定することが多いのです。 多いのですが、ちょうどよい位置決めの方法をいつも忘れます（笑） 覚えよ […]
- 2018.12.17
Bootstrap4でお手軽上下左右中央揃え
中央揃えや下揃えでいろいろと苦労してきたけど、flex 時代になり、なおかつBootstrap4 を使用しているなら、d-flex でいとも簡単にできてしまう。 上下左右中央でこんなcssを書いたりしていましたが [crayon-5edc3c2c1d4ef414738003/] Bootstrap4 なら [crayon-5edc3c2c1d4f5454237848/] とするだけ。 簡単だわぁ♫ […]
- 2018.12.15
なんだかゆっくりしたいわぁ♨ ゆっくりスクロール ゆっくり色変わり
ページトップボタンのついているサイトの中で、ボタンの色がシュッと色が変わって、シャキッとページトップに移動するサイトって少なくないですね。 お硬いサイトやなんかはそれで良いと思うのですが、デザインに凝っているサイトだったり、やわらかコンテンツのサイトだったりすると、シャキッよりも、ニュ〜だったり、スル〜だったりのほうが良い場合もあります。 わざわざそのためだけにjQueryってのも大げさなので、c […]
- 2018.11.12
疑似要素を利用して融通の利く下線を引く
慣れてしまえば、そういうものだと割り切れるのですが、スタイルシートのボーダーは長さが指定できない。 border-width は指定できるが、そこでいう「幅」はボーダーの幅（長さ）ではなく、ボーダーの太さ（線の高さ）なのです。 これって、最初に border を定義した人が、間違ってwidthにしてしまったから取り返しがつかなくなったんじゃねぇの？と思うほど不便。 height と width に […]
- 2018.09.15
要素の最初、最後、偶数、奇数、n番目にスタイルを適用させたーい
リスト項目やメニュー項目で、「奇数項目に背景色を」とか「最初だけ左枠線をつけたい」とか、結構あります。 簡単にスタイルシートで指定できますが、簡単に忘れます(；´Д｀) なので、備忘録としてメモメモ 最初の要素 – first-child [crayon-5edc3c2c1d8f1478426314/] 最後の要素 – last-child [crayon-5edc3c2c […]
クリッカブルでレスポンシブな日本地図 – Clickable and Responsive Japanese Map
クリッカブルな日本地図を描きたい。とき、日本地図の画像を用意して、都道府県の座標を落としていく、イメージマップを使われてきたのが一般的かと思いますが、イマドキ「Japan Map プラグイン」という jQuery プラグインが用意されていたりします。 Japan Map プラグイン を使って色分けリアルな日本地図 こんなクリッカブルマップが簡単に描けます。 このソースは、コチラ https://t […]
特定のカテゴリーだけカテゴリーウィジェットに表示させない最も簡単な方法
「未分類」とか、見せたくないカテゴリーがあることは多いのだけど、標準のカテゴリーウィジェットを使うと、全部丸見え。いやん 表示、非表示を指定出るプラグインを使用したり、function.php に書き込んでフィルターをかける方法もあるのだけど、もっとホントに簡単に非表示にする方法があります。 標準のカテゴリーウィジェットの場合、各カテゴリー名は、li タグで表示され、そのcssクラス […]