HTML/CSSを学ぶ Sass、別に言うほどいらない説
こんにちは。 プログラミングスクールとか、いろんな教材見ているとやたらにSassをやらせているように見受けられます。 しかし、実際の現場でSassが効力を発揮している場面って実はあまり多くないのでは？と感じています。 少なくとも初心者がSa...
HTML/CSSを学ぶ
HTML/CSSを学ぶ 
HTML/CSSを学ぶ position: fixed;が効かない理由を暴く
こんにちは。今回はposition: fixed;が効かない理由とその対処法をまとめていきます。 なぜposition:fixed;が効かないのか | 親要素がtransformしていると効かない 例えばこんなヘッダーを作ろうとしています。...
HTML/CSSを学ぶ margin: auto;とposition: absoluteを組み合わせて特殊な中央揃えをする
こんにちは。今回はmargin: auto;をさらに深めていこうと思います。 margin: auto;での中央揃えが何故動くのか、基本的なことはこちらをご覧ください。 position: abusolute;との併用による中央揃え mar...
HTML/CSSを学ぶ 【両端揃え】たった1行のCSSで文章の見栄えを美しくする
こんにちは。今回はHTML上でどのように文章の両端揃えを行うかを解説します。 指定方法 指定はとても簡単で、1行追加するだけです。 text-align: justify; これだけで両端揃えを実現できます。 英語や数字が混ざっていても概ね...
HTML/CSSを学ぶ 【徹底解説】google fontsの読み込みを高速化する
こんにちは。google fontsってとても便利ですよね。リンクタグを数行コピペするだけでフォントを読み込めますから、普通にフォントファイルを用意して配置するより簡単です。 でも、実は場合によって読み込み速度が遅いことがあり、ユーザーの離...
HTML/CSSを学ぶ Google Fontsの使い方【コピペするだけ】
こんにちは。コーディング案件においては、デザイナーさんからフォントの指定をされることがよくあります。場所によってフォントが異なったり、フォントファイルを準備する必要があったり、意外と大変です。 そこで今回は、Google Fontsを使って...
HTML/CSSを学ぶ line-heightの邪魔な上下の余白をこの世から消す
こんにちは。html上のテキスト、文字の行間を調整するcssプロパティ、line-heightってありますよね。でも余計な上下の余白に困ったことはありませんか？ 今回は、line-heightの邪魔な上下の余白をこの世から消す方法を解説しま...
HTML/CSSを学ぶ margin: auto;の正体を暴く
こんにちは。htmlの要素を中央揃えするためにmargin: autoを指定したけど効かない！ってことよくありますよね。 今回は、margin: auto; がそもそも何なのか、その正体を暴いていきます。 追記：応用編を書きました。post...
HTML/CSSを学ぶ 【徹底解説】CSSでチェックボックス/ラジオボタンをカスタマイズする方法を超絶優しく解説する
はい、今回はHTML/CSSの中でも比較的高難易度な、チェックボックスやラジオボタンのカスタマイズについてです。高難易度でありながら実務においては頻出です。 デザイン上デフォルトのチェックボックスやラジオボタンを使う場合はほぼありえませんか...
HTML/CSSを学ぶ HTMLにおける、上手に比率維持した画像を作る方法（imgタグ/background-image）
こんにちは。今回はHTMLにおいて意外と厄介な「画像の扱い方」について説明していきます。 比率維持した状態でimgタグを使う まずはimgタグです。imgタグは基本的には画像の元のサイズ/比率のまま出力されます。これを調整する場合、親要素の...