セレクタについて

progateのサイト模写をしていて気づいたこと…

<section class=”main”>
<div class=”mainvisual-wrapper”>
     
</div>

というHTMLのコードを書いていました。
一方、CSSでは
section .main .mainvisual-wrapper {
    background-color: black;
}を指定して動かしてみたのですが…動かない…

理由を探してもわからず、先生に教えていただき気付いた点が
1、section.main .mainvisual-wrapper
2、section .main .mainvisual-wrapper

この違い分かりますか?
答えは、sectionとmainの間に半角スペースが存在している点です!

これだけで意味が大きく異なります。
1、CSS
  section.main .mainvisual-wrapper{
    background-color: black;
}
 先生に教えていただいたところ
section.main .mainvisual-wrapperはmainがついているsectionタグの配下のmainvisual-wrapperです  
sectionタグに付与されているclass名が.mainの配下にある(タグはなんでもいい)class名mainvisual-wrapperとなる。
    
2、CSS
section .main .mainvisual-wrapper{
    background-color: black;
}
 この場合は、sectionの下の.mainの下の.mainvisual-wrapperだったので
 この場合は、下記のHTMLコードには当てはまらないので、黒色の線が入りません。

<section class=”main”>←※ここの意味「sectionタグのclass名にmainがついているということ」
<div class=”mainvisual-wrapper”>
     
</div>


つまり、今回つまづいたCSS指定は
sectionの下のmainの下のmainvisual-wrapperだったので
当然そのようなものがないのでスタイルは無効。mainの配下のmainvisual-wrapperならあるので有効だったということです

と先生に教えていただき( ゚Д゚)でした。

以上です。

もりけん塾 https://terracetech.jp/ourvalue/morikenjuku/
もりけん先生ブログ https://terracetech.jp/

お疲れ様です!!

最近、勉強より、ツイッター見てる時間長いかもと感じるこのごろです。

今日は、box-sizing:border-boxについて記述したいと思います。(うまく説明できるかな?…)
まず、要素を囲むのは内側から順に、コンテンツ➡padding➡border➡marginという順番で構成されてます。

うーん。この辺も図があるといいですね…

ここからが本題です。
box-sizingのいいところ
1、要素からどうしてもpaddingがはみ出るときに使える。
2、線がはみ出てしまうときに使える。
  

・何も設定しない場合(デフォルト値)は、content-boxです。
・border-boxは、横幅や高さにpaddingを含めると覚えればOKです。
 つまり、デフォルト値で、widthを設定したら、paddingはwidthは入らない。
 しかし、border-boxにするとpaddingを含めることができます。

じゃあ、これでどう変わるの?と思われると思いますが、
1、widthの指定を500pxにしたとき、paddingを指定したら、paddingは500pxの中に入らない。つまり、width500pxの外にはみ出ます。

2、自分が難しかったのは、上記の場合、width,border,paddingが100%を超えていて、要素が100%になればいいんだったら、 width,border,paddingを100%になるようにすればいいのでは?と思ったのだが、実際はborderには%を指定できないのでした!!

