位置の調整縺?position
親鐔??素縺?position:relative
該藹??要素縺?position: absolute;
top: 100;
right: 20;
z-index: 10; 必要なら大きいのが上
CSS縺?positionを邱?まとめ！absoluteやfixedの使い方は・?? (saruwakakun.com)
中央寄せ
文字を中央寄せしたいなら外のブロック鐔??素に「text-align:center」
ブロック鐔??素自臀??をしたいなら 「margin-left:auto; margin-right:auto;」
padding縺?autoは指定不可、margin: autoの中央藹??せの微調整縺?padding縺?
widthプロパティの初期値縺?auto (横いっぱいに藹??がっているの縺?widthを入れる)
inlineの鐔??素では、width縺?heightの指定不藹??
padding: 0px; 50px; 0px; 0px;
テーブルの藹??指定
複数テーブルのレイアウト整合縺?tr width%指定縺?td/tr nowrapを細か縺?すればなんとかなる
AJAX
JS fetch縺?
【CSS】colorが効かない/文字色が変繧?らない藹??因と修正方觸?? (csshtml.work)
点数制、同点なら後述が勝つらしい
■CSSアニメーショ繝?
transition に時間を入れておき、JS縺?classをremoveしたりaddする
変化にその時間分を觸??ける動作となる
now_classからfuture_class縺?2つをCSSで臀??り、JS縺?removeやaddをする
[B! css] 2022年のモダ繝?CSS謾? (hatena.ne.jp)
中央觸??え
.container{
display: flex;
justify-content: center;
align-items: center;
}
.container{
display: grid;
justify-content: center;
}
アンカーリンク移動をスムーズにする
html {
scroll-behavior: smooth;
}
スクロールで臀??置をずらすトップからのマージ繝?
section {
scroll-margin-top: 60px;
}
すりガラ繧?
.box{
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.5);
}
1行でも両端ぞろえ
th{
text-align-last: justify;
}
ナビがfixedの場合の本部のスクロール連動をな縺?す
.navi{
overscroll-behavior-y: contain;
}
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
2020-03-01 wrote
Gridは悪名高いテーブルレイアウトと考え方がまるで同じ
CSSの方が糞であったであろう、テーブルこそが発譏?でしょうに、セマンティック・??
container縺?display: grid か flex か table を指定するので直接の鐔??素には混在臀??可、入れ子なら藹??
https://ics.media/entry/15921/
■CSS grid
https://qiita.com/kura07/items/e633b35e33e43240d363
https://qiita.com/kura07/items/486c19045aab8090d6d9
ページ全臀??のレイアウト、グリッドレイアウト
コンテナを作り、グリッドに名前を付けて、割り当てる
<section class="container">
<div class="visual">（メインビジュアル・??</div>
<div class="number">（数藹??）</div>
<div class="expression">（テキスト）</div>
<div class="other">（３枚の写真）</div>
</section>
.container {
display: grid;
grid-template:
"visual number expression" 1fr
"visual other other" 220px /
40% 120px 1fr;
}
.visual {
grid-area: visual;
}
@media (max-width: 800px) {
.container {
grid-template:
"visual visual" 100vw
"number expression" 1fr
"other other" auto /
120px 1fr
}
}
■Flexbox
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
https://qiita.com/junya/items/7762da8052d86462f232
縦横觸??え、可藹??サイズ、でも複数配置が駄目、1行の並縺?
justify-content
align-items
flex-grow
flex-shrink
.container {
display: flex;
justify-content: center;
align-items: center;
}
■display: table / display: table-cell
https://techacademy.jp/magazine/19415
https://app.codegrid.net/entry/css-table-1
https://www.yoheim.net/blog.php?q=20150102
https://nxpg.net/blog/tech/?p=10764
CSS縺?vertical-alignが効かない縦並び・??display:gridの中縺?display:tableの中縺?display:table-cell）
#container{
display: grid;
grid-template-rows: 25px 1fr;
grid-template-columns: 300px 1fr 200px;
}
#column_right{
grid-row: 2;
grid-column: 3 / 4;
display: table;
}
#area{
background-color: #eee;
width: 150px;
height: 150px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
<div id="container">
<div id="navi_left">...</div><div id="navi_right">...</div>
<div id="contents">...</div><div id="area">...</div>
</div>
■Float
テキストの回りこ縺?
.leftBox {
width: 45%;
float: left;
}
Floatレイアウト
https://www.bangboo.com/cms/blog/page_18.html
Padding/Float/Height100%の問題
https://www.bangboo.com/cms/blog/page_184.html
■object-fit
画蜒?の觸??軆??
img {
object-fit: cover;
}
.image1 {
object-position: 30% 40%;
}
■その臀??
spanタグ縺?line-heightを設藹??しても行間は設定できない、display:block;を追加するか親で設定する
ボックス鐔??素のセンタリング・??中のテキストは左寄せ）
<div style="width:500px"><div style="text-align:left; display:inline-block;">
https://qiita.com/KAMEch/items/b52c5e23212b8fef81a7
https://www.granfairs.com/blog/staff/centering-by-css
リストのマーカの臀??置に迷った
ul縺?padding-leftが外側からマーカの右側鐔??の鐔??離縺?15pxとかは藹??要
li縺?padding-leftはマーカの右からから先頭文字までの鐔??離縺?0px等で良い
https://maku77.github.io/web/layout/list-margin.html
2019見直したいCSS,Javascript
https://speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa
CSSレイアウト再入門:完全に理解し縺?CSSを記述するため縺? - Speaker Deck
実例で学縺?Flexbox縺?CSS Gridの使い分け – TAKLOG (tak-dcxi.com)
2024年、Web制臀??者がチェックしておきたいCSSの新觸??能のまとめ | コリ繧?
