web録web録HOMEweb録PCハード・ソフトBlogブログ運営・WordPressmemoただのメモCSSの勉強メモ2019.6.13CSSに関する私的なメモです。書いた本人にしかわからない所が多いです。画像の下に隙間ができてしまうダミー画像を使う影の設定(box-shadow)border-radiusnotosansフォントがよい。※この方法はいまいち良くないので使わない。下のcssで画面の両端まで領域が広がる。}画像の下に隙間ができてしまう原因:画像配置のデフォルトはbaseline(アルファベットのp文字の一番したの位置)であるため。対処:cssで画像の配置をbottomにする。{vertical-align:bottom;}ダミー画像を使う下記を入力。4番目の値:広がり距離です。色を指定すると、影がその色になる。水平方向/垂直方向の楕円半径notosansフォントがよい。※下記方法をfirefoxでやったがうまくいかず。その後以下でフォント指定。左]text-align:justifyテキストを両端そろえにする。これを指定すると文章の両端のラインがそろうため、borderの線をひいてなくても何となく区切りのラインを感じ取れるようになる。flex-growを0、flex-shrinkを0、flex-basisを固定したい値(300pxなど)、とすると伸び縮みせずに固定幅になる。flexアイテムの最小幅は、「A:flexアイテムに明確に指定した幅」か「B:flexアイテムの中の要素(divとかpreとか)に明確に指定した幅」のいずれか小さい方となる。Aでflexアイテムにwidth=500pxと指定するとブラウザの幅を500pxより小さくしてもflexアイテムは500pxよりも小さくは縮まずにブラウザからはみ出すことになる。1行目で幅0pxとすることで、最小で0pxの幅までflexアイテムが縮むため、ブラウザの幅を狭くしてもブラウザからはみ出さなくなる。2行目でflex:1とすることで横に広がれる余地があれば自動で広がる。Bのケースでありがちだが、flexアイテム内の要素(divとかpreとか)に幅を指定してあると、flexアイテムがその幅よりも小さく縮まなくなる。preは幅を指定していないにも関わらず暗黙的に<pre></pre>で囲まれた部分の幅が使われてしまう模様。http://nanto.asablo.jp/blog/2016/04/03/8063943flexの例が分かりやすいサイトCMANというサイトがとてもわかりやすい。要素に直書き:style=””:1000スタイルの強制適用!importantをつける。マウスカーソルの形状marginの相殺marginは重なると相殺される。paddingは重なっても相殺されない。paddingの要素範囲paddingはpadding部分も要素とみなされるので背景色などもpadding部分に適用される。https://admin.typeform.com/form/6201311/fields/#/記事カテゴリー:memo更新日:2019.6.13公開日:2018.10.7TwitterFacebookB!HatenaPocket↑よかったらシェアお願いします。関連する記事このあたりの記事が関連しそうです。(2TB)をレビューします!よく読まれている記事ASUSノートPCのメモリを4GB⇒8GBに増設してみた。RecodeでMOVからmp4へ変換する時のおすすめ設定5パターン100円で作るシンプルなノートPCスタンドWACOMのペンタブのカーソル位置がずれる。