からすまる日誌 css 授業noteからcss部分を抜粋 2021-01-30T20:40:20+09:00 karasumaru 忍者ブログ karasumarucss.fukuwarai.net://entry/48 2021-03-07T00:48:00+09:00 2021-03-07T00:48:00+09:00 基本(16) セレクタの復習3 総復習 タグセレクタ

body{
 font-size:1.5rem;
}
p{

color:#f00;
}
idセレクタ

#foo{
 color:#f00;
}

classセレクタ

.red{
 color:#f00;
}
子孫セレクタ
ul li a{　
}
body a{
}
セレクタの点数制
body ul a{/*3点*/
 color:#00f;/*実際は青*/
}
ul a{/*2点*/
 color:#f00;/*赤があとでも適用されない*/
}
複数セレクタ
header,main,fotter{
 width:80%;
}
main{/*これだとこっちが優先*/
 width:60%;
}
 
body header,main,fotter{/*カンマで区切ったところで独立して数える*/
 width:80%;
}
main{/*これだとこっちが優先*/
 width:60%
}
隣接セレクタ
li+li{/*liの直後にあるliの意*/
 color:#0f0;
}
<ul>
 <li>aaa</li>/*ならない*/
 <li>bbb</li>/*緑*/
 <li>ccc</li>/*緑*/
</ul>
<header>
 <nav></nav>
 <p></p>/*ここだけ指定したい*/
 <p></p>
</header>
 
<main>
 <p></p>
</main>
header nav+p{/*3点*/
}
疑似クラス、疑似要素
a{
 color:#333;
}
 
a:hover{
 color:#300;/*暗めの赤*/
}
:nth-child()
<ul>
 <li>a</li>/*ならない*/
 <li>b</li>/*緑*/
 <li>c</li>/*緑*/
</ul>
横に並んでると仮定して間にハイフンを入れたい
ul li{
 border-left:1px #000 solid;
}
ul li:first-child{
 border-left:none;
}
または
ul li{
 border-right:1px #000 solid;
}
ul li:last-child{
 border-right:none;
}
兄弟要素の中で4つおき
ul li:nth-child(4n) {
 color: lime;
}
疑似要素
<ul>
 <li>aaa</li>
 <li>bbb</li>
 <li>ccc</li>
</ul>
li::after{/*liのうしろに>を入れる*/

 content:">";/*何を表示させたいかの部分*/
 display:inline-block;
 width:10px;
 background-image:url("icon.png");
 background-repeat:no-repeat;
}

li:last-child::after{
 content:none;/*noneするとlastにつかない*/
}
rootにかける

:root{
 font-size:10px;
}

body{
 font-size:1.6rem;
}
]]> karasumaru karasumarucss.fukuwarai.net://entry/47 2021-03-07T00:39:25+09:00 2021-03-07T00:39:25+09:00 基本(15) セレクタの復習2 パンくずリストの間に-を入れたいとする
home - main - thispage
 
:nth-child()
 
<ul>
　<li>a</li>/*ならない*/
　<li>b</li>/*緑*/
　<li>c</li>/*緑*/
</ul>

横に並んでると仮定して間にハイフンを入れたい
 
ul li{
　border-left:1px #000 solid;
}

これだと最初の要素の前にも入ってしまう
↓
ul li:first-child{
　border-left:none;
}

ファーストチャイルドだけ消すようにする
　
または
ul li{
　border-right:1px #000 solid;
}
ul li:last-child{
　border-right:none;
}
　
たとえば、画像を5*5で画面に並べたい

一枚の画像の右側にpadding
それだと5枚目の右にもはいって全体の配置が中心からずれる

→5つめのpadding-rightをけす
まあ左右に薄く半分ぶんの余白と下側に余白という手段もあります
　
5の倍数だけとかいう指定ができる
　
:nth-child(5n) {
  color: lime;
}
　
　
疑似要素
　
::before
::after
　
/* リンクの後に矢印を追加 */
a::after {
  content: "→";
}
　
>CSS において ::after は、選択した要素の最後の子要素として
擬似要素を作成します。
よく content プロパティを使用して、
要素に装飾的な内容を追加するために用いられます。
この要素は既定でインラインです。
 
疑似要素の場合はコロン2つ
 
 
パンくずリストを>でわけたい
　
<ul>
　<li>aaa</li>
　>
　<li>bbb</li>
　>
　<li>ccc</li>
</ul>
これはリストの意味が通らない
　
<ul>
　<li>aaa</li>
　<li> > </li>
　<li>bbb</li>
　<li> > </li>
　<li>ccc</li>
</ul>
これもリストの意味がおかしい

↓
正解
　
<ul>
　<li>aaa</li>
　<li>bbb</li>
　<li>ccc</li>
</ul>
li::after{/*liのうしろに>を入れる*/
　content:">";
}
　　
この場合は、last-childで最後のは取ればいい

