shun

shun

今後の制作で採用したいCSSの余白指定

そもそも余白とは余白（margin）は要素が複数になることで初めて発生する。 言い換えると… 兄弟要素に余白が発生する。 実装方法上記の考え方を踏まえて、すべての子要素のうち最初の要素を除くすべての要素を対象とするフクロウセレクタ（* + *）を採用する。 <section> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div></section>

shun

    • ChatGPTのwebサイト制作活用術まとめ

      webサイト制作で便利そうなChatGPTに活用術をまとめてみました。 ①コンポーネントを作ってもらう。②CSSをSCSSに変換。③HTMLに対応するSCSSのセレクタを作ってもらう。 まだChatGPTだけでwebサイトを制作することは難しそうですが、 部分的に作業をお願いするかたちで活用すると作業時間を削減できそうですね！

      shun

      • safari(ios)で画像が伸びてしまった時の対処法

        問題のコードHTML <div class="flex"> <img src="img.png" alt=""> <p>テキストテキストテキストテキストテキスト</p></div> CSS .flex { display: flex;}.flex > img { width: 100%;} 原因flexboxの子要素に<img>を入れてしまうと、safari(ios)で画像が伸びてしまうようです。 対処法対処法① ： HTMLを修正する <img>を<di

        shun

      今後の制作で採用したいCSSの余白指定

      shun