DAY1〜9ではHTML、CSSの基礎・コーディングの練習を行いました。
重要だと思った部分を整理していきたいと思います。

上手な質問の仕方

コーディングの話ではないですが、とても重要な部分でした。

自己解決能力
正しく情報を伝えることにより手助けをしてもらい素早く解決する能力

がエンジニアにはとても重要です。

どの職業でもそうですが、質問をすることは他人の時間を奪うことなので、まず自分で調べてそれでも分からない場合は問題を分かりやすく伝え、素早い解決に繋げることが双方にとって大切です。

だからと言って分からないことは分からないですし、質問することにより質問された側の勉強になることもあるので上手な質問の仕方を今のうちに身につけることが重要です。

デイトラでの質問点は今のところ過去の回答を見ることによって解決できています。

marginとpadding

marginは外側の余白
paddingは内側の余白

なのは分かりますが、使い分けについてはまだ難しい部分が多いので
その都度使用する理由を考えていきます。

VS CodeのLive Server

デイトラをはじめる前もVS Codeを少し使っていましたが、
Live ServerというHTMLやCSSファイルの更新をライブプレビューできるようにするプラグインは初めて知りました。

ファイルを編集すると同時に変更が反映するのでとても楽です！

Emmet

Emmetについてはデイトラをはじめる前も知っていましたが、そこまで重要なものだという認識はしていませんでした。
ですがコーディング速度を上げる、タイプミスなどを減らす意味でもとても重要なので、はじめのうちから使用することが大切です。

float

「floatさせたら親要素の高さが0になってズレる」
？？？です。

float=浮く

ブロックの構成から浮いてしまう=下の要素が詰まってしまいます。
なのでCSSの共通部分に書いてクリアにします。

☆
・擬似要素afterかbefore使う
・contentという空要素
・display:block
→clearをつけた要素の後にリセットされる
（afterはこの要素の終わりの直前に入る）（beforeはこの要素の始まった直後）
HTMLはfloatする部分の親要素のclass名に付け加える

.clear::after{
    content:"";
    clear: both;
    display: block;
}

<div class="floatする部分の親要素のclass名 clear">

なかなか難しいですね笑

Flexbox

日本語対応！CSS Flexboxのチートシートを作ったので配布します
印刷して手元に置いて復習します。

お問い合わせフォーム

<form action="移動するページのURL" method="POST">
<input type="email" name="email" id="email">
<button type="submit"></button>
</form>

・お問い合わせフォームはmethodがPOSTが一般的
・typeは表示されるテキストフィールドの種類を指定
・nameはPHPなどで入力された値を送信する際に必要
・idはCSSやJSでタグを指定する時に必要　
・buttonのsubmitでサーバー側や別ページに送信することができる

まとめ

コーディングする上で重要なことは
HTMLを書き上げてからCSSをあて調整する

HTMLを書く際は
完成形をイメージ・スタイルの当て方を考える・レスポンシブも見越す

設計図がなければ家は建てられないです。
この点を意識してコーディングすることが重要です。

さいごに

まだはじめたばかりですが、
デイトラをスタートしてから以前の完全独学からの軌道修正がかなりできています。
また、勉強を継続する習慣がついてきました。
一人でコーディングは現状難しいので、どれだけできるようになるか今後が楽しみです！

img {
  width: 300px;
  height: 300px;
}

このままではリサイズしたい画像が横や縦に伸びてしまう場合があります。
画像の縦横比を維持したままリサイズするには
object-fit: cover;
を先ほどのCSSに追加してあげましょう。

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

画像は、縦横のうち小さい方を基準にして自動で拡大・縮小されて、はみ出した部分は切り取られます。また、中央の位置で切り取られます。
（object-position: 横の位置 縦の位置; で切り取る位置を指定することもできます。）

どうも7noteです。文字の上揃え、下揃えが効かないときに確認する3つの事

vertical-align: middle;を使って、文字や画像の上下の位置を上揃えにしたり、下揃えにしたりしたいのに上手く効かない！
そんな時に確認しておきたい3つのポイントをご紹介したいと思います。

1. vertical-align: center;をブロック要素に効かせようとしている

style.css

p {
  vertical-align: middle;  /* これは効きません！ */
}

基本的に、インライン要素、ブロック要素（とtable-cell要素）にしかvertical-alignは効きません
もし間違えてspanじゃなくpタグに書いていた！という場合はそれを直すだけで一発解決かも？

※ブロック要素かインライン要素かを調べる

2. 親要素のflexboxの影響を受けてる

style.css

p {
  display: flex; /* 親要素にflexboxが効いていると・・・ */
}