li:last-child::after{
　content:none;/*noneするとlastにつかない*/
}
　
間に画像を挟むこともできる
　
<ul>
　<li>aaa</li>
　<li>bbb</li>
　<li>ccc</li>
</ul>
li::after{/*liのうしろに>を入れる*/
 content:">";/*何を表示させたいかの部分*/
 display:inline-block;
 width:10px;
 background-image:url("icon.png");
 background-repeat:no-repeat;
}
　
li:last-child::after{
 content:none;/*noneするとlastにつかない*/
}
　　
要素の最初だけとかいうのもある
　
/* <p> の最初の行を選択 */
p::first-line {
  color: red;
}
　　
>CSS の ::first-line 疑似要素は、
ブロックレベル要素の最初の行にスタイルを適用します。
なお、最初の行の長さは要素の幅、文書の幅、
文字列のフォントの大きさなど、様々な要因に左右されます。
 
一文字目だけ色を変えたいとか
/* <p> の最初の文字を選択します */
p::first-letter {
  font-size: 130%;
}
　
>CSS の ::first-letter 擬似要素は、ブロックレベル要素の
最初の行の最初の文字にスタイルを適用します。
ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) が
ないときに限ります。
 
rootにかける
　
:root{
　font-size:10px;
}
body{
　font-size:1.6rem;
}
 
このrootはディレクトリ構造とかファイルのじゃなくて
１つのhtmlでの構造のおはなし
　
<html>
　<body>
　</body>
</html>
 
とか
　
<ul>
　<li>
　</li>
</ul>
こうやって書いたときの「親」
　
点数について
　
全称セレクタ

*{
}

ポイントは0点
　　
]]> karasumaru karasumarucss.fukuwarai.net://entry/46 2021-03-07T00:32:59+09:00 2021-03-07T00:32:59+09:00 基本(14) セレクタの復習 【フレックスボックス】
CSS display:flexの使い方を解説
 
基本的にid,class,tagをつかえば
大抵の場所は指定できる
　
より簡潔に書くには、
子孫セレクタ
複数セレクタ
を使う
子孫セレクタ

半角スペースで区切る
入れ子状態になってる子供を指定するために使う
間を飛ばすこともできる
セレクタ セレクタ｛
｝
　
ただし
body a{
}
ならbodyのなかのaはすべて
　
ul li a{
}
なら
ulのなかliのなかのaだけ
　
ちなみに
body ul a{//3点
 color:#00f;//青
}

と
ul a{//2点
 color:#f00;//赤
}
だと、ポイント制で青が勝つ
　
基本：後で書いたものが優先（上書き）
ただし：セレクタの合計点が高いほうがさらに優先
　
同じ点数なら下に書いたものが優先になる
　　
複数セレクタ

カンマで区切る
セレクタ,セレクタ{
}
 
header{
 width:80%;
}
main{
 width:80%;
}
fotter{
 width:80%;
}
上記のセレクタはまとめて書ける↓
header,main,fotter{
 width:80%;
}
 
合計点は、合計でなく1つのだけになる
よって
header,main,fotter{
 width:80%;
}
header{
 width:60%;
}
なら下が適用
　
body header,main,fotter{/*カンマで区切ったところで独立*/
 width:80%;
}
main{/*これだとこっちが優先*/
 width:60%
}
　
この点数は
bodyのheaderと、ただのmainと、ただのfotter
vs
ただのmain
なので、『下に書いたもの優先』が適用される
　
sassサス
を独学すると、
body header, body main, body fotter{
}
とか指定しなくてもいいらしい
が
コンパイルしなくちゃいけないらしくて大変らしい
　
yatさんのにもwpbeg.css.mapというのがある
圧縮されたファイル
cssをコンパイルしたファイルらしい
いらないものを全部消した状態
編集がしずらい
スマップファイル
　
yatさんのにもwordpressのでも
「コメントアウトしてるのに読まれてる」という情報があった
それはcssとしては文法がおかしいのでコメントアウトするのが正しいのだが、
ワードプレスさんの方が、特殊なプログラムで「cssのコメントアウトされた部分のふにふにに一致する部分を読んできますよ」という処理をしている
タイトルとかなんとかとかこのsassだとか
　
隣接セレクタ

li+li{
 color:#0f0;
}
 
<ul>
 <li>aaa</li>
 <li>bbb</li>
</ul>
 
これだとbbbだけが緑になる
「この隣にいるこれ」という指定
「liの直後にあるli」という書き方
　
<ul>
 <li>aaa</li>
 <li>bbb</li>
 <li>ccc</li>
</ul>
 
これはbbbとcccが緑になる
　
<header>
 <nav></nav>
 <p></p>/*ここだけ指定したいとする*/
 <p></p>
</header>
<main>
 <p></p>
