CSS - 気まぐれWEBLOG

【バグ対策】IEのみ・Firefoxのみにcssを反映させたい場合の対処法

cssのバグによりIEやFirefoxでのみcssを反映させたいブラウザチェックでよくあるバグがIEやFirefoxのデザイン崩れ cssの当たり方がブラウザによって違う時があって、場合によってはIEやFirefoxにのみcssを当てたい場合があり […]

IEやFirefoxでtableの横幅が効かないバグ thやtdにwidthの指定をしているけど指定通りにならないバグがあります。これはブラウザのtable横幅自動調整機能が邪魔をしているようです。 tableにcssをコピペで解消します！下記c […]

縦横比を維持するのはCSSだけでは難しい実際に横幅100％だったりとかでの対応が多いと思うのですが、レスポンシブするにあたって、画像の縦横比を維持したまま横幅を％指定したい、という事がありますよね。その時の実装方法を簡単に説明します。 1,まず […]

高さがわからない要素に、高さがわからない要素を天地中央にする最近はメインビジュアルを画面いっぱいにして、天地中央にロゴや要素を配置するデザインが流行っています。そんなときにどのようにして中央に要素を配置していますか？画面の高さが変われば、中央に […]

例えば100%のボックス要素の中に、50pxの要素と 100% – 50pxの要素を並べる場合このような場合、cssの数値で引き算が出来るとベスト。 calcという便利なファンクションがありますので、calcで計算式をすることが可能。 […]

最近良く見かける'＞'での見出しやリストの項目があります。これをテキストで打ってしまうと＞ここにリンクのテキストといったように、不格好になってしまいます。このようになっているとかっこいいですね。 html [crayon-63e0a3d60 […]

box-sizingを使用することで、要素のサイズ（width）を明確にすることができます。 box-sizingを使用しない場合たとえばbox-sizingを使用しない場合で、40%と60%のbox要素にpadding 20pxをかけるとこのよ […]

googleフォントにアクセス https://fonts.google.com/ google Fontsにアクセスしてください。使ってみたいフォントをクリック！今回はNoto Sansを使ってみます。使いたいWeight（太さ）を選択！私 […]

コピペで簡単実装【TOPに戻るボタン】の紹介。何も考えない。コピペで簡単実装しましょう（笑） jQueryの呼び出しまずはjQueryをhtmlファイルに呼び出します。 htmlファイルにコピペ [crayon-63e0a3d60f9b12002 […]

レスポンシブで固定ヘッダーの高さが可変。アンカースクロールがうまく設定できない。ヘッダーにposition:fixed;を適用していて固定していると、ページ内スクロールでスルスルーっと移動するときにズレが生じてしまいます。そんな時はheaderの […]