p span {
  vertical-align: middle;  /* これは効きません！ */
}

親要素で位置を調節しているので、優先順位がdisplay: flex;が優先されてしまいvertical-alignが効かなくなります。
併用するときは注意が必要！！

3. 揃えたい要素が浮いている

style.css

p span {
  position: absolute;  /* position: fixed;等も */
  float: left;         /* floatも一緒に使っていると・・・ */

  vertical-align: middle;  /* これは効きません！ */
}

イメージとしてはposition: absolute;やfloatは浮いている状態なので、浮いているものに対してvertical-alignを指定しても効きません。
こちらも注意しましょう。

まとめ

初心者の方は結構ひっかかりやすいvertical-alignの罠ですが、今回紹介したポイントさえしっかり抑えていれば難しいことはないと思います！
ただ忘れやすいので、「vertical-alignはブロック要素には効かない」っと3回くらい唱えて覚えてもいいかもしれません。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

どうも7noteです。文字の上揃え、下揃えが効かないときに確認する3つの事

vertical-align: middle;を使って、文字や画像の上下の位置を上揃えにしたり、下揃えにしたりしたいのに上手く効かない！
そんな時に確認しておきたい3つのポイントをご紹介したいと思います。

1. vertical-align: center;をブロック要素に効かせようとしている

style.css

p {
  vertical-align: middle;  /* これは効きません！ */
}

基本的に、インライン要素、ブロック要素（とtable-cell要素）にしかvertical-alignは効きません
もし間違えてspanじゃなくpタグに書いていた！という場合はそれを直すだけで一発解決かも？

※ブロック要素かインライン要素かを調べる

2. 親要素のflexboxの影響を受けてる

style.css

p {
  display: flex; /* 親要素にflexboxが効いていると・・・ */
}

p span {
  vertical-align: middle;  /* これは効きません！ */
}

親要素で位置を調節しているので、優先順位がdisplay: flex;が優先されてしまいvertical-alignが効かなくなります。
併用するときは注意が必要！！

3. 揃えたい要素が浮いている

style.css

p span {
  position: absolute;  /* position: fixed;等も */
  float: left;         /* floatも一緒に使っていると・・・ */

  vertical-align: middle;  /* これは効きません！ */
}

イメージとしてはposition: absolute;やfloatは浮いている状態なので、浮いているものに対してvertical-alignを指定しても効きません。
こちらも注意しましょう。

まとめ

初心者の方は結構ひっかかりやすいvertical-alignの罠ですが、今回紹介したポイントさえしっかり抑えていれば難しいことはないと思います！
ただ忘れやすいので、「vertical-alignはブロック要素には効かない」っと3回くらい唱えて覚えてもいいかもしれません。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

はじめに

はじめまして。
早速ですが、この記事は
20代後半　女性　未経験　地方　働きながら
Web制作・デザインを学びエンジニア転職を実現する　ものとなっております！

学習記録などを都度共有しますので、参考になる部分は活用していただけると嬉しいです。

この記事を書く前

2020年9月〜Progate
　　　10月〜ドットインストール、模写開始

模写に入ったところで、
「サイトの見た目は合わせることが出来るけど、答え合わせが難しい」
「どこまで何をやればいいの？」
「そもそもの基礎がよく分かっていない」
など効率を考えるあまり情報の精査に時間を取られしまっていました。

デイトラ入会・本格的に勉強開始（2020年12月〜）

「独学では情報の精査などに時間が取られ効率的ではない」
「質問できる環境やコミュニティが欲しい」
そこで興味のあったデイトラWeb制作・デザインコースに入会しました。

なのでここからはデイトラとともにフロントエンドエンジニア（デザイン含む）
転職を目指していきたいと思います！

久しぶりにJQuery触りました。JQueryが優秀すぎて、自分がおバカになりそうだったのでしばらく触ってなかったのですが、とはいえ「楽に実装できるなぁ」って思いました。

正直将来性は感じませんがwまだまだlegacyな会社(悪い意味じゃ無いよ)では、使われいるライブラリーですし、何よりも初心者が一番とっつきやすいツールでもあります。

本題

【使用画像】

【完成イメージ】

やることは掲題のとおり、左右のSlideです。JQueryにはslideUp,slideDwonはあるのですが、左右のSlideがなかったと思います。（違っていたらすいません。）

