どうも7noteです。CSSでひし形を作ります。 CSSだけで様々な図形を作れるとなにかと便利です。 ひし形の作り方を紹介していきます。 トランプのダイヤにも使えますね。 ソース <span class="diamond"></span> style.css .diamond { width: 30px; height: 30px; background: #f00; /* 背景色の場合、指定 */ border: 1px solid #000; /* 線描画の場合、指定 */ border-radius: 5px; /* 角丸にしたい場合、指定 */ display: inline-block; transform: rotate(45deg) skew( calc((90deg - 60deg) / 2), /* ダイヤ型の角度を変更する */ calc((90deg - 60deg) / 2) /* ダイヤ型の角度を変更する */ ); } まとめ 四角形を作成し、transformで回転&傾斜をつけてダイヤ型になります。 結構簡単に作れるので疑似要素として表示させて組み合わせたり、2つ使ってキラキラさせた表現を作ったりもできそうですね。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

特定要素の最後だけに設定がしたい。 div や section が並んでいる中で、並んでいる特定のclassの最後にだけ設定を追加する方法です。 例： <main> <section class="A">あああ</section> <section class="B">いいい</section> <section class="B">いいい</section> <section class="B">いいい</section> <section class="C">ううう</section> </main> のように、setionが並んでいて、各sectionには margin-bottom:60px; を付けています。 しかし、section:B が連続する場合には、最後の B だけに margin を付けたくなります。（なりました） そこで... :last-child .B:last-child { margin-bottom:60px; } はい。これでは無理ですね。さすがに私でも知っています。 では次は... :last-of-type main section.B:last-of-type { margin-bottom:60px; } 実はちょっと期待しましたが、これは意味が違うので無理だということが分かりました。 （誤）並んだ section の中の 最後の B と思ってしまいましたが... （正）並んだ section の最後のclassが B だった場合 だったのですね。。。 これはこれで、別の場所で使えそうなので覚えておきます。 隣接設定 次に登場したのが隣接設定でした。 早速試してみると、割とそれっぽくなりました。 main .B + .B { margin-bottom:60px; } 割といい感じ？と思いましたが、2番目と3番目に padding が付いてしまいます。 そりゃそうですよね。。。 いよいよ手詰まりかと思いましたが、少し視点を変えてみました。 　 隣接設定を次の要素に つまり、 .B に設定を付けるのが無理ならば、次に来る要素に設定を付けて代用すればいい！ です。 main .B + not(.B) { margin-top:60px; } こうすると、 .B には margin-bottom は付かず、 .B の次に来る要素が .B ではなかった場合、その要素に margin-top が付きます。 （この場合は C に margin-top が付く） これなら次にくる要素が B 以外なら margin-top が付いてくれるので、見た目は同じになります。 以上になります。 まぁ、そこそこ力技な気もしますが、体裁は同じになりますので良しとしました。 ■補足 CMSなどで、下の要素がある場合とない場合が発生するぞ！ という場合には、先ほど覚えておいた last-of-type を併用します。 main .B + not(.B) { margin-top:60px; } main .B:last-of-type { margin-bottom: 60px; } こうすることで、最後の要素が B になった場合でも対応できます。

まず何よりも先にGoogle Chromeのデベロッパーツールで調べてみる サイト全体の隙間を消すために試したこと body,html { margin: 0px; padding: 0px; } 画像の間にできた隙間を消すために試したこと vertical-align: bottom; line-height: 1.0em; その他いろんなパターンの時に試したこと line-height: 0; margin: 0; padding: 0; font-size: 0; display: block; これらを親要素に指定するのか子要素に指定するのかによって結果も変わってくるので、そこらへんもいろいろ試してみるのが効果的かなと思います。

概要 開発でCSSを書いていて、重複したプロパティがあっても自分では気づけないことが多くあります。 意識するだけでは見つけられない余分なコードも、ツールを使って簡単に見つけらればいいなと思って探したところ便利なツールやサービスがあったので紹介します。 Yellow Lab Tools 上記のサイト上でサービスのURLを入力するとWebパフォーマンスを調べてくれます。 その中に「Bad CSS」の「Duplicated properties」という項目があり、重複したプロパティの一覧を表示します。 そのほかにセレクターの重複やCSSの複雑度なども表示してくれるのでCSS全体の見直しにも使用できると思います。 ただ、入力したURLのページで使用されているコンパイル済みのCSSだけを監査するので、SCSSなどで開発している場合は元ファイルのどこに記述されているか見つけにくいです。 Chrome DevTools CSS Overflow ChromeのDevToolsで使用できる実験的な機能の一つです。 有効にするには設定を開いて、ExperimentsタブにあるCSS overflowにチェックを入れます。 有効にすると「CSS Overflow」のタブが追加されるので、タブを開いて「Capture overflow」をクリックします。 上の画像の通り、そのページでCSSで使用されているカラーの種類やフォント、メディアクエリなどを見ることができます。 Unused declarationsという項目で、設定しているけどCSSの仕様上、無効なプロパティを表示してくれます。 ただこのツールでは完全に機能しないプロパティだけを抽出するようです。 例えば、position: staticが効いているときにtop、leftを設定したり、display: blockの要素にvertical-alignを設定することはCSSの仕様上まったく適用されないので抽出してくれます。 ですが、同じプロパティ名が重複しているといったことは判断して抽出してくれないみたいなので、先ほど述べた「Yellow Lab Tools」とうまく使い分ける必要があると思います。 参考 https://jser.info/2021/03/23/node.js-15.12.0fs.promises-strict-csp-css-auditing-tools/ https://www.smashingmagazine.com/2021/03/css-auditing-tools/ おわり 紹介したツールは個人で簡単に利用することができるので、自分のコードに不安がある方はぜひ試してみてください。

Gridを元にレイアウトしてみる 完成版はこちらです　↓↓ 目標：Gridレイアウトの基礎を理解するため テキストエディターはVSCode. ↓下記のGridレイアウトチートシートを参考 Gridレイアウトのチートシート ～codeを書き始める前の準備～ ・構成を考える！　何をどんな風に、どうやって作るのか？ 　最初にある程度決めておくと後が楽になります。 　例　どの位Gridを書くのかを調べる 　　　<div>は何個必要なのか？ 　　　class属性名はどうしようか？ ・紙とペンで実際に枠を書いてみる（添付画像） ここまで出来たらcodeを書いていきます♪ ※head部分は省略 <div class="all"> <header class="header">ヘッダー</header> <div class="sub">サブ</div> <main class="main">メイン</main> <section class="section">セクション</section> <div class="sub2">サブ２</div> <footer class="footer">フッター</footer> </div> * { padding: 0; margin: 0; } .all { width: 1000px; height: 500px; background-color: cadetblue; margin: 100px auto 100px; } .header { background-color: pink; } .sub { background-color: aqua; } .main { background-color: rgb(194, 157, 228); } .section { background-color: coral; } .sub2 { background-color: yellowgreen; } .footer { background-color: cornflowerblue; } この状態で一旦ブラウザで確認　↓↓↓ 『親要素の.all』に、Gridを付けていきます .all { width: 1000px; height: 500px; background-color: cadetblue; margin: 100px auto 100px; display: grid; ※追加 grid-template-rows: 20% 40% 20% 20%;　※追加　 grid-template-columns: 40% 40% 20%;　※追加 } .all { width: 1000px; height: 500px; background-color: cadetblue; margin: 100px auto 100px; display: grid; grid-template-rows: 15% 40% 20% 20%; grid-template-columns: 30% 40% 20%; grid-gap: 5%;　※追加 } .all { width: 1000px; height: 500px; background-color: cadetblue; margin: 100px auto 100px; display: grid; grid-template-rows: 15% 40% 20% 20%; grid-template-columns: 30% 40% 20%; grid-template-areas: ※追加 'header header header '　※追加 'sub main main'　※追加 'section section sub2'　※追加 'footer footer footer';　※追加 grid-gap: 5%; } .header { background-color: pink; grid-area: header;　※追加 } .sub { background-color: aqua; grid-area: sub;　※追加 } .main { background-color: rgb(194, 157, 228); grid-area: main;　※追加 } .section { background-color: coral; grid-area: section;　※追加 } .sub2 { background-color: yellowgreen; grid-area: sub2;　※追加 } .footer { background-color: cornflowerblue;　 grid-area: footer;　※追加 } Gridレイアウトの完成です！！ まとめ Flexboxと似ているGridレイアウト　を使用してHPの枠を作ってみました！！ 登場する場面は少ないけれど引き続き理解していきたいと思います 今回は以上です！ ありがとうございます

1.ふわっとさせたいHTMLの要素にクラスをつける index.html <div class="他クラスとも共存可 effect-fade"> //処理 <div> 2.CSSにふわっとさせる処理を書く style.css .effect-fade { opacity: 0; transform: translate(0, 100px); /* ふわっとさせる高さ */ transition: all 1500ms; /* ふわっと仕切るまでにかかる時間 */ } .effect-scroll { opacity: 1; transform: translate(0, 0); } 3.Jqueryでふわっと詳細を書く script.js $(function () { $(window).scroll(function () { $(".effect-fade").each(function () { var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight) { $(this).addClass("effect-scroll"); } }); }); jQuery(window).scroll(); });