margineの相殺

margineでコンテンツ上部に余白を作ったはずなのにぴったりくっついてる・・・

何故・・・？となったので勉強した記憶を掘り起こし「相殺」について思い出しました。

CSSの記述

.news {

    margin: 90px 0 90px;

    background-image: url('../images/news-bg.jpg');

}

実際の画面表示（上：理想　下：現実、「お知らせ」の上に空の背景の余白がない）

margineの相殺が起きるとき

• 隣接した要素の上下のmargine
• 入れ子になった要素の上下のmargine

その他はこちらの記事が分かりやすいです。

webliker.info

今回の私の場合は「入れ子」でmargineの相殺が起きていたので回避するには以下の2つの方法があるようです。

• 親要素にpadding-topを指定
• 子要素にmargine-topを指定

子要素にmargine-topを指定すると親要素を突き出る場合もあるので今回は親要素にpadding-topを指定し、解決しました。

なんとなく相殺について記憶があったからよかったですが、まったく記憶がなかったら解決までにどのくらい時間がかかっていたんだろう・・・

NEWSリスト（更新情報）の作り方

企業のホームページでよく見るニュースリストの作り方を調べたところ、ざっと以下の3つの方法を見つけました。

• <ul><li>タグを使う
• <dl><dt><dd>タグを使う
• <table>タグを使う

正直どれが一番良いのか分からないのですが、数の多かった<ul><li>タグを使う方法を備忘録に残しておこうと思います。

作りたいのは以下の3点を載せるニュースリストです。

• 日付
• NEWSカテゴリ
• 更新内容

HTML

  <ul>

    <li>

       <a href="#"><time class="date" datetime="2021-01-01">2021.1.1</time>

       <span class="category-report">更新情報</span>

       <span class="title">ブログを更新しました</span>

       </a>

     </li>

  </ul>

このHTMLはHTML5/CSS3モダンコーディングの本を参考にしました。

カテゴリごとにクラスを付与することで、「更新情報」はピンクの背景色、「イベント情報」は水色の背景色などデザインを付けてユーザーに分かりやすくする予定です。

<datetime>タグについて

• 機械に更新日時等を認識させるために使う
• 特にニュースサイトなど、更新性が重要になるサイトには必須
• 検索結果にも表示されるため、ユーザーが情報鮮度を確認するのにも役立つ

「○時間前」など検索結果に表示されているニュースをよく見ますよね。

あれだ・・・！

ふと思ったんですが、こういう企業ブログで記事更新情報がニュースリストに出ているサイトをよく見ますが、ブログを更新するたびに最新の紹介情報を追記して、古いもののHTMLを消す、という作業をしているのかな。

結構めんどくさい・・・

ブログのCMSを使えばまた違うんだろうけど・・・

分からないことだらけです！

CSSで画像を丸く切り抜く方法

画像を表示させる際にサイズや表示する形の変更をCSSで行いたい！

今回は四角い画像を丸切り抜いて表示させたい！

Photoshop等で画像そのものをリサイズや切り抜くこともできますが、面倒ですよね・・・やっぱり四角のままでよかった！なんてこともありそうですし。

そんな時に役立つCSSを調べました。

• border-radius
• object-fit

です！

①まずはもともとの画像を配置しただけ

②border-radius: 50% で画像を丸く

③今回はたまたま正方形の写真でしたが、そうでない場合縦横比がこのままではおかしくなってしまうので、object-fit: cover を追記

見た目は変わりませんが、横長の画像などの場合はこれできれいに表示されるはずです！

HTML

        <div class="interview">

            <h3>インタビュー</h3>

            <p>サンプルテキスト<br>

                サンプルテキスト</p>

            <a class="button-black" href="#">詳しく見る</a>

            <img class="three-contents" src="images/sample.jpg">

CSS

.three-contents {

    border-radius: 50%;

    object-fit: cover;

}

ちなみに画像だけでなくてボタンにもよく使うようです。（こんなボタン）

このCSS記述は以下のようになりました。

.button-black {

    padding: 5px 10px;

    font-size: 1.3rem;

    color: #fff;

    background-color: #000;

    border-radius: 50px;

}

今回は

border-radius: 50px

です。

ちなみに最初さっきの画像のCSSを引きずっていて％で記述していました。

• border-radius: 10%

• border-radius: 50%

%とpx（実数）での指定の違いは「％の場合は縦横の長さに対して指定した％分丸くなるようです。

うまく説明できないので%とpx（実数）での違いについてはこちらが分かりやすかったです！

coliss.com

その他、今回参考にさせていただいたサイトはこちらです。

blog.ver001.com

note.com

それにしてもパピーのころのラルン可愛いな・・・

flex: コンテンツの中で要素の幅を割合で決める

練習でとあるサイトの模写に挑戦したところ、ある section の中に画像が3枚横並びになっていて、ウインドウのサイズとともに伸縮するものがありました。