なので練習も含めてこの機能を実装してみました。是非参考にして下さい。

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>slideX_JQuery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- Left Image -->
  <div class="left-img" id="leftImg"><img src="./img/chick.png"></div>
  <!-- Right Nav -->
  <nav>
    <div class="right-nav navToggle">MENU</div>
    <div class="nav-close navToggle">×CLOSE</div>
    <ul>
      <li><a href="#">manu1</a></li>
      <li><a href="#">manu2</a></li>
      <li><a href="#">manu3</a></li>
      <li><a href="#">manu4</a></li>
      <li><a href="#">manu5</a></li>
    </ul>
  </nav>
  <!-- JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="./js/main.js"></script>
</body>
</html>

htmlはすごくシンプルです。念の為、head部分まで載せときますので、階層さえ整えてくれれば、最悪コピペでいけます。

css

@charset "UTF-8";
/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
/* Left Image */
.left-img{
  transition: .3s;
  position: absolute;
  top: 50%;
  left: -60px;
}
.left-img.show{
  left: 0;
}
/* Right Navigation */
nav{
  height: 100%;
  /* 初期値は幅０ */
  width: 0;
  background: beige;
  border-left: 2px solid  #c9caca;
  /* 右上に常時配置させる */
  position: fixed;
  top: 0;
  right: 0;
  transition: .3s;
}
nav.show{
  /* showクラスが追加されると、幅200pxに上書きされる */
  width: 200px;
}
.right-nav{
  width: 30px;
  height: 100px;
  /* ボーダーは右側不要なので０を上書き */
  border: 2px solid #c9caca;
  border-right: 0;
  border-radius: 5px 0 0 50%;
  /* テキスト縦書き */
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  color: #e6b422;
  /* navの外側に相対配置。相対配置なので、navの挙動分は同時に動く。 */
  position: relative;
  top: 10px;
  left: -30px;
}
.nav-close{
  /* 初期値は非表示 */
  display: none;
  padding: 0 15px 0 1px;
  border-bottom: 1px solid black;
  /* bodyの右上に絶対配置 */
  position: absolute;
  top: 10px;
  right: 10px;
}
.nav-close.show{
  /* navが開閉されると、CLOSEボタンが表示される。 */
  display: block;
}
nav ul{
  /* liがnavの画面外でスタンバッているため、ul外の要素は非表示。 */
  overflow: hidden;
}
nav ul.show{
  /* liの枠外からのアニメーションを実行したいため、hiddenを通常のvisibleに上書き。 */
  overflow: visible;
}
nav li{
  background: #e6b422;
  border-top: 1px solid #c9caca;
  /* 枠外からスライドインするため、初期値では左側に相対配置。 */
  position: relative;
  top: 50px;
  right: 300px;
  transition: 1s;
}
nav li.show{
  background: #f5f5dc;
  /* navが開閉されたと同時に、相対配置のまま、位置指定を全て０に戻す。 */
  position: relative;
  top: 0;
  right: 0;
}
nav li:last-child{
  border-bottom: 1px solid #c9caca;
}
nav a{
  display: block;
  padding-left: 20px;
  line-height: 50px;
  color: #e6b422;
  transition: .3s;
}
nav a:hover{
  background: #e6b422;
  color: white;
}

これもResetまで載せときます。難しそうなところはコメント書いてるんで見て下さい。

ポイントとしてはnav ulのoverflowの使い方でしょうか？
コメントにも書いていますが、liが時間差で左側からSlideするような機能を実装しているため、ulの枠外にliが初期配置されています。

このままだと枠外に置いてあるliが丸見えになってしまうので、ulのoverflowで枠外の要素を全て非表示にしています。

ただしすっと非表示だと今度は、navメニュー開閉時のアニメーションが見えなくなってしまうため、開閉時のみhiddenから初期値のvisibleに上書きしています。

それ以外は難しいことは無いかと思います。

JQuery

$(function(){
  // 変数宣言（let宣言でもOKだが今回は再代入不要なのでconstが望ましい）
  const leftImg = $('#leftImg');
  const navToggle = $('.navToggle');
  const liTags = $('nav').find('li');
  const showCls = 'show';
  // Left Image
  leftImg.on('click', function(){
    // クリックでshowクラスを追加。
    $(this).toggleClass(showCls);
  });
  // Right Navigation
  $.each(navToggle, function(i, btn){
    // 開閉ボタン2つに対して、繰り返し処理。
    $(btn).on('click', function(){
      // 先にnavを開閉。CLOSEボタン表示。ulのoverflow解除。
      $('nav').toggleClass(showCls);
      $('.nav-close').toggleClass(showCls);
      $('nav ul').toggleClass(showCls);
      // ulのoverflow解除後、liのアニメーション処理を実行。
      $.each(liTags, function(i, li){
        setTimeout(function(){
          $(li).toggleClass(showCls);
        },200 * i);
      });
    });
  });
})