</main>
header nav+p{/*3点*/
}
　
疑似クラス
疑似要素
　
コロンを1つつけるか2つ付けるかの違い
　
疑似クラス
a:hover{
}
前に書いてある要素にマウスが載ったときにこれを実行
だからaに限らない
　
疑似クラス
　
関係ないけど#300を調べたときの
ここのサイトも便利
　
あとはチャイルド系
:nth-child();
 
]]> karasumaru karasumarucss.fukuwarai.net://entry/45 2021-02-23T18:13:27+09:00 2021-02-23T18:13:27+09:00 基本(12) ヘルセム / モバイル版完成 今回は練習なので、ブレークポイントをいっぱい入れても仕方ない
ざっくり630pxぐらいで設定する
　
横並びになっているものを縦並びにすることが多いので、
googleの検証を開きっぱなしにして
elementを右側に表示させ、
そこで実際いろいろコードを書き換えてみるといいらしい
　
横幅が630px以下の時に上書きするスタイル
　
前の設定は生きているので、上書きしたいものだけ記述
上書きさせたいもののクラスなどの指定方法も合わせること
前の方がセレクタの点数が高いと書き換えが起こらない
　
ここまで
 
@media screen and (max-width: 630px){
 body{
  background-color: #eee;
 }
 .flex{
  flex-wrap: wrap;
 }
 nav{
  flex-basis: 100%;
 }
}
 
デザインデータがあればそれに合わせる
なければ、HOMEなどのリンクは文字が小さくて押しにくいので、
 
①フォントサイズを上げる
②上下のmarginを増やしてやる
などのことをする
　
 nav{
  flex-basis: 100%;
  font-size: 2rem;
  margin: 1.5rem 0;
 }
　
いまから自分でスマホ用にデザイン作ってみよう
 
→手も足も出ませんでした
　
先生の解説
　
①hoverがいらなくなる（消さなくてもいい）
②main p.messageの横幅が狭いので、
 
 main p.message {
  width:80%;
  margin: 3rem auto;
 }
　
 
この青い部分をみて、そのままここからコピーして
クラスの点数が同じまたは上回るようにしてやるといい
　
③flexを切るというより、flexを縦並びにするという方法がある
④col imgとtextの左右のpadding3％もいらない
⑤section同士がくっついて見えるのでcol_01の下にマージン
 
 
⑥newsの部分も幅80％に　横並びにしたくない
⑦もろもろ
　
hoverを切るかどうかはむつかしい問題で、
pcでもわざと幅を狭くして見るタイプの人もいる
その場合hoverを切るのは不親切だし残すのがよろしくなってくる
その場合はまたjQueryでこまかく指定することもできるらしい
　
モバイル変更部分はこうなる
　
@media screen and (max-width: 630px){
 
 /*横幅が630px以下の時の上書きするスタイル*/
 /*前の設定は生きているので、上書きしたいものだけ記述*/
 /*上書きさせたいもののクラスなどの指定方法も合わせること*/
 /*前の方がセレクタの点数が高いと書き換えが起こらないかもしれない*/
 
 body{
  background-color: #eee;
 }
 a:hover{
  color: #555;
  text-decoration: none;
 }
 main .btn a:hover{
  background-color: #257a01;
 }
 
 .flex{
  flex-wrap: wrap;
 }
 nav{
  flex-basis: 100%;
  font-size: 2rem;
  margin: 1.5rem 0;
 }
 main p.message {
  width:80%;
  margin: 3rem auto;
 }
 main .main_visual div{
  text-shadow: 1px 1px 5px #333;
 }
/*
//今回はこの方法ではない
 section.flex{
  display: block;
  flex-basis: 100%;
 }
 */

 main .column section.flex{/*1,10,1,10点＝22点*/
  flex-direction: column-reverse; /*row-reverseは上書きされている*/
 }
 main .column section .col_img,main .column section .col_text{
  padding: 3% 0;/*左右のpaddingを切る*/
 }
 main .column section.col_01,main .column section.col_02{
  margin-bottom: 3rem;
 }
 main .news{
  width: 80%;
  }
  main .news dl.flex dt,main .news dl.flex dd{
   flex-basis:100%;
  }
  /*上の記述は↓でもいい。
  main .news dl.flex{
   flex-direction:column;
  }
  */
   main .btn a {
  width: 80%;
  }
  footer{
   flex-direction:column;
  }
 footer ul {
  text-align: left;
  margin-buttom: 2rem;
 }
}
 
index.html追加部分
 
<meta name="viewport" content="width=device-width,initial-scale=1">

 

デザインがちょっと崩れたとしても、情報がきちんと伝わるのが大事
作っているときに分からなったら調べればいい

font-awesome
https://fontawesome.com/
 
フォントでアイコンが用意されている
サンプルhtmlのツイッターアイコンとかはこれを使っているらしい
イラレでsvgで保存して使ってもいいらしい
 ]]> karasumaru karasumarucss.fukuwarai.net://entry/44 2021-02-23T17:54:33+09:00 2021-02-23T17:54:33+09:00 基本(11) ヘルセム / モバイル版にしていく モバイル版にしていく
　