ディベロッパーツールを見ると

flex: 2;

という見慣れないCSS記述が。

調べたところ flex-grow（flex ）というCSSで flex コンテナを1：2のようにサイズを切り分けて flex コンテンツのサイズを表示させることができるようです。

.pink {flex: 2;}

.green {flex: 1;}

こんな記述をCSSに加えるだけで親要素の中で1：2の割合で表示できます。

 

つまづいたポイントとやったこと

• img 要素のクラスを付与してCSSを記述してもダメだった（インライン要素だからかな？）
• div に対して width を指定しても反映されなかったため、div の中の img にクラスをつけて width 指定したところ反映された（flex で比率を指定しているから div に対しては効かないのか？）
• img 要素の上に div を作り、そのクラスに対してCSSを記述するときちんと表示された

 

実際のHTMLとCSSはこちらです。

今回は3枚の画像を一つの flex コンテナの中で横並びにしました。

 

HTML

        <div class="topimgL">

            <img src="images/topimgL.png">

        </div>

        <div class="topimgC">

            <img src="images/topimgC.png">

        </div>

        <div class="topimg-zousan">

            <img src="images/topimg-zousan.png">

        </div>

CSS

.topimgL {

flex: 1;

}

.topimgC {

flex: 0.8;

}

.topimg-zousan {

flex: 2;

}

parashuto.com

このCSS記述全く知らなかったのですが私の勉強不足ですね。

コンテンツの横並びやら謎の余白やらは初心者（私含め）の方がつまづくポイントだと思うので早く理解したいのですが何回やっても分からないことが多すぎます・・・

div と section の使い分け

HTMLをマークアップしていて div と section ってどう使い分けるの？

全部 div じゃだめなの？

という疑問が湧いてきたためググりました。

簡単にまとめると

div

• 他に適切なタグがない時の最終手段
• 特に意味を持たない
• CSSのマークアップでグループを作りたいときにだけ使う

section

• 意味がある、テーマがある
• section タグのもつテーマ（意味は）そのすぐあとに明示されるべき（secton タグのすぐあとに h タグでなんの section なのか明示しようね）

ということだと理解しました。

coliss.com

Progateで勉強していた時に「div 最強やん！なんでもdiv に class つければOKやん！」と思っていたのですが基本的には section を使うべきなんですね。

ほかにも article なんてものもあるようです。（知らなかった・・・）

section より独立していて、用途が限られているよう。

でも今まで勉強してて出てきたことない（忘れてるだけかも）からとりあえず今回はスルーします！

マウスをホバーしたときに画像をふわっと白くする方法

最近よく見る a 要素にマウスをホバーするとふわっと白くなるデザイン。

あれをやりたい！

a: hover のCSSで以下のような記述をするのかな？

• 画像の上に同じ大きさの半透明の白いボックスを出現させる
• 単に画像を半透明にする
• 光らせる（明度を上げる）

ググったところopacityで透明度を上げる方法が一般的なのかな？

ただ背景色が白以外の場合はその色が透けてしまうので、白く光っているように見せるには背景色を白に設定する必要があるようです。

しかし何度やってもうまく背景を白にすることができず、やっと成功した方法がこちら

（リストタグを使い、3つのカテゴリを並列させているので<li>の記述がありますが、ふわっと白くする方法とは関係ないです。）

つまづいたポイント

1. opacity だけだと背景色の黄色が透けて見えるだけで光る＜透明になるという印象になってしまった
2. hover したときに背景色を白にするCSS記述をするもうまく作動せず
3. a要素や img要素に背景色をCSSで記述するも作動せず
4. 一つ div を作成し、その背景色をCSSで白にすると思い通りの作動を確認

何故 a、img 要素に白背景を指定したのではうまくいかなかったんだろう・・・

インライン要素なのが原因なのか？

まだまだ初学者なので分からないことだらけです・・・

　→　

（分かりにくいですがホバーでふわっと白くなっています）

HTML

            <li>

                <a href ="#">

                <div class="item-image">

                <img src="./image/food.jpg">

                </div>

                <h3>FOOD</h3>

                </a>

                <p>……</p>

            </li>

CSS

.item-image {

  background-color: #fff;

}

.item li img:hover {

  opacity: 0.7;

  filter: alpha(opacity=70);

  -ms-filter: "alpha(opacity=70)";

}

 

li へのリンク設定と id

id タグを使って1ページ内の移動をさせたい時のHTMLの記述方法

                    <li><a href ="#home">HOME</a></li>

                    <li><a href ="#item">ITEM</a></li>

                    <li><a href ="#conact">CONTACT</a></li>

※この時「＃」を付け忘れるときちんと飛びません。

各飛び先のhタグに id を付与

        <h2 id="item" class="item-title">ITEM</h2>

こんな簡単な基本的なことなのにすぐ分からなくなってしまう・・・

まだまだ前途多難です！