HTML/CSSを学ぶ 【最強の中央寄せ方法】全部display: flex;でいい説
こんにちは。今回は、僕がコーディングしていて最近思うことを書き残しておきます。タイトルの通りで、HTML要素は基本的にdisplay: blockないしはinlineが初期値になっていますがもう全部flexにしちゃった方が色々楽なんじゃない...
HTML/CSSを学ぶ
HTML/CSSを学ぶ HTML/CSSを学ぶ 余白はいつ生まれるのか
はい。今回はタイトルの通り余白が生まれるタイミングは一体いつなのかを考えていきます。これを理解すれば、marginとpaddingのどっちを使うのが正しいか、あるいは他の方法を使うべきかを判断する基準を持つことができると思います。より質の高...
HTML/CSSを学ぶ 【複数行対応】たった4行のCSSで、長すぎる文章を3点リーダーで省略する
こんにちは。例えばブログサイトを作るとき、記事一覧にタイトルや本文の抜粋が載っていると思います。それらの文章が長すぎるとレイアウトを崩す原因になってしまいますから、何らかの方法で省略をする必要があります。バックエンドアプリケーション側で文字...
HTML/CSSを学ぶ marginとpaddingの違いと正しい使い分け方を完全解説
こんにちは。marginとpddingって、どちらも余白を作るCSSプロパティですよね。要素の外側はmarginで内側はpaddingという説明もされたりしますが、そうは言っても実際のコードを書くと迷ってしまいませんか？そんなmarginと...
HTML/CSSを学ぶ 【コピペ可】どんなテキストにもCSSで蛍光ペンのようなマーカーを引く方法
はい、今回はテキストにこんな感じでマーカーを引く方法を紹介していきます。オレンジの線で区分けしていますが、画像のようにテキスト部分のみと行全体の場合の両方を紹介します。テキスト部分のみコード<p class="Text"> ダミーテキストダ...
HTML/CSSを学ぶ 【コピペ可】background-attachment: fixed;がスマホ（iOSのSafari）で効かない問題を完全に解決する【CSSのみ】
こんにちは。今回はパララックス表現を行うためのプロパティ、background-attachment: fixedがスマホ、特にiOSのSafariで動かない問題を回避するための方法を書いていきます。結論（コピペ可）最初にコードを載せておき...
HTML/CSSを学ぶ Sass、別に言うほどいらない説
こんにちは。プログラミングスクールとか、いろんな教材見ているとやたらにSassをやらせているように見受けられます。しかし、実際の現場でSassが効力を発揮している場面って実はあまり多くないのでは？と感じています。少なくとも初心者がSassを...
HTML/CSSを学ぶ position: fixed;が効かない理由を暴く
こんにちは。今回はposition: fixed;が効かない理由とその対処法をまとめていきます。なぜposition:fixed;が効かないのか | 親要素がtransformしていると効かない例えばこんなヘッダーを作ろうとしています。こう...
HTML/CSSを学ぶ margin: auto;とposition: absoluteを組み合わせて特殊な中央揃えをする
こんにちは。今回はmargin: auto;をさらに深めていこうと思います。margin: auto;での中央揃えが何故動くのか、基本的なことはこちらをご覧ください。position: abusolute;との併用による中央揃えmargin...
HTML/CSSを学ぶ 【両端揃え】たった1行のCSSで文章の見栄えを美しくする
こんにちは。今回はHTML上でどのように文章の両端揃えを行うかを解説します。指定方法指定はとても簡単で、1行追加するだけです。text-align: justify;これだけで両端揃えを実現できます。英語や数字が混ざっていても概ね問題なく両...