<meta name="viewport" content="width=device-width,initial-scale=1">
　
まずは特に考えずにこれを入れればよろしいらしい
　
考え方としてモバイルファーストとPCファーストというのがある
 
私たちはまずPCをつくったのでPCファースト
一応主流はモバイルファースト
　
メディアクエリ
　
>メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。
 
>CSS の @media @-規則は、一つまたは複数のメディアクエリの結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。
 
htmlに追加（metaタグを書いている場所に）
 
 <meta name="viewport" content="width=device-width,initial-scale=1">
 
cssに追加（最終行に）
 
@media screen and (max-width: 600px){
 /*横幅が600px以下の時のスタイル*/
 body{
  background-color: #eee;
 }
}
 
中の記述はいつも通り
横幅が600pxになったときそのスタイルが上書きされる（灰色になる）
簡単にいうとif文みたいなもの
　
minで指定することもあるらしい
 
@media (min-width: 30em)
　
max-width: 600px
この部分をブレークポイントとも呼ぶ
　
]]> karasumaru karasumarucss.fukuwarai.net://entry/43 2021-02-23T17:49:56+09:00 2021-02-23T17:49:56+09:00 基本(10) ヘルセム / PC版完成 こうなった
　
 
aタグはインライン要素だから、（領域を持っていない）
仮に横幅の指定をしても無駄
文字のとこだけクリックできる状態
　
ブロックレベルにしてやればいい
 display: block;
　
親要素の領域の100％の領域をもつ具合に変更される
 
これではじめてwidthが掛けられる
　
高さも欲しい
 
height: 6rem;
上に文字がくっついてしまった
こういうときはline-heightを使えば「上下に」伸びる
しかしもし2行あったらこうなる可能性も
　
もしこういう2行なりそうなときはpaddingなどで調整するらしい
　
ここまで
 
main .btn a{
 font-size: 2rem;
 background-color: #1b5901;
 display: block;
 width: 48%;
 line-height: 6rem;
 text-align: center;
 margin: 0 auto;/*中央揃え*/
 border-radius: 0.5rem;
}
 
a.hoverも調節しましょう
 
main .btn a:hover{
 background-color: #257a01;
 text-decoration: underline;/*アンダーライン*/
}
 
その下の隙間に関しては、
「mainの下だ」と考えてもいいし、
「ボタン部分の下だ」と考えてもいい
 
今回はmainの下と考えて、
 
main{
 margin-bottom: 10rem;
}
 

最後に全体のaにこれを掛ける

a:hover{
 color:#257a01;
 text-decoration: underline;
}
 
逆に、いますぐお問い合わせの部分は白いままであるように
下線も必要なくなった
 
main .btn a:hover{
 color: #fff;
 background-color: #257a01;
}
　
一応これで出来上がり
 
index.html
 
