はじめに 本記事では、justify-contentの種類を記述していきます。 間違えまくり&覚えきれない箇所でしたので備忘録です。 justify-contentとは display: flex;と併せて使用します。 主軸方向(初期値は水平方向)の配置の詳細を決めます。 種類(学習したもの) ・justify-content: flex-start; 左寄せ ・justify-content: flex-end; 右寄せ ・justify-content: center; 中央寄せ ・justify-content: space-between; 両端が左右に寄り、等間隔 ・justify-content: space-around; 両端が左右に寄り、等間隔。両端の余白と要素間の余白が1:2 終わり CSSのコードを書いていて「楽しいな」と感じるときが多いです。 「space-between」と「space-around」は少し似ているとは感じますが、 実際にデザインを考える上で、 細かいところも重要になるだろうと思いました！！ どんどんCSSも書けるよう、がんばります！！

・Progate環境の話になります ・まだまだ知識が浅いので拙い話だったり、間違っている点もあると思います 最近ProgateでHTMLの学習をしています。 <h2>と<h3>タグの太字をなくそうと思ったところ、できるときとできない時があったので不思議に思いながらまとめてみました。 htmlは下記のコードです。 top.html <div class="contents-copy"> <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> <h3>Let's learn to code, learn to be creative!</h3> </div> できなかったコード stylesheet.css .contents-copy { font-weight:normal; color:#5f5d60; } できたコード stylesheet.css .contents-copy { color:#5f5d60; } .contents-copy h2 { font-weight:normal; } .contents-copy h3 { font-weight:normal; } 考察 colorはまとめて指定できるけど、font-weightはできない？ font-weightは親要素の<div>でまとめて指定はできないのでしょうか。 ちなみにcolorは<div>でも<h2>,<h3>に個別に指定してもどちらでもという感じでした。 ググったのですが、答えは得られず……どなたかご教授いただければ幸いです！

はじめに コードを読んでいたら、html の imgタグにsrcsetという見慣れない属性があったので調べた。 Retinaとは RetinaとはApple社が開発したディスプレイのこと。 通常のディスプレイと比べ高画質であり、同じ画像でもぼやけて見えてしまいやすい。 そのため、しばしば Retina用の画像を別で用意する。 srcset属性 これまでよく使っていた imgタグ <img src="hoge.png"/> 今回初めて目にした imgタグ <imt src="hoge.png" srcset="hoge.png 1x, hoge@2x.png 2x"/> hoge.png と hoge@2x.png を見比べたところ、大きさだけが異なる同じ画像だった。 結論から言うと、srcsetはHTML5.1から追加された属性で、複数の画像と解像度の組み合わせを指定し、表示ディスプレイの解像度に応じて画像を使い分ける役割があるらしい。 画像の指定は、解像度が低い順にsrcset = "画像ファイル名 解像度, ..."といったフォーマットで記述する。 Internet Explorerには対応していないため、src="hoge.png"の記述も残しておく必要があることに注意。 画像の用意 Retina用画像は通常の画像の2倍の大きさで用意し、ファイル名をhoge@2x.pngなどとすることが多い。 おわりに pictureタグも調べたい。 参考 https://creative.eccom.jp/922/ https://jobtech.jp/html_css/3852/