タグ

2020年7月17日のブックマーク (4件)

  • CSS 何だったけってなりがちなメモ。initial と inherit - かもメモ

    CSSのプロパティリセットする時に使うやつ。 initialとinherit CSS書かない日が続くとどっちが何だっけ?ってなることがあるのでメモ。(メモすれば忘れにくくなる!かも initial は 初期化 英語で initial は「初めの、最初の、初期の」とか。 プログラムとかでよく出てくるinitとかと同じ CSS の initial キーワードは、要素にプロパティの初期値 (または既定値) を設定します。 初期値をブラウザーのスタイルシートで指定された値と混同しないでください。 出典: initial - CSS: カスケーディングスタイルシート | MDN HTML <p class="text-red"> おいでよ<em>アイカツ</em>の沼! </p> <p class="text-red"> おいでよ<em class="text-initial">アイカツ</em>の

    CSS 何だったけってなりがちなメモ。initial と inherit - かもメモ
    yk_ac
    yk_ac 2020/07/17
  • 【CSS】max-widthとmin-widthの使い方まとめ

    1. 最小幅(min-width)の使い方 min-widthでは「widthの取ることのできる最小値」を指定します。言い換えると要素がこれ以上小さくならない幅を指定することができます。 たとえば、以下のように書くと「段落要素(pタグ)が100pxよりも小さくならない」という指定になります。 p { min-width :100px; } = 要素が100pxより小さくならない(100px以上)という意味 ではmin-widthは具体的にどのようなときに使うのでしょうか。 1-1.min-widthの使いどころ widthを%で指定したときに、min-widthはセットで使うと便利です。たとえばwidth:50%のとき、ウェブページを見る端末(ブラウザ)のサイズによって要素が小さくすぎたり、大きすぎたりするわけです。

    【CSS】max-widthとmin-widthの使い方まとめ
    yk_ac
    yk_ac 2020/07/17
  • バナー画像を横並びに配置する方法

    バナーを同じ間隔で横に並べて表示したい! トップページレイアウト 公開日:2020.04.16 (2024.01.10 更新) こんにちは、makeshopのあらいです。 いつもmakeshopをご利用いただきありがとうございます。 今回はバナーを横並びに表示する方法をご紹介します! こんなお悩みありませんか? ・いくつかあるバナー画像を横に並べてレイアウトしたい ・バナーを同じ間隔で横に配置したい ・floatを使わずにフレックスボックス(display:flex)を使ってリストを横並びにしたい [難易度 ★★☆ ] バナーを横に並べて表示する方法! ※プレミアムショッププランのみ 設定方法 (1)ul,li要素で書く! ベーシックモードの場合 旧管理画面:【ショップデザイン(PC)】>【トップページ編集】>【中央管理画面】 または表示したい画面 新管理画面:メインメニュー / ショップ

    バナー画像を横並びに配置する方法
  • 【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 | web(K)campus|WEBデザイナーのための技術系メモサイト

    【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 WEBデザイナーのつくるデザインって基的にブラウザからキャプチャ取ってきたスクロールバーが使われるんですけど、グラフィックデザイナーよりの人がつくるWEBデザインってスクロールバーもご丁寧にサイトカラーに合わせた色合いになってる事があるんですよね。 けっこう昔に、スクロールバーをCSSで装飾するエントリーを書いた事がありましたけど、あれはChromeのみだったんですね。 今回はJavascriptを使って、メジャーどころなブラウザはほとんど同一の装飾を施せる「perfect-scrollbar.js」ってJavascriptのプラグインを使ったので備忘録。 perfect-scrollbar.jsの使い方 まずは、必要なファイルをダウンロード。 GitHubに用意されています。 必要

    【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 | web(K)campus|WEBデザイナーのための技術系メモサイト