<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title>Now, Healthem アナタの健康サポート</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <!--
  <link rel="stylesheet" href="css/test.css">
  -->
 </head>
 <body>
  <header class="flex">
   <h1><a href="index.html"><img src="images/hc-Header_Logo.svg" alt="Healthem アナタの健康サポート"></a></h1>
   <nav>
    <ul class="flex">
     <li><a href="index.html">home</a></li>
     <li><a href="#">about</a></li>
     <li><a href="#">news</a></li>
     <li><a href="#">contact</a></li>
    </ul>
   </nav>
  </header>
 
  <main>
   <div class="main_visual">
    <div>
      <h2 class="white">
       毎日の食事、<br>
       カラダに優しいものを
      </h2>
      <p class="white">
       日々の食事がおろそかになりがちな働き盛りのあなたへ
      </p>
    </div>
   </div><!--main_visual END-->

   <p class="message serif gray">
   毎日いろいろなことに追われて食事がおろそかになっていませんか? <br>
   ヘルセムは、そんな忙しいあなたのための健康サポート、日々の食事をお届けするサービスです。個人でのご利用はもちろん、会社の福利厚生としてのご利用も可能。朝食と夕食のセットや昼食のみなど、お客様のニーズに合わせたプランをご用意しています。
   </p>

   <div class="column">
    <section class="col_01 flex"><!--1つめのセクション-->
     <div class="col_img">
      <figure>
       <img src="images/hm-Content-Images-01.jpg" alt="コラムイメージ01">
       <figcaption>毎日の食事は大事なもの</figcaption>
      </figure>
     </div>
     <div class="col_text">
      <h3>ある日突然不調をきたさないために</h3>
      <h4>未来のカラダは今の食事が作る</h4>
      <p>
       あなたの今のカラダはそこから遡ること数年前の生活が作ると言われているのをご存知でしょうか。忙しい毎日を乗り切るためにいい加減に食事を済ませたり、偏った食生活をしていると、数年後のカラダに不調をきたすことにもなりかねません。未来の自分を作るため、日々の食事にも心配りを。
      </p>
     </div>
    </section>
    
    <section class="col_02 flex"><!--2つめのセクション-->
     <div class="col_img">
      <figure>
       <img src="images/hm-Content-Images-02.jpg" alt="コラムイメージ02">
       <figcaption>面倒なカロリー計算もおまかせ</figcaption>
      </figure>
     </div>
     <div class="col_text">
      <h3>個人でのご利用、組織でのご利用も</h3>
      <h4>働き盛りのアナタをサポート</h4>
      <p>
       ヘルセムは働き盛りのあなたに必要な栄養をギュッと閉じ込めるべく栄養士が考えてメニューを構成しています。毎日に必要な摂取カロリーを考慮した和洋中のメニューからご自身の好みでチョイス、また会社の福利厚生として昼食のみのデリバリープランもご用意。働き盛りの世代をサポートします。
      </p>
     </div>
    </section>    
   </div>
   
   <div class="news">
    <h3 class="serif">ヘルセムからのお知らせ</h3>
    <dl class="flex">
     <dt>2018.03.01</dt>
      <dd>
       3月下旬からお昼のお弁当プランに期間限定「お花見セット」が登場
      </dd>
     <dt>2018.02.01</dt>
      <dd>
      梅の花も咲き始め、いよいよ春メニューの登場
      </dd>   
    </dl>
   </div>
   <p class="btn"><!--ボタンの要素もたせたい-->
    <a class="white" href="#">いますぐ問い合わせてみる</a>
   </p>
 </main>
 
 <footer class="flex">
  <nav>
   <ul>
    <li><a href="#">会社概要 </a></li>
    <li><a href="#">お問い合わせ  </a></li>
    <li><a href="#">サイトマップ  </a></li>
    <li><a href="#">プライバシーポリシー </a></li>
   </ul>
  </nav>
  <dl>
   <dt>株式会社ヘルセム </dt>
    <dd><address>東京都千代田区神田神保町1-105 </address></dd>
    <dd>contact@healthem.info</dd>
  </dl>
  </footer>
 
  <script src="test1.js"></script>
 </body>
</html>
 

style.css
 
@charset "UTF-8";
*{
 box-sizing: border-box;/*borderまでコミコミでサイズを計算*/
}
html{
 font-size:62.5%;/*こうやってルートのサイズを実質10pxにしておくとremの計算がらく*/
}
body{
 font-size: 1.5rem;
 font-family: sans-serif;/*全体はゴシック体*/
}
img{
 max-width: 100%;/*自分自身のもっているサイズを最大とする。また小さくなる時は親要素にあわせて小さくなる*/
}
a:hover{
 color:#257a01;
 text-decoration: underline;
}
 
.flex{/*横並びにしたいものは全部これで管理できる*/
 display: flex;/*横並び*/
}
.white{
 color: #fff;
}
.gray{
 color: #555;
}
.serif{
 font-family: serif;/*明朝体が出てきたらこのクラス名を付けてやる*/
}
 
header{
 justify-content: space-between;/*子要素の横に並ぶ時の余白。外の余白は無視する。アイテムが均等に並ぶが今回アイテムが2つしかないからそれぞれが左右に存在。3つあったらそれぞれの間隔が同じになる*/
 align-items: center;/*縦方向に中心をそろえる*/
 padding: 1rem 2rem;/*余白*/
}
header nav ul li{/*このliの3項目に余白がついているとよさそう*/
 margin-right: 2rem;
}
header nav ul li:last-child{/*でもliの最後のやつには余白いらないや*/
 margin-right: 0;
}
header nav ul li a{
 color: #555;/*ちょっと灰色*/
 text-transform: capitalize;
}
 
main{
 margin-bottom: 10rem;
}
 
main .main_visual{
 height: 520px;/*高さ*/
 background-image: url('../images/hm-Content-HomeHero.jpg');
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 
 /*上下方向の中心ぞろえ*/
 display:flex;
 align-items: center;
}
main .main_visual div{
 padding-left: 4rem;
}
main .main_visual div h2{
 font-size: 3rem;
 line-height: 1.2;
}
main .main_visual div p{
 line-height: 1.2;
 padding-top: 1rem;
}
 
main p.message{
 width: 60%;
 margin: 8rem auto;/*上下方向8rem、autoというのは「親要素の横幅の真ん中」*/
 line-height: 1.8;
}
main .column{
 width: 80%;
 margin: auto;
}
main .column .col_02{
 flex-direction: row-reverse;
}
 
