MY BLOG

×

不思議な世界へようこそ！

私のブログぜひ、
見ていってくださ〜い！！

復習するよ〜

あいさつ

みなさん、お待たせしました！
今週もしっかりブログを投稿します＾＾
先週は家族が名古屋に来ていて一緒に水族館に行ったりご飯を食べたりしました😀とても楽しかったです！
今回もJavaScriptとSassの単元が一つ終わったので復習していきたいと思います💪

復習

〈switch文について〉
条件に渡した値がcase節と一致した場合にそれ以降のコードを実行し、条件式の値がどのcase節にも一致しない場合はdefault節に続くコードが実行されます。それぞれのcase節の最後にbreak（ここで終わり）という意味のキーワードを記述します。

〈基本形〉
switch(条件式）{
 case 値1:
  //条件式の値が値1に一致する場合に実行される処理
  break;
 case 値2:
  //条件式の値が値2に一致する場合に実行される処理
  break;
 default:
  //条件式の値がどの値にも一致しない場合に実行される処理
}

（例）
let fruit='りんご';
switch(fruit){
 case 'りんご':
  console.log('りんごがあります');
  break;
 case 'みかん':
  console.log('みかんがあります');
  break;
 default:
  console.log('フルーツがあります');
}

〈if文とswitch文の使い分けについて〉
if文：「ture」か「false」で判定する
　　　※基本的にはif文を使用する
switch文：変数の値で判定する
　　　　　※可読性が高いので分岐の数が多い場合に使用する

〈ランダムについて〉

//0.00000から9.99999までのランダムな小数を取得する
let num=Math.random()*10;

//小数を切り捨てて0から9までのランダムな整数を取得する
num=Math.floor(Math.random()*10);

//1をプラスすることで1から11までのランダムな整数を取得する
num=Math.floor(Math.random()*10+1);

〈フルードレイアウトについて〉
width、margin、paddingを相対単位の%やemなどでしてします。
固定（px）から可変（%）に変換する場合
変換したい値／変換したい値の親要素の幅＊100

〈フルードイメージについて〉

img{
 max-width:100%;
 vertical-align:bottom;
 height:auto;
}

〈メディアクエリについて〉

/*共通のスタイル（モバイルファースト）*/
bpdy{
 color:#fff;
 background-color:#000;
}

/*ウィンドウサイズが640px以上の時*/
@media (max-width:640px){
 body{
  color:#000;
  background-color:#fff;
 }
}

〈Sassによるスマホ対応について〉

/*ブレイクポイントの設定*/
$breakpoints(
 "desktop":"screen and(max-width:800px)";
 "full":"screen and(max-width:1200px)";
)!default;

/*mixinの設定*/
@mixin m-query($breakpoints){
 @media   @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/*呼び出し例*/
.text{
 color:#000;
 @include m-query(desktop){
  color:#fff;
  }
}

〈改行の制御について〉

〈br要素に付与したクラス名で切り替える〉
（html）
<p>
  Lorem ipsum dolor sit amet,<br class="mobile">
  consectetur adipiscing elit,<br class="pc">
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

（css）
.mobile{
  display: block;
}
.pc{
  display: none;
}
@media (min-width:800px) {
  .mobile{
    display: none;
  }
  .pc{
    display: block;
  }
}
〈inline-blockで切り替える〉
（html）
<div class="concept__text">
  <span>Lorem ipsum dolor sit amet,</span>
  <span>consectetur adipiscing elit,</span>
  <span>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  <span>Ut enim ad minim veniam,</span>
  <span>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
  <span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
  <span>Excepteur sint occaecat cupidatat non proident,</span>
  <span>sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

（css）
.concept__text{
  span {
    display: inline-block;
  }
}

〈単語の折り返し制御について〉
長いURLやメールアドレスは一つの単語として見られるので改行されずに表示領域からはみ出してしまいます。

（html）
<dl class="mail">
 <dt class="mail__term">Mail</dt>
 <dd class="mail__desc">andjoeyaivaespsuaitdywncucspge@gmail.com</dd>
</dl>

（css）
.mail__desc{
 overflow-wrap:anywehere;
}

〈コンテンツ（内容）の横幅に合わせるやり方について〉

（html）
<p>あいさつ</p>

（css）
p{
 eidth:fit-content;
 color:#000;
 font-size:16px;
 border-bottom:1px #f00 solid;

〈画像のトリミングについて〉

（css）
img{
 aspect-ratio(width/height);
 
 （雛形）
img{
  width: 100%;
  aspect-rasio: 4/3;
  object-fit: cover;
}

さいごに

今回はJavaScriptとSassについて復習しました。クラスの操作についてあまり理解ができていなかったので自分で復習して理解できるようにしていこうと思います。
add：クラス名を追加する
remove：クラス名を削除する
toggle：クラス名の追加・削除を交互にする
value：クラス名を取得する
replace：クラス名を置き換える
contains：クラス名を含むかどうかを調べる
進級制作展の日数も少なくなってきているので残りの時間を全力で取り組みたいと思います！