ちなみに、borderなんて使うことあるんかいと思っておりましたが、文字を強調するとき文字を四角で囲みますよね…そういえば、border-○○のプロパティで太さ調整していたことすっかり忘れてました(笑)
それを考えたら、borderには%使えないのも納得ですな(`・∀・´)エッヘン

細かい事が多すぎ、ケイン・コスギ。

以上です。

もりけん塾 https://terracetech.jp/ourvalue/morikenjuku/
もりけん先生https://terracetech.jp/

更新遅れてしまった…box-shadow,margin,padding、flexについて

2日に1回ブログを更新しようと決めたのに今回、3日になってしまった。

今日は、progateの上級編の模写をやってました!!
なかなかの具合で進んでおります(笑)
勉強したこととしては、
1、box-shadowの使い方
2、margin,paddingの使い方
3、またもや、flexについて…

1、については
box-shadowについては、
box-shadow:水平方向の影,垂直方向の影,ぼかしの距離,広がりの距離,色の指定,(insetを入れるかどうか);
 水平方向では、正の値が右へ、負の値が左へ
 垂直方向では、正の値が下へ、負の値が上へ
 ぼかしの距離については、負の値はなく、0に近づくほどくっきりとする
 広がりの距離については、正の値では影の形状を全方向へ、負の値では縮小する。
 色の指定はそのまま
 insetは、外側の影から内側の影へ変える

2、については
marginは、まだ確認中だが、position:fixed;を使えば、下にもぐった要素は、margin-topでずらすこと。※ただし、fixedを指定したものにグローバルナビゲーションであればtop:0;left:0;を入れること。

paddingについては、要素内を狭くするときにも使用できる。
今回、flexを用いた時、子要素の横幅がばらばらだった。ので親要素にpaddingを使って全体を小さくして無理やり?均等にした。

3、については
flexは横に均等に並べるときに、すごく便利だが、子要素にmarginを指定していたらうまくいかないことがある。と分かった。

今日は以上です。
もりけん塾https://terracetech.jp/ourvalue/morikenjuku/
もりけん先生https://terracetech.jp/

display:flexbox;、display:fixed;について

1、flexboxの使い方 2、fixedの使い方を勉強しました。備忘録です。

1、flexboxの利点について

✅ナビゲーションは、float,inlineを使わなくてもflexboxで楽にできること。
  細かいことは今回抜きにしていきます。

✅align-itemsで要素の高さを設定しなくても調整してくれる。
  設定値
 ・stretch: 1番大きい要素に合わせて高さ調整
 ・flex-start: 上ぞろえで配置
 ・flex-end: 下ぞろえで配置
 ・center: 中央ぞろえで配置

✅justify-contentで横の並びを調整
 ・flex-start      左揃え
 ・flex-end      右揃え
 ・center       中央ぞろえ
 ・space-between   最初と最後のコンテンツを端に配置して残りを等間隔に並べる
 ・space-around すべての要素を均等に並べる

✅flex-directionで要素をどの順番に並べるか(要素を左から1,2,3と並べるか右から1、2、3と並べるか)図が欲しいな...😨
 ・row:左から右の順に     図で表したら1,2,3
 ・reverse-row:右から左の順に           3,2、1
                            
 ・column:上から下の順に         
 ・reverse-column:下から上の順に

✅flex-wrapで折り返して表示できるようになる
 ・no-wrap:子要素を折り返さず表示する。
 ・wrap:子要素を折り返し、上から下の順で配置する。
 ・wrap-reverse:子要素を折り返し、下から上の順で配置する。

✅複数行の揃えを変更するのは、align-content 
 ・stretch:親の高さに合わせて、綺麗に合わせて幅を調整してくれる。
 ・flex-start:親に合わせて上揃えにしてくれる。
 ・flex-end:親に合わせて下揃えにしてくれる。
 ・center: 親要素の中央に合わせる。
 ・space-between:最初の要素と最後の要素を親要素の一番端に配置し、それ以外の要素はバランスよく配置する。
 ・space-around:すべての要素を均等に配置する。

参考 侍ブログhttps://www.sejuku.net/blog/56401

✅flexboxは、横に並べるナビゲーションにも使える。
 ・HTMLコード
<ul>
    <li>1番目の要素</li>
    <li>2番目の要素</li>
    <li>3番目の要素</li>
</ul> 
 
 ・CSSコード   Web上の表示は⇩となる。
  display: flex;  1番目の要素 2番目の要素 3番目の要素
    justify-content: center;
    align-items: center;
    height: 200px;

中央寄せは、並列の場合の左右方向はjustify-content: center;で、
上下方向はalign-items: center;
で指定します。

参考:mamewaza.com https://mamewaza.com/support/blog/howto-use-flex.html

2、fixedについて
✅fixedはホームページでグローバルナビゲーションに使用される。
これの使い方がなかなか難しかった。
親要素をfixedにし、固定しても直下の要素がfixedに指定した要素の下にくるので、それを回避しようとして、直下の要素にmargin-topを入れてもホームページ上に空白ができ、ナビゲーションも一緒に下に下がってしまう。
 この理由としては、ナビゲーションの親がfixedで固定されている。fixedは表示されている画面にずっと固定されているため、margin-topで直下の要素を下にずらそうとしても

解決方法は、
 CSS
  position: fixed; /* 要素の位置を固定する */
  top: 0; /* 基準の位置を画面の一番上に指定する */
  left: 0; /* 基準の位置を画面の一番左に指定する */
  margin: 0; /* 要素の余白を0にする */
これは、段落の余白をなし「0」に設定すると、ウインドウをスクロールしてもタイトルは一番上に固定された。

ナビゲーションがはみ出したりしていますが...
こういう感じにしたかったのです...
先生に聞いてきます。

これは、コード見てもらわないといけないのかもしれないけど...こんな感じで進めてます。

参考proengineerhttps://proengineer.internous.co.jp/content/columnfeature/12366

いつものこと…

昨日から頭痛で動けていません。時期が時期だけになにもないことを祈ります。
さらに、花粉症のダブルパンチ!!!!
はっきり言ってしんどいよね…これは…

少し勉強の話をしようかなと思います…
現在、JSを勉強しています。以前、職業訓練校で軽く教わっていたので、理解はしやすいかなと思います。
数学は等しいものは、[=]を使いますが、プログラミングでは[=]は代入です。
と聞いた時の「”(-“”-)”?????」(笑)

数学の場合、まずb=a+1の場合、左辺(b)、右辺(a+1)が等しいという意味になります。

では、プログラミングの世界はというと、
少し、式が変わりますが…
a=a+1は、aというもともとあったものに、1を加えてaに代入するということです。
“(-“”-)”??????ですね。
実際、自分も理解するまでに時間がかかりました。
これは、プログラミングを勉強する上で大事でした。(一時、飛ばして勉強してたら崎井に進まず、JSの勉強辞めました。(笑))
余談はこのくらいにして、自分なりの解釈をすると、
数学の[=]は、右辺と左辺が等しいということ。
プログラミングの[=]は、右辺を左辺に入れるということ。

難しいですね…自分も今、頭の中では、こうだと思っているけど、なかなか難しい。
結論、手を動かしてプログラミングをしてやってみないとわかりませんでした。(笑)

以上です。

みなさん、風邪、花粉症には気を付けましょう。手洗い、うがい大事です。

もりけん塾 https://terracetech.jp/ourvalue/morikenjuku/
森田先生https://kenjimorita.jp/

JSについて続き…

昨日、JSについて書いた記事で、jQueryは重くなるという理由を書きましたが、教えていただいている先生の方から、どのライブラリでも同じ現象が起きる様です。

ライブラリ…汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの

先生としては、
そのようなライブラリを使うとき必ずみるところは
・最終リリースはいつか(メンテナンスされているか)
・スター数(信用度)
・issue。(こちらの開発の要件を満たせるか )などを見るそうです。( ゚Д゚)

issueについては、再度確認します。

これらのことから、自分としては、
1、jqueryはJSでつくられていること。
2、先生の記事(https://terracetech.jp/2020/02/29/onmorejquery/jquery)を読み自分でJSを使ってjQueryを作れるようになりたいなと思うようになってきました!
3、他人が作ったコードを使うより、自分で作ったほうがたのしいですしね!

なので、JSの勉強頑張ります!!!

この記事は以上です。
もりけん塾:https://t.co/87LmFxhdZS?amp=1
もりた先生のサイト:https://kenjimorita.jp

JSについて

フロントエンドエンジニアについて、jqueryを先日まで勉強していましたが、実際のエンジニアの方に聞いたこととして、jqueryよりJSを使うべし。

1番、考えるところだったのが、jqueryはJSで作られていること。勉強するならTypeScript、React、Angular、Vue等)を学ぶべきというところでした。

しかし、jqueryを使用しているWEB会社は、多いようです。笑

ここからは、自分が調べたところですが、理由としては、使用しやすいこと。いろんな種類の動的動作があること。などがあるそうです。

しかし、jqueryにも欠点があった。あまりに多用したりすると動作が重くなったりすることがわかった。

なので、今後は、JSをメインに勉強します!