main .column section .col_img{
 flex-basis: 40%;/*横並びになったときにその子供がどれだけの領域を持つか*/
 padding: 3%;
}
main .column section .col_text{
 flex-basis: 60%;/*横並びになったときにその子供がどれだけの領域を持つか*/
 padding: 3%;
}
main .column section{
 align-items: center;/*縦方向を中央に揃える なんでここにdisplay:flex;は必要ないのか→表（html）でこの部分にclass flexがすでに当たっているので乗せ乗せになっている*/
}
main .column section .col_img figcaption{
 padding-top: 1rem;
}
main .column section .col_text h3{
 border-bottom: 1px solid #333;/*文字に下線*/
 line-height: 1.5;
}
main .column section .col_text h4{
 font-size: 2.2rem;
 margin-top: 2em;
}
main .column section .col_text p{
 font-size: 1.5rem;
 line-height: 1.5;
 margin-top: 1.5em;
}
 
main .news{
 width: 60%;
 margin: 5rem auto;/*中央揃え 上下にmargin*/
}
main .news h3{
 font-size: 2.5rem;
 text-align: center;
 margin-bottom: 3rem;
}
main .news dl.flex{/*この指定のやり方もはじめてでは*/
 flex-wrap: wrap;/*折り返し設定*/
}
 
main .news dl.flex dt{
 flex-basis:25%;
  line-height: 2;/*こっちにもこれをつけないと高さがずれるよ*/
}
main .news dl.flex dd{
 flex-basis:75%;
 margin-bottom: 1.5rem;
 line-height: 2;
}
main .btn a{
 font-size: 2rem;
 background-color: #1b5901;
 display: block;
 width: 48%;
 line-height: 6rem;
 text-align: center;
 margin: 0 auto;/*中央揃え*/
 border-radius: 0.5rem;
}
main .btn a:hover{
 color: #fff;
 background-color: #257a01;
}
 
footer{
 justify-content: space-between;/*2アイテムを均等に左右ぞろえ*/
 flex-direction: row-reverse;/*アイテムを逆順で表示*/
 padding: 6rem 4rem;
 background-color: #f4f4f4;/*余白が消されているのでぴっちり背景色が塗られる*/
 
}
footer ul{
 text-align: right;/*右揃え*/
}
footer ul li a{/*footerの右側の要素のブロック*/
 line-height: 1.5;
}
footer dl dt,footer dl dd{/*footerの左側のブロック*/
 line-height: 1.5;
}]]> karasumaru karasumarucss.fukuwarai.net://entry/42 2021-02-23T17:40:03+09:00 2021-02-23T17:40:03+09:00 基本(9) ヘルセム / dl,dd,line-height ヘルセムからのお知らせ、の次の部分
　
これを横並びにする方法
①flexbox
②float
など
 
<dl class="flex">としましょう
横並びにしたいが全部が横並びじゃ困る
2行にしたい
横幅を指定してやればいい
<dt>と<dd>を足した分で計算したい
 
main .news dl.flex dt{
 flex-basis:25%;
}
main .news dl.flex dd{
 flex-basis:75%;
}
　
>flex-basisプロパティは、フレックスアイテムの基本の幅を指定します
 
でもまだやっぱり横並び
flexboxはなにがなんでも横に並べようとする
折り返さない設定が必要になる
何も設定しないと横幅をこえてもむりやり並べる
 
横幅を超えたら折り返しと指定する
 
main .news dl.flex{
 flex-wrap: wrap;/*折り返し設定*/
}
 
さらにこの部分全体を調整
　
main .news{
 width: 60%;
 margin: 0 auto;/*中央揃え*/
}
　
ここまで
 
main .news{
 width: 60%;
 margin: 5rem auto;/*中央揃え 上下にmargin*/
}
main .news h3{
 font-size: 2.5rem;
 text-align: center;
}
main .news dl.flex{
 flex-wrap: wrap;/*折り返し設定*/
}
main .news dl.flex dt{
 flex-basis:25%;
}
main .news dl.flex dd{
 flex-basis:75%;
}
　
画面幅をせばめたときに、ddの行間がぴちぴちなので、
　
main .news dl.flex dd{
 flex-basis:75%;
 margin-bottom: 1.5rem;
 line-height: 2;
}
　
微妙に高さが合わなくなった
 
これを解決するにはdlにも同じ行間設定を加える
　
main .news dl.flex dt{
 flex-basis:25%;
 line-height: 2;/*こっちにもこれをつけないと高さがずれる*/
}
　
line-heightにはremをつけないで生身の2とか1.5にするのが普通
 
なぜか
フォントサイズが変わったときに文字行間も自動で倍率が維持されるので
行間は上・下両方向にのびる
　
ただしadobeソフトのフォトショやイラレは行間の概念が違うらしい。下に伸びるらしい
　
 
ddがブロック
dtがインライン系
　
横に並べるだけならfloatはあまり使わないらしい
　
インラインのものは領域を持っていない
領域はないけど見えないわけではないらしい
<a>とか<span>とかもインライン系らしい
　
ここでdtとddが横並びになっているのは、
「flexがかかっているから」であって、dtがインライン要素だからではない
reset.cssをかけなければわかるが、普通にデフォルトでdtとddは改行される
　　
「いますぐ問い合わせる」の部分
 
