HTML/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ってとても便利ですよね。リンクタグを数行コピペするだけでフォントを読み込めますから、普通にフォントファイルを用意して配置するより簡単です。 でも、実は場合によって読み込み速度が遅いことがあり、ユー...
HTML/CSS

google fontsの使い方【コピペするだけ】

こんにちは。コーディング案件においては、デザイナーさんからフォントの指定をされることがよくあります。場所によってフォントが異なったり、フォントファイルを準備する必要があったり、意外と大変です。 そこで今回は、google fonts...
HTML/CSS

line-heightの邪魔な上下の余白をこの世から消す

こんにちは。html上のテキスト、文字の行間を調整するcssプロパティ、line-heightってありますよね。でも余計な上下の余白に困ったことはありませんか? 今回は、line-heightの邪魔な上下の余白をこの世から消す方法を...
HTML/CSS

Flexboxの初心者向けチュートリアル作ってみました。

こんにちは、小林です。今回は初心者の方がつまづきやすいFlexboxのチュートリアルを作ってみたので、公開します。 チュートリアル ページはこちらです。 こんな感じで横方向の並べ方や縦方向の並べ方、折り返しについて解説し...
HTML/CSS

margin: auto;の正体を暴く

こんにちは。htmlの要素を中央揃えするためにmargin: autoを指定したけど効かない!ってことよくありますよね。 今回は、margin: auto; がそもそも何なのか、その正体を暴いていきます。 追記:応用編を書きま...
スポンサーリンク
タイトルとURLをコピーしました