スポンサーリンク

「css」の記事一覧

【CSS】半角英数がはみ出ないようにする方法(word-break、overflow-wrap、word-wrap、line-break)

サイトを作っているとなぜかデザインが崩れている場合があります… 調べてみると、URLなど半角英数字が長すぎて要素からはみ出ていることが原因だったりします。この問題を解決するために「cssで改行させる」方法があるんですが、 […]

CSSだけで作る三角形(シンプルな作り方)

「CSSだけで三角形を作る方法?とことん検証!」でcssのborderを使って色々なパターンの形を確認してみました。確認をしている中で、三角形のシンプルな作り方がある程度想像できたので、それをまとめておきたいと思います。 […]

CSSだけで三角形を作る方法?とことん検証!

cssだけで三角形を作ることが可能です。以前、直角二等辺三角形や正三角形を作る方法を書いています。 三角形はオブジェクトの幅、高さともに 0のときのborderの特性を利用して作ります。それがいったいどのような仕組みだっ […]

CSSだけで正三角形を作る方法

cssだけで作れる正三角形 1~8はいずれも、三角形の大きさは「border」の太さ(※border-width)を変更すればいいが、1:$\sqrt{3}$の比率で設定しなければなりません。色は「border」の色(※ […]

CSSだけで直角二等辺三角形を作る方法

cssだけで三角形を作ることがあるんですが、あまり理解しないまま適当に使っていました。ですので、そろそろ理解して使えるようにしておきたいと思います。 まずは色々な向きの直角二等辺三角形の作り方が分かったので、そちらをメモ […]

CSSで色々なストライプを作る方法!

僕が依頼されるサイトには背景にストライプが入ったデザインが割と多いです。今までは小さい画像を作成して背景に敷き詰める方法で対応していました。 このような感じですね。 background: url("img/bg-str […]