HTML/CSS

HTML/CSS

余白はいつ生まれるのか

はい。今回はタイトルの通り余白が生まれるタイミングは一体いつなのかを考えていきます。 これを理解すれば、marginとpaddingのどっちを使うのが正しいか、あるいは他の方法を使うべきかを判断する基準を持つことができると思います。...
HTML/CSS

【複数行対応】CSSのみで、長すぎる文章を3点リーダーで省略する

こんにちは。 例えばブログサイトを作るとき、記事一覧にタイトルや本文の抜粋が載っていると思います。それらの文章が長すぎるとレイアウトを崩す原因になってしまいますから、何らかの方法で省略をする必要があります。 バックエンドアプリ...
HTML/CSS

初心者必見!marginとpaddingの違いと正しい使い分け方を完全解説

こんにちは。marginとpddingって、どちらも余白を作るCSSプロパティですよね。 要素の外側はmarginで内側はpaddingという説明もされたりしますが、そうは言っても実際のコードを書くと迷ってしまいませんか? そ...
HTML/CSS

【コピペ可】どんなテキストにもCSSで蛍光ペンのようなマーカーを引く方法

はい、今回はテキストにこんな感じでマーカーを引く方法を紹介していきます。 オレンジの線で区分けしていますが、画像のようにテキスト部分のみと行全体の場合の両方を紹介します。 テキスト部分のみ コード ...
HTML/CSS

【コピペ可】background-attachment: fixed;がiOSのSafariで効かない問題を完全に解決する【CSSのみ】

こんにちは。今回はパララックス表現を行うためのプロパティ、background-attachment: fixedがiOSのSafariで動かない問題を回避するための方法を書いていきます。 結論(コピペ可) 最初にコードを載せ...
HTML/CSS

Sass、別に言うほどいらない説

こんにちは。 プログラミングスクールとか、いろんな教材見ているとやたらにSassをやらせているように見受けられます。 しかし、実際の現場でSassが効力を発揮している場面って実はあまり多くないのでは?と感じています。 少...
HTML/CSS

position: fixed;が効かない理由を暴く

こんにちは。今回はposition: fixed;が効かない理由とその対処法をまとめていきます。 なぜposition:fixed;が効かないのか | 親要素がtransformしていると効かない 例えばこんなヘッダーを作ろう...
HTML/CSS

margin: auto;とposition: absoluteを組み合わせて特殊な中央揃えをする

こんにちは。今回はmargin: auto;をさらに深めていこうと思います。 margin: auto;での中央揃えが何故動くのか、基本的なことはこちらをご覧ください。 position: abusolute;との...
HTML/CSS

CSSによる文章の両端揃え

こんにちは。今回はHTML上でどのように文章の両端揃えを行うかを解説します。 指定方法 指定はとても簡単で、1行追加するだけです。 text-align: justify; これだけで両端揃えを実現できます。 ...
HTML/CSS

【徹底解説】google fontsの読み込みを高速化する

こんにちは。google fontsってとても便利ですよね。リンクタグを数行コピペするだけでフォントを読み込めますから、普通にフォントファイルを用意して配置するより簡単です。 でも、実は場合によって読み込み速度が遅いことがあり、ユー...
タイトルとURLをコピーしました