shun

shun

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

そもそも余白とは余白（margin）は要素が複数になることで初めて発生する。 言い換えると… 兄弟要素に余白が発生する。 実装方法上記の考え方を踏まえて、すべての子要…

shun
shun
2か月前
1

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

webサイト制作で便利そうなChatGPTに活用術をまとめてみました。 ①コンポーネントを作ってもらう。②CSSをSCSSに変換。③HTMLに対応するSCSSのセレクタを作ってもらう。 …

shun
shun
1年前
6

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

問題のコードHTML <div class="flex"> <img src="img.png" alt=""> <p>テキストテキストテキストテキストテキスト</p></div> CSS .flex { display: flex;}.flex > im…

shun
shun
1年前
1
shun

shun

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

そもそも余白とは余白（margin）は要素が複数になることで初めて発生する。

言い換えると…
兄弟要素に余白が発生する。

実装方法上記の考え方を踏まえて、すべての子要素のうち最初の要素を除くすべての要素を対象とするフクロウセレクタ（* + *）を採用する。

<section> <div class="box">box1</div> <div class="box">box2</div>

もっとみる
shun

shun

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

webサイト制作で便利そうなChatGPTに活用術をまとめてみました。

①コンポーネントを作ってもらう。②CSSをSCSSに変換。③HTMLに対応するSCSSのセレクタを作ってもらう。

まだChatGPTだけでwebサイトを制作することは難しそうですが、
部分的に作業をお願いするかたちで活用すると作業時間を削減できそうですね！

shun

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)で画像が伸びて

もっとみる