Stylesheet – スタイルシート

1/3ページ

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

Bootstrapで左右幅を決め、左側にロゴ、右側にメニューや電話番号というような配置のヘッダーを作成することが少なくありません。 ヘッダー全体の高さを指定していなければ、左右のいずれかのボリューミーなほうのコンテンツによってヘッダー全体の高さが決まります。 このままだと、左右いずれか、高さの小さい方のコンテンツは上から配置(上揃え)されるのですが、下を揃えたいという場合も少なくありません。 とこ […]

  • 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クラス […]

1 3
↑上へまいりま〜す