ここも難しいことは無いです。
nav開閉時のアクションとして、先にnav,nav-close,nav ulにそれぞれshowクラスを追加し、その後にliに対して処理を投げます。

liの処理は以下の様な流れになっています。
・nav内のliを取得。それを配列化。
・$.each()で配列のアイテム(li１つ１つ)に対し、showクラスを追加。
・showクラスの追加は、setTimeout(func, n)によって、nミリ秒ずつ処理を遅らせます。

ざっくりとこんなところです。

最後に

今回はJQueryで書きましたが、時間があったら通常のjavascriptの記述に変換したものを載せたいと思います。

やっぱり今後の需要としては他のモダンJSもやっていくべきなので、コードの変換は凄く勉強になります。

特にjavascriptをやると、JQueryの裏側でどういった処理が流れてるのかを知れるので、ロジカルに何で動いているのかが何となく分かります。

今回は簡単ですが、この辺で終わりにします。お疲れ様でした。

****

Flexboxを使うことで、要素を左右中央の並びを変更

index.html

<div id="sample1" class="parent">
      <div class="children">要素</div>
</div>

<div id="sample2" class="parent">
      <div class="children">要素</div>
</div>

<div id="sample3" class="parent">
      <div class="children">要素</div>
</div>

style.css

.parent {
  padding: 10px;
  background-color: #9eefff;
  display: flex;
}

#sample1 {
  justify-content: flex-start;
}

#sample2 {
  justify-content: flex-end;
}

#sample3 {
  justify-content: center;
}

親要素のparentクラスにdisplay: flex;を付与
→　並びを変更したい要素の親要素を「Flexbox化」することで、要素を柔軟に変更できる

そして、id名毎に異なる並びの種類を設定

「sample1」には、justify-content: flex-start;
→　要素を左寄せ

「sample2」には、justify-content: flex-end;
→　要素を右寄せ

「sample3」には、justify-content: center;
→　要素を中央寄せ

はじめに

適用順序の備忘録。

指定元による優先順位

CSSの指定は、制作者以外にもユーザー、ブラウザのデフォルトのスタイルシートからも指定できる。
→(ブラウザのデフォルトスタイルシートは自動で適用される)
これ以外の指定元も存在するが、基本的な指定元は下記。

• 製作者


• ユーザー


• ユーザーエージェント(ブラウザのこと)

CSSの指定が競合した場合

基本的な優先順位

制作者の指定 > ユーザー > ユーザエージェント

!importantで優先順位を高くする
「制作者」「ユーザ」「ユーザエージェント」の指定元による優先順位は、CSSの宣言(プロパティ:値)の後ろに
[!important」を追加することで優先順位の変更ができる。

p {
  color: #FFF; !important;
}

!importantを付けた場合の優先順位 (降順)

ユーザーエージェント !iportatnt付き

ユーザー　!importatnt付き

制作者　!important付き

制作者

ユーザー

ユーザーエージェント

同じ指定元の中での競合の場合、後の指定が優先される(詳細度が同じ場合)
!importantをつけると順序や詳細度にかかわらず同じ指定元内でも優先される。

詳細度 Specificity

詳細の度合い。
要素の種類だけで指定するセレクタは詳細度は低く、IDで1つの要素を限定的に指定するセレクタの詳細度は高くなる。

セレクタの詳細度による優先順位の計算方法

CSS3では3桁の数字で計算する。
CSS2.1までは4桁だったが、無くなった1桁はstyle属性による指定かどうかを判定するもので、
style属性であれば無条件に詳細度が最も高くなる仕様になった為、計算対象外になった。

セレクタの中に含まれるシンプルセレクタの種類ごとの個数を次のように各桁に入れる。
この3桁の数値が大きいものほど詳細度が高い。

1桁目
要素系のセレクタの個数
・要素名 タイプセレクタの個数
・疑似要素の個数 ::xxx
2桁目
属性系のセレクタの個数
・クラスセレクタの個数 .xxx
・属性セレクタの個数　xxx
・疑似クラスの個数　:xxx

3桁目
IDセレクタの個数　#xxx

数字は
3桁目 2桁目 1桁目

例外

ユニバーサルセレクタ(*)は、詳細度に関係ない、
疑似クラス :not()は()内にあるセレクタは個数に加えますが、:not()自体は個数には加えない。

セレクタとその詳細度の例(降順)

セレクタ	詳細度
body div#wrapper	102
div#wrapper	101
#wrapper	100
p.subtitle	011
.subtitle	010
body h1	002
h1	001
*	000

詳細度を示す3桁の数値は、各桁がいくつになっても繰り上がらない。
詳細度が低くても!importantがつけば最優先。