Git ベンダープレフィックスの記述で差分発生。原因と解決方法は? Gitで差分確認してみたらCSSベンダープレフィックスの記述で大量の差異が発生してる。SCSSファイルをまだ編集していないのに、コンパイルを行うとCSSベンダープレフィックスの記述が変わる。今回はベンダープレフィックスの記述で差分発生したときの原因とその解決方法についてまとめていきたいと思います。 2024.10.12 GitHTML/CSSWeb制作
HTML/CSS 今さら聞けない!ベンダープレフィックスとは【CSS】 ベンダープレフィックスって何だっけ? 「-webkit-transition: all 4s ease;」みたいに通常のCSS記述の頭に「-〇〇-」が付いているもののことをベンダープレフィックスって呼ぶよ -webkit-transitio... 2024.09.28 HTML/CSSWeb制作
HTML/CSS floatはもう使わないのか?【CSS】 flexboxやgridの登場で使用頻度が低くなった「float」に救われた話から、現代のfloatがどんな役割を担っているのかという話までまとめてみました。「floatはオワコン」「floatは使うべきではない」という声が少なからずある中、どんな場面で使えるのか、使ったほうがいいのかについても説明しています。 2024.08.10 HTML/CSSWeb制作
HTML/CSS 静的ページにオリジナルデザインの自動返信機能付き問い合わせフォームを実装 今まで「静的サイトに問い合わせフォームを実装することはできない」と思い込んでいたのですが、調べてみると、割と簡単に実装できる方法があるという。そこで今回、htmlにGoogleフォームを組み込んでオリジナルデザインにしつつ、GASでメール自動送信機能をつけた問い合わせフォームを実装し、その備忘録を残してみました。 2024.03.31 HTML/CSSWeb制作
HTML/CSS webp(ウェッピー)で表示速度は劇的にあがるのか? 「webpで表示速度は劇的にあがるのか?」という問いに対しては、はっきりイエス!!とは言えないものの、カラフルな画像(64色以上の画像)に関してはwebpを採用することで表示速度の大幅な改善が見込めます。 2023.12.31 HTML/CSSWeb制作
HTML/CSS 【CSS】z-index:-1;で擬似要素が上に来たりどこかに消えたりする。その原因と対処法 先日、擬似要素を奥に置きたくて「z-index:-1;」という指定を入れてみたとき、擬似要素が想定より上(手前)に来てしまったりどこかに消えてしまったりするという場面に遭いました。そこで、z-indexプロパティと擬似要素の関係について調べ、今回、備忘録としてまとめてみました。 2023.10.09 HTML/CSSWeb制作
HTML/CSS 【CSS】 firefoxでだけtableのborderの線が消える?原因と対処法について 先日、仕事でWebサイトのテーブルタグ部分の編集作業をしていると、firefoxで表の一部の線が消えてしまうという問題に出遭いました。「background-clip: padding-box;」で解決する場合と、解決しない場合があるようなので、原因と解決方法についてまとめてみました。 2023.07.09 HTML/CSSWeb制作
HTML/CSS 【CSS】positionプロパティで画面分割 今回は、スプリットレイアウトのコーディングについて、「position:fixed;」を使った方法と「position:sticky;」を使った方法の2つを中心に紹介させていただきます。 2023.07.02 HTML/CSSWeb制作
HTML/CSS 【CSS】display:flex; と display:inline; の違いとは 「display:flex;」と「display:inline;」がそれぞれどんな役割を持った記述なのかというところから、フレックスボックスやインライン要素について自分なりに復習しながらまとめてみました。 2023.05.14 HTML/CSSWeb制作