tanaka

html,css

cssでborderではない独立した仕切り線は、擬似要素::before ::afterを使う

擬似要素 ::before ::after  でバックスクリーンだけ使いたい時は content: ""; が必ず必要。
html,css

transform:translateは移動じゃない!? 本体と表示部分の説明(html,css)

こんにちは tanaka です。 今回は「transform:translate」の小話です。 小話なので気軽に読んでください。 「知ってました?」 「transform:translateは、本体が移動...
html,css

cssから文字を入れるには?擬似要素「::before 」「::after」を使う

こんにちは、tanaka です。 「cssから文字を入れられないのかな?」 と思ったことはありませんか。 実は、cssから文字を入れることはできます。 それには、擬似要素「::before」「::afte...
html,css

margin相殺のさらに詳しい説明と3つの解決法

この記事は「margin相殺とは?」の続きの記事になります。 前回の記事はこちら↓ こんにちは、tanakaです。 今回は、margin相殺について「さらに一歩踏み込んだ説明」をします。 どの...
html,css

margin相殺とは?「display:block」で「marginが計算通りにいかない」はこれが原因!?

marginの相殺は大きい値が優先される。 magin相殺が起きるのはdisplay:blockだけ。
html,css

cssのdisplay(inline、inline-block、block)3種の説明

大まかな機能の表と、ちょっとした説明書き
html,css

2行目以降の字下げは「padding-left: 1em」「text-indent -1em」で作る

こんにちは、tanaka です。 「下のような字下げをやってみたい」 そう思ったことはありませんか? (注意)上の牛乳パンのレシピは「html用の見本」です。このレシピで牛乳パンを作成しないでください...
html,css

cssの中央寄せは「margin: 0 auto」「text-align: center」どちらかを使う

こんにちは、tanaka です。 「cssの左右の中央寄せがわかりにくい」 そう思ったことはありませんか? ざっくり言ってしまうと 「text-align: center」を親要素へ入れる。 これで...
html,css

cssだけでボタン!? アコーディオンメニューの説明と作り方

こんにちは tanaka です。 「cssのアコーディオンメニューの仕組みはどうなっているのかな?」 そう思ったことはありませんか? 結論から言うと  1:<input type=”checkbox...
html,css

cssのセレクタとは?よくわかる解説

cssのセレクタについての説明です。
html,css

cssのpositionは、relativeの場所へabsoluteで置いていく

position: relative; position: absolute; の解説をしています。
html,css

cssのbackgroundにできる奇妙な隙間を解消する方法(html,css)

親子margin相殺の弊害を解消するやり方です。 どちらかをinline-blockにする。 transform: translateを使う。
html,css

backgroundの隙間は、デフォルト値が原因

cssを初期化する。* {margin: 0; padding: 0;}
タイトルとURLをコピーしました