1.classを付与
 
   <p class="btn"><!--ボタンの要素もたせたい-->
    <a href="#">いますぐ問い合わせてみる</a>
   </p>
 
ボタンが複数あるなら専用のクラスを切ってそれをhtmlに当てはめてもいい
今回はmain .btn a{}で
 
main .btn a{
 font-size: 2rem;
 background-color: #1b5901;
}
 
つづく

]]> karasumaru karasumarucss.fukuwarai.net://entry/41 2021-02-23T17:32:36+09:00 2021-02-23T17:32:36+09:00 基本(8) ヘルセム / margin:auto ヘルセムの続き　
　
①背景の上に文字を乗せるか
②imgの上にpositionで文字を配置するか
などなど
デザインを反映するときにきめることがある
スライドショーにするときは②にするらしい
　
　
特に色設定などは、専用classを切っておくのがなぜ大事かというと、
デザイナーさんが「この灰色はもっと薄めがいい」などとリテイクだしてきたとき、
その一点を変更するだけで全部変えられる
　
serif ひげあり
sans-serig ひげなし
　
モバイルファースト
モバイル版を先にcssで組むこと
　
テキストアラインはブロックレベルのものに掛けるらしい
　
text-align: justify;
ジャスティファイ。均等割り付け。というのもあるらしい
幅を指定した中で文字を中央揃えしたいとき
 
なにもしないとブロックは左に寄り、そのなかで中央揃えするので左寄りになる
そういうときはmargin: autoを使う
　
>margin: auto;
 
#main {
 width: 600px;
 margin: 0 auto; 
}
<div id="main">
 
ブロックレベル要素のwidthを設定すると、要素のコンテナが左右に引き延ばされなくなる
また、左右のマージンをautoにすると、左右中央に要素を配置できる
要素のwidthは設定した値になるから、
残りのスペースは左右のマージン間で均等に分配される
 
]]> karasumaru karasumarucss.fukuwarai.net://entry/40 2021-02-23T17:27:15+09:00 2021-02-23T17:27:15+09:00 基本(7) ヘルセム / section,margin,box-sizing 二つのsectionを囲っているdivにクラスを付ける
 
<div class="column">
 <section><!--1つめのセクション-->
　
それぞれのセクションにも
<section class="col_01"><!--1つめのセクション-->
<section class="col_02"><!--2つめのセクション-->
　
セクションの中のimgとテキストもdivに名前を付ける
セクション全体の姿はこの通り
（これはcol_02だがcol_01も同じようにする）
　
・<figure>を囲っているdivが<div class="col_img">
・<h3><h4><p>を囲っているdivが<div class="col_text">
　
section部分
 
<section class="col_02"><!--2つめのセクション-->
     <div class="col_img">
      <figure>
       <img src="images/hm-Content-Images-02.jpg" alt="コラムイメージ02">
       <figcaption>面倒なカロリー計算もおまかせ</figcaption>
      </figure>
     </div>
     <div class="col_text">
      <h3>個人でのご利用、組織でのご利用も</h3>
      <h4>働き盛りのアナタをサポート</h4>
      <p>
       ヘルセムは働き盛りのあなたに必要な栄養をギュッと閉じ込めるべく栄養士が考えてメニューを構成しています。毎日に必要な摂取カロリーを考慮した和洋中のメニューからご自身の好みでチョイス、また会社の福利厚生として昼食のみのデリバリープランもご用意。働き盛りの世代をサポートします。
      </p>
     </div>
    </section>    
　
もうすこしclass名を付けていく
flexを追加して、このように変更
　
<section class="col_01 flex">
<section class="col_02 flex">
　
今こんな感じ
flexをつけたから横並びになっている
　
  
marginの話

上下のmarginは相殺しあう
つまりブロックAとBが上下にあるとして、Aのmargin-bottomが3rem、
Bのmarginが上下に8remあったら、
11remにはならず、相殺されて「大きいほうが」適用される
よって8remの隙間になる
　
左右に関しては足されるらしい
　
注意！
 
main .column .col_02{
}
この記述で、.の位置を間違えたらもちろん動かない
main. columnになっていた
　
『mainの、子要素であるクラスcolumnの、子要素であるクラスcol_02』という記述なので、
「子要素で」というところが「半角スペース」
「クラスの」というところが「.」
　
すなわち記述が
main .column .col_02{
}
となる
　
つづき
main .columnの幅を整える
 
main .column{
 width: 80%;
 margin: auto;
}
 
ふたつめの要素を左右反転（写真が右に）
 
main .column .col_02{
 flex-direction: row-reverse;
}
　
横並びになった2つの要素の幅を決める
 
