侍エンジニア塾 36日目 8/2 2020 (6回目レッスン)
今回の記事はインストラクターさんとの6回目レッスンだったので、ございます。
(時間が無い方は最後のまとめをご覧になってで、ございます。)
課題のwebページ作成は半分しかできませんが、今回の授業では検証作業によるwebページの要素の確認により時間を使う事が出来て今後の作業に役に立つ様な内容でした。そして、いきなりJavaScript(以下JS)は難しいという事でJQueryから教えて頂く事になりました。
検証作業を使いながらcssでの要素の位置の調整を行っていきました⬇️。右画面のボックスと左のwebページが同調しており、右のボックスモデルにmargin・border・paddingの幅の数値が各領域の色分けと共に表示されて、それぞれの領域の色が左のページにも出てくれるので、分かりやすいです。
⬆️これを基に要素の位置の微調整を行い、この場合は画像を好きな位置に移動させるわけです。⬇️のボックスモデルによると、1つの画像が20%で、4枚なので合計80%となり、20%余る。そのうち、半分を左側に当てると10%となり、左右に10%当てると中央による.mainの方で80pxのpaddingをとっているので、半分の40pxで真ん中と設定しました➡️。.center
margin-left:calc(10% + 40px); paddingとwidthのサイズの半分の値を基本使う＆+-は両側にスペース必須
しかしながら、今回の要素はほとんど同じサイズで4つの画像と文章のセットでしたので、単純にfloat: left; width: 25%;と書きました。実際これだけでバランス良く並んでくれました⬇️。前述のcalcの書式についてはまだまだ理解が乏しいので、より勉強していこうと思います。（因みに自分のインストラクターさんは⬇️の画像の左から二番目のハッピーおじさんに激似です。画像のチョイスはたまたまです 笑。）
HTMLとCSSの学習中に画像や動画などを画面サイズに合わせて自動でサイズを維持するコードを使う事が出来てはいたのですが、文字の自動調整はJSでしか出来ないと一度断言されました。今回のJQueryの触りのレッスンでは、そのコードの書式の一例を見られて、今までのモヤモヤが少し解消されてとても参考になりました。因みにJQを書き出すにはHTMLにCSSを書き出す時にstylesheetを読み込まなければならないのと同じ様にHTML内に<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>と書いて外部のライブラリの読み込みをしなければJSのエディターが読み込まないのは知らなかったです(このソースコードは一例で他のオープンソースも沢山あります)。その上でJQのコードを書く事になります⬇️。
$(window).resize(function () { var wi = $(window).width();
$(".copy-container h1").css("font-size", `${wi / 15}px`);
});
var wi = $(window).width();
$(".copy-container h1").css("font-size", `${wi / 15}px`);
⬆️今回は文字サイズの自動調整の書式でしたが、HTML&CSSと違い過ぎて意味不明でした 笑。何とかタグの幾つかは理解していますがそれ以外の関数の仕組みはほぼさっぱりです 泣。来週の課題として、JSとJQのサンプルコードも頂いたので何とかやっていきます。
それと、今までずーと気になっていたレッスン中に頻繁に聞こえる美少女ボイスがインストラクターさんの着メロだったと知って、以後は鳴らない様にして貰える様で助かりました。今回か月末だったので侍の恒例の学習アンケートにすらその事を書いて報告した位です(侍からは後日対応するとの報告が来てありがたかったです。インストラクターさんには伝えた後だったので2度注意を受けるという事に少し申し訳なくは思いましたが、ははは)。自分も美少女ボイスは好きですが、レッスン中はかなり集中力が途切れる原因だったので助かりました。
まとめ
１、検証のボックスモデルは使える
２、JavaScriptとJQueryはHTML&CSSと違い計算的な書式になる
３、インストラクターさんにはレッスン中に気になる事があれば些細な事でも時間を最大限有効活用する為に伝える