Blogブログ

cssで困ったこと

こんにちは。
WebチームのSです。

最近は蚤の市（フリーマーケット）にハマっています。
屋外で行われることが多いのですが、天気がいいと気持ちよく楽しむことができます。
逆に風が強いと作品や商品が飛ばされたり葉や土がついてしまったり、雨になると中止になってしまうこともあり、暑くても体力を奪われるので、季節の合間に行くのがおすすめです。
幅広い出品があるのでそこでしか出会えない掘り出し物や、キッチンカーも充実しており食事も楽しむことができます。
散歩の気分の日はぜひ行ってみてください！

↓下のサムネイル画像の帯の色は蚤の市で訪れた町で見かけた看板の色です

cssで調べても出てこなくて困ったことと原因

cssでつまずいた時、検索してもなかなか同じ事例や先人の知恵を見つけられず、悪戦苦闘した末に見つけた原因や対処法は取るに足らないことだった...なんてことはありませんか？
今回は私がつまづいて検索したものの思うような参考記事が出なかった事例と原因をご紹介します。

grid gapが意図しないところに入ってしまう、崩れる

• 子要素が12個の要素に下記を指定
• 子要素はある程度のコンテンツ量を含む
• 頭4つの子要素の幅が0pxになるが存在はしている→その分のgapは入る。

    grid-auto-flow: column;
    grid-template-columns: repeat(4, 1fr);

ホバー範囲がおかしい？「なぜか押せない」とき

→原因：他の要素が被っているから
解決方法：押せない該当の要素を右クリックで検証、その時上に被っている要素が選択されている他の要素

fieldset,legendのstyle付

フォーム要素を作成し、アクセシビリティに配慮した際に必要になるfieldset,legendですが、特殊なレイアウトが初期設定されているので扱いには注意してください。
fieldset,legendに指定したいstyleがある際は、直接ではなくラップして親要素にstyle付けしましょう。

各htmlタグの概要
・fieldsetはHTMLの要素で、ウェブフォーム内のラベル(label)などのようにいくつかのコントロールをグループ化するために使用します。
・fieldsetには、スタイル付けの特殊な考慮事項がいくつかあります。
・legendはHTMLの要素で、その親要素であるfieldsetの内容のキャプションを表します。

文中に意図せぬスペースが入ってしまっていた

表示：
 サンプル テキストですサンプル テキストです 
DOM：
" サンプル ""テキストです""サンプル"" テキストです "

ご拝読いただきありがとうございました！