main .column section .col_img{
 flex-basis: 40%;/*横並びになったときにその子供がどれだけの領域を持つか*/
}
main .column section .col_text{
 flex-basis: 60%;/*横並びになったときにその子供がどれだけの領域を持つか*/
}
　
だけど変わらない？
画像サイズが大きいから
全画像イメージの設定をする
 
img{
 max-width: 100%;
/*自分自身のもっているサイズを最大とする。
また小さくなる時は親要素にあわせて小さくなる*/
}
　　
これはbody{}の次に早々に記述する↑
　
　
余白も欲しいので、paddingを追加
 
 main .column section .col_img{
 flex-basis: 40%;/*横並びになったときにその子供がどれだけの領域を持つか*/
 padding: 3%;
}
main .column section .col_text{
 flex-basis: 60%;/*横並びになったときにその子供がどれだけの領域を持つか*/
 padding: 3%;
}
 
さて、横幅の合計が100％を超えた。106％になっている
 
要素を包む玉ねぎの皮のように、
要素の幅 width:100pxとすると、
padding 3
border 3
margin 3
などと外側に皮をつける形になるので、
その全体は109になる
 
これでまずいときは、（コミコミで100にしたい）
box-sizingを使う
 
box-sizing: border-box;
内側余白やボーダーも含めて
　
これはhtml{}でもだめで、さらに上で全称セレクタで指定する
リセットCSSで記述してもいいレベルらしい
 
@charset "UTF-8";
 
*{
 box-sizing: border-box;/*borderまでコミコミでサイズを計算*/
}
　
参照
　
ただしflexに関しては無理やり押し込めてくれる
でも無茶苦茶に押し込めたとき表示がどんどん小さくなってまずくなるらしい
 
そういう時はflex:wrapを使う
これをすると、親要素より子要素が大きくなったら勝手に折り返されるらしい
　
今回は折り返されたら困るのでbox-sizingを指定する
　
さくさく成型します
 
main .column section{
 align-items: center;/*縦方向を中央に揃える なんでここにdisplay:flex;は必要ないのか*/
}
main .column section .col_img figcaption{
 padding-top: 1rem;
}
main .column section .col_text h3{
 border-bottom: 1px solid #333;/*文字に下線*/
 line-height: 1.5;
}
main .column section .col_text h4{
 font-size: 2.2rem;
 margin-top: 2em;
}
main .column section .col_text p{
 font-size: 1.8rem;
 line-height: 1.5;
 margin-top: 2em;
}
 
]]> karasumaru karasumarucss.fukuwarai.net://entry/39 2021-02-23T17:14:25+09:00 2021-02-23T17:14:25+09:00 基本(6) クラスを複数付与 main_visualの下の文章部分
classをつけておく
　
<p class="message">
毎日いろいろなことに追われて食事がおろそかになっていませんか? <br>
ヘルセムは、そんな忙しいあなたのための健康サポート、日々の食事をお届けするサービスです。個人でのご利用はもちろん、会社の福利厚生としてのご利用も可能。朝食と夕食のセットや昼食のみなど、お客様のニーズに合わせたプランをご用意しています。 
</p>
　
class名ってどう付ける？
　
wrapper ラッパー　包み物によく使う。大きいブロックを包むのに使う名前
container コンテナー　ラッパーの中の小ブロックの名前によく使う
 　
main
global
home
とかいろいろある。タグ名と同じものは使わない
入った会社や同僚にあわせて命名の規則は合わせればいい
　　
今回はpだけなので、背景塗るなどはないのでpにclassを付けるが、
もしこれで「背景灰色」とかなったら、divで包んでおく必要とかが出てくる
今回は必要ない
　　
main p.message{
 width: 60%;
 margin: 8rem auto;/*上下方向8rem、autoというのは「親要素の横幅の真ん中」*/
 line-height: 1.5;
}
　
marginで一つだけかくと「上下方向のマージン指定」、
半角開けてautoにすると親要素の横幅の真ん中になる
　
明朝体部分のためのクラスを作る
 
.serif{
 font-family: serif;/*明朝体が出てきたらこのクラス名を付けてやる*/
}
 
逆に全体はゴシック体にしておく
 
body{
 font-size: 1.5rem;
 font-family: sans-serif;/*全体はゴシック体*/
}
　
文章の部分に「明朝体」「灰色」のクラスも付与
 
<p class="message serif gray">
毎日いろいろなことに追われて食事がおろそかになっていませんか? <br>
ヘルセムは、そんな忙しいあなたのための健康サポート、日々の食事をお届けするサービスです。個人でのご利用はもちろん、会社の福利厚生としてのご利用も可能。朝食と夕食のセットや昼食のみなど、お客様のニーズに合わせたプランをご用意しています。 
</p>
　
クラス名は複数付けられるし、その場合半角スペースであけて記述する
　
]]> karasumaru