【デイトラ-中級編】中級総復習編の反省
デイトラ中級編 中級総復習編にて自力でsabolon様サイトを作成しました。
最終的に動画を見て答え合わせを行い気づいた点、できていた点、反省点をまとめます。
出来たこと
- 環境設定の構築（notion活用）
- 構成の考え方が回答例とほぼ同様で作成が出来た
- cssの当て方についてもやり方が所々違っていたけれどほぼ同様の考え方が出来ていたように感じる
出来なかったこと
- HTML 最適要素の選択
header logo＝h1使用
メニューリスト＝リスト要素の使用
ブログsection=articleの使用 - css flex: 1;やflex-shrink,flex-growの使いどころがあいまいで最適化できていない
- css bodyへの全体適用する項目の選定が甘い
新しい知識
- padding、marginのinlite（両端）block（上下）の使用
- positionはこれからinsetにて使用
- line-heightについて
親要素で％指定されているとその要素のフォントサイズの％で計算され、子要素にも継承されてしまう。そのため全体に指定するのは1.7など単位なしとすることで都度その要素ごとのフォントサイズ×1.7とすることが出来る
- clip-pathの使用
動画内の説明を見ているとサクサク進んでいて簡単に思えるがいざ自分の頭で考えて作成してみると躓くところが多く時間がかかりました。
とにかくnotionなどでストックしたものの利便性を今回すごく感じました・・
最初から構成を作る力ももちろん後々大切になるとは感じていますが、form等については今はストックを活用して見直し＋カスタマイズで適応していって徐々に当たり前にしていきたいと思います。
１サイト作るごとにめきめきと成長しているのを感じられているので、次の最終課題もあきらめずに完成を目指し進めていきたいと思います。
今回はここまで(/・ω・)/お疲れさまでした。
10月の振り返り【デイトラを初めて2カ月】
こんにちわ。chimuです。
コーダーを目指し、2023年9月4日よりオンラインスクール デイトラ にてWEB制作の勉強を開始いたしました。
今回は10月も終わりということで、
・デイトラ課題初級編振り返り
・2カ月WEB制作に触れての感想
・今後の目標
について記録していきます。
2カ月たった成長をお時間あれば覗いてみていただけると嬉しいです♩
デイトラ課題初級編振り返り
出来たこと、良かったこと
- HTML、CSS、Sass、JavaSprict、Jqueryのつながりと基礎を理解できた
- サイトをゼロから作れる知識がついた
- コーディングの深さを知った
かければいい、作れればいいだけでなく、保守性や分かり易さ、書きやすさについて考えるきっかけがたくさんあった - 自分でも動きのあるサイトが作れたことが達成感として大きかった
- AIの進化と活用を学んだ
- ポートフォリオ作成へ進められた
- notionの活用を覚えた
出来なかったこと
今後の課題
- 11月5日までにポートフォリオを完成させる
- 色々なサイトを見て、作ってサイトの構成分けを感覚で身に着ける
- notionの活用を活発にしていく
- 中級編についても目標は1カ月とする
所感
- 自分のポートフォリオ作成まで終わりにできなかったが、無事初級編完了することが出来た。
- 1カ月のカリキュラムに2カ月かかってしまった。（ブログに時間を割いてしまうため）
- ブログを始めたことにより整理が出来、より深く知ることが出来た
- WEBサイトを作るための基礎を学ぶことができ、少しだけ自分もWEB制作者の世界へ片足踏み入れることが出来たと実感。
- 学んでいく中で「作れた！」で満足せず、今後の自分自身の制作に向けて必要な知識と情報をひたすらに貪欲にインプットして、アウトプットを続けながら身に着けていきたい。
2カ月WEB制作に触れての感想
2カ月前の自分と比べるとすごく大きな差が出来ていることを感じて、こんなに2カ月で「できている！」と実感することが出来るのか！と驚いています。
図書館やネット、プロゲートで調べながら勉強して挫折して「やっぱり自分には難しい、無理だよな～。事務経験しかないし、、」なんて自分に言い訳していた自分を2年ほど前位にもどって教えてあげたい・・・
そして、できることが増えるにつれ自分自身のやりたいこともどんどん明確になってきています。WEB制作をやりたい！の気持ちが大きくなっていくこと、ワクワクが増えること、とてもうれしい気持ちです。
独りよがりにならないよう、初心を忘れずにしながら、自分のしたいことをきちんと持って今後も取り組んでいきたいと思います。
今後の目標（全体）
- 中級編1カ月完走（目標12/1）
- ココナラやクラウドワークスの登録
- デザイン知識をつける（色、形 等）
- 求人の検索
まずは中級編の遂行に加え、クラウドソーシングの登録をして案件を取らないにせよ自分の今できる単価や価値を知っておく。
今後の就活に備え今からすき間時間には求人の検索やポートフォリオの充実をして備える。
次の中級編からは学んだことはnotionにまとめて、こちらは進捗を綴っていくようにしたいと思います。
まずは初級編お疲れさまでした＾＾
引き続き目標に向かって頑張ってまいります。
どうぞよろしくお願いいたします。
【初級編DAY24～25】自分のポートフォリオサイトを作ろう（準備〜headerまで）
これまでの学びを踏まえ、自分のポートフォリオを作成します。
ポートフォリオの作成において大切なことや必要なことを自分用メモとしてまとめておきます。
ポートフォリオとは？
■ポートフォリオとは■
自分のスキルや過去の実績を紹介する名刺代わりになるサイトのこと
ポートフォリオサイトの目的
≪目的≫
- 自分ができることを伝える
- 自分のスキルを伝える
- 自分の仕事に対する想いを伝える
- 自分の人柄を伝える
- 自分の実績を伝える
自分のことを相手に伝えるためのWebサイトだね！
ポートフォリオの構成
基本構成
- ファーストビュー（画像）、メッセージ
訪問者がサイトを開いたときに最初に目にするエリア。絶対に見てほしいことを伝える。 - わたしについて
自己紹介。出身地、共感ポイント、仕事に対する思いなど。さりげなく人間味を出すこと。 - できること
自分が価値を発揮できること。スキルはありのままを書くこと！ - 実績
出来ることの証明。説得力UP - お問い合わせ
れ楽しやすいように連絡方法を掲載。
追加おすすめ要素
- 問い合わせフォームの設置
- ファーストビューのお問い合わせボタン
- スキル一覧
- お客様へのメッセージ
- 価格表
- サイト制作のこだわり
- お客様の声
作るにあたって大切なこと
- 「訪問者に自分をどう見せたいか」を軸に文章や写真を選定していく
- 「見る人にとってどういった情報があったら嬉しいだろうか？」という観点で検討
以上を頭に入れてポートフォリオを作成していきましょう。
では次回より実際にポートフォリオの作成に入っていきます！
ポートフォリオ完成までは私のメモ代わりとなり、参考にはならないかと思われます・・どうぞご了承ください。
完成目指して頑張りましょう♫
【初級編DAY23】CSS設計の基本概念からクラスの付け方をイメージしよう
一通りCSSについて学んできましたが、CSSを書くにあたり効率的かつ管理しやすい形でCSSを作りたいですよね！
そのためにはどうしたら良いか？についてここでは学んでいきましょう。
CSS設計について
CSSには色々な書き方が有ります。それを効率的かつ管理しやすい形となるよう先人が体系化して共有してくれていたりします。それをCSS設計と呼んでいます。
以下よりそのCSS設計の重要な考え方を学んでいきます。
OOCSSについて
Object Oriented CSSの略。オブジェクトの指向。再利用でき無駄がないclassを設計する事。
「構造」と「見た目」の分離
■基本思想■
例
.btnでボタンの構造を指定
.btn-primaryや.btn-dangerなどで「見た目」を足す
まずは.btnでボタンの共通構造をCSSで設定し、その後見栄えだけを上書きの形で設定するためのcssを設定する。
HTMLで.btn と .btn-primaryを設定することで構造を保ちつつ、見栄えの身をその都度変更することでclassの再利用が可能となる。
メリット
- 共通部分クラスを作成することでコードの重複を防ぐ
- コード量を減らすことが出来る
- 共通化することで再利用の幅が増える
- 変更も簡単にできるクラスを作ることが出来る
「コンテナー」と「コンテンツ」の分離
■基本思想■
「コンテナー」と「コンテンツ」の分離してCSSを設計すること。特定のコンテナーに依存せず、使いまわしできるパーツ（コンテンツ）を用意すること。
※コンテナーとは：親（もしくは祖先）要素
例
.box内の.titleに対して
✖ .box .title {・・・
.box .list {・・・
〇 .title {・・・
.list {・・・
こうすることでbox以外の別のコンテナー要素となった時も使いまわしが可能となる。
メリット
- 要素に依存しない
- 使回しが可能
上記のことを踏まえると、SassでSCCを記述する際に注意が必要。
Sassでの記述の注意
例
.box {
.title {
/* ・・・ */
}
.list {
/* ・・・ */
}
}
⇒【CSS】「.box .title {・・」「.box .list {・・」
Sassで入れ子を使用し記述をすることでCSSでは「.box .title {・・」「.box .list {・・」と要素に依存する形で変換される。
そのため、Sassの入れ子を使う際はコンテナー（親要素や祖先要素）に依存しすぎていないかを注意して使う。
BEMについて【命名規則】
クラス名から影響範囲が分かりやすくするため、クラス名を付ける際のルール。
■BEMとは■
Block、Element、Modifierの略。CSS設計でおそらく一番有名。Blockは「使いまわしできる」パーツにあたる。
※OOCSSのコンテンツに近いが、BEMの場合は子要素も合わせて1パーツと捉えることが基本。
≪ざっくりとした考え方≫
Block
子要素を含めた1パーツ。使いまわしのできるパーツ。
Element
子要素に指定したクラス。
Modifier
Elementの見栄えを拡張するためのクラス。
Blockで指定したクラスに対して、子孫要素（Element）をアンダーバー2つ（__）で繋いでクラス名を決めていく。それから、見栄えを拡張するクラスとしてハイフン2つでクラスを加えることで見栄えを追加する考え方。
例
①Block
.card
②Element
.title .description .button などの子要素を指定。アンダーバー2つでつなぐ
- .card__title{・・・
- .card__description{・・・
- .card__button{・・・
③Modifier
先ほどの子要素に対し、見栄えの設定を追加するためのクラス。ハイフン2つでつなぐ。
- .card__button--primary { ・・・
- .card__button--secondary { ・・・
OOCSSの構造と見栄えの関係に似ているね！
クラス名を継ぎ足していくので、クラス名が長くなる傾向にあるが、下記のようなメリットがある。
メリット
- 影響範囲が予測しやすい
- 使いまわししやすい
アンダーバー2つで書かれていたら、BEMがベースになっているんだな、と捉えよう！
補足
ちなみにBEMにおけるハイフン（-）
単語の区切りを表す。
例）news-section__title → ニュースセクションのタイトル
参考サイト
SMACSSについて
■SMACSSとは■
ステート。状況を管理するためのクラスのつけ方。
「.is-active」など、条件に応じてクラス名を付与することで要素の状態を管理できる。
JavaSprictやjQueryで「要素をクリックしたときに〇〇をする」といった処理ができるようになる。
例
あるbuttonに対して
通常 .btn
クリック時 .btn.is-active
このように要素の状態に対してクラス名を付与する
命名規則としては、「is-」を接頭辞として先頭につけて、後ろに状態を表す言葉を付けるような形となる。
Sassでの記述のポイント
上記のように状態に対する見栄えの変化をする際は、通常の要素に紐づく形で指定することが多い。Sassだと＆を使用する。
例
.btn {
&.is-active {
/* .is-activeの状態の時の見栄え */
}
/* クラスと違いますが状態を表すもの */
&:hover {
/* マウスホバーした時の見栄え */
}
&:focus {
/* 要素がフォーカスされた時の見栄え */
}
}
このように記述をすることで、「.btn.is-active{・・・」というＣＳＳを設定することが可能。
Sassについての復習
まとめ
- 共通化クラスはまとめる
- 拡張クラスで見栄えの追加
- パーツは使いまわしできるように
- 影響範囲が予測可能なクラス名を設定
- 状態を管理クラス名の設定
様々なCSS設計がありますが、基本的にはOOCSSとBEMを押さえておけばOKです！
他の人から見ても、分かり易く編集がしやすいＣＳＳ設計を目指して学んでいきましょう♫
今日はここまで٩( ''ω'' )وお疲れ様でした。
【初級編DAY22】カフェLPのCSSをSassで書き直してみよう
Sassについて学んだところで、実際にコードを書いていくための準備をしましょう。
SassからCSSへコンパイルする
■コンパイルとは■
Sassそのままだとブラウザで読み込めない。Sassで書いた内容をCSSに変換する『コンパイル』という処理が必要となる。
※Webページの装飾はあくまでcssなので、「Sassファイル→cssファイルに変換→HTMLに読み込む」という作業をするよ！
Live Sass Compilerのインストール
Live Sass Compilerをインストールしましょう。Sassからsccへリアルタイムに変換、ファイルを自動作成してくれる便利な拡張機能です。
下記では、使うにあたって必要な設定をしていきます。
設定画面記述文
// Sassの出力方法の設定
"liveSassCompile.settings.formats": [
{
// expanded / compressed の2つから選択可
"format": "expanded",
// .css拡張子で出力
// すべての.scssファイルからの相対的な出力先のフォルダを指定
}
],
Sassの出力方法の設定
// expanded / compressed の2つから選択可
"format": "expanded",
出力形式・・・「expanded」「compressed」
expanded ：一般的な形に整えて出力。
compressed：圧縮して出力。
expanded ：一般的な形に整えて出力。
compressed：圧縮して出力。
今回は出力後のCSSで書いている内容が把握しやすい「expanded」で進めていきます。
拡張子
今回は圧縮しないので.cssの拡張子で進めていきます。
出力先フォルダ
// すべての.scssファイルからの相対的な出力先のフォルダを指定
保存時に自動的に変換・作成されたファイルがどこに格納されるかを示すための設定。
・ルートを起点とする・・・ ”/css”
・すべての.scssファイルを起点とする ・・・“../css”
どちらかとなる。
今回はより柔軟に対応できる「"savePath": "~/../css”」で進める。
メリット
・.scssファイルを格納するフォルダと.cssファイルを格納するフォルダを分けることがでる
・より管理しやすいフォルダ構成にすることができる
Autoprefixerによるベンダープレフィックスの設定
■Autoprefixerとは■
ブラウザの条件を指定することで該当のブラウザで機能するようにCSSプロパティに対して適切に付与してくれる機能のこと。
ここの設定は案件で担保が必要なブラウザの種類やバージョンに応じて柔軟に変更していくのが良い。
👇参考👇
除外するファイルの設定
コンパイルを設定するにあたり、除外するファイルを選択できます。
今回は記載しません。※調べてみよう！
ソースマップの無効化
// ソースマップの出力有無
"liveSassCompile.settings.generateMap": false
標準だとソースマップ（.css.mapという拡張子）が自動的に作成される。
これはデベロッパーツールなどから、CSSファイルの位置ではなくSassファイルの位置で示してくれるものとなる。
有効化していると、/css/フォルダに納品物とは関係のないファイルが出力されてしまう。
最初のうちは混乱すると思うので、今回は無効化しておきます。
Sassに慣れてきたらソースマップの役割についてもぜひ調べてみてみよう！
フォルダの構成
フォルダを作成するにあたり、下記のような構成となるよう今後心掛けていきましょう！
practice
┣ index.html
┣ css
┃ ┗ xxx.css（自動生成されるcssファイル）
┣ sass
┃ ┗ xxx.scss（記述していくscssファイル）
┣ js
┗ img
ファイル分割の方法（@useの使い方）
Sassには、アンダーバー ”_”から始まるファイル名を無視する特性が有る。
例
/sass/_button.scss・・・cssで出力されない
/sass/_heading.scss・・cssで出力されない
/sass/style.scss・・・_button.scssと_heading.scssを読み込むことでひとまとまりでcssに出力させることが出来る。
/sass/_button.scss・・・cssで出力されない
/sass/_heading.scss・・cssで出力されない
/sass/style.scss・・・_button.scssと_heading.scssを読み込むことでひとまとまりでcssに出力させることが出来る。
では@useを使って、button.scssとgeading.scssをstyle.scssに読み込んでいきましょう。
基本記述
@use "ファイル名";
※ファイル名はアンダーバー ”_”と「.scss」を除く。
/* style.scss内に記載 */
@use "button";
@use "heading";
こうすることで、役割によってファイルを分けて管理できるね！
@importについて
@importを色んなサイトで見かけることがあるかと思いますが、こちらは（使えるけど）非推奨。今後は使えなくする予定との公式から発表されています。
別ファイル内のmixin、変数を使う場合
先ほどの項目で@useで別ファイルが読み込めるのがわかりました。
その中で別ファイルで定義したmixinや変数をまとめ先のファイルで使うにはそのまま変数名、@includeでは使えないので、以下を覚えておきましょう。
分割ファイルで設定したmixinを呼び出す
@include 分割ファイル名.mixin名
分割ファイルで設定した変数を呼び出す
プロパティ名： 分割ファイル名.$変数名；
例
@use "header";
.button {
// mixinの呼び出し。先頭に@useで呼び出したファイル名（header）を記載
@include header.button();
// 変数の呼び出し。先頭に@useで呼び出したファイル名（header）を記載して使う
background-color: header.$main-color;
}
以上で Sassを読み込み、使用する準備が整いました！
実際にSassを使用してCSSを簡素化させてみましょう♫
では、今日はここまで٩( ''ω'' )وお疲れ様でした。
【初級編DAY21】CSSの上位互換！Sassを学習しよう
SassのSCSS文法について学んでいきます。
Sassとは？
■Sassとは■
CSSを拡張して扱いやすくしたスタイルシートのこと。Syntactically Awesome StyleSheetの略（直訳：文法的に素晴らしいスタイルシート）。CSSで記述するよりも圧倒的に早い。
※文法が二つある
SASS・・・インデントを主とした簡素な記法。セレクタやクラスの後に{ }を使わず、値の後の;を省略している。
SCSS・・・ネスト（入れ子）を主とした記法。スタイルの書き方はCSSとさほど変わらない。主流はこっち。
※文法が二つある
SASS・・・インデントを主とした簡素な記法。セレクタやクラスの後に{ }を使わず、値の後の;を省略している。
SCSS・・・ネスト（入れ子）を主とした記法。スタイルの書き方はCSSとさほど変わらない。主流はこっち。
入れ子の書き方
例 CSS
.lists {
list-style: none;
padding: 0;
margin: 0;
}
.lists li {
width: 25%;
text-align: center;
}
.lists li a {
color: #333;
font-size: 16px;
}
例 Sass
.lists {
list-style: none;
padding: 0;
margin: 0;
li{
width: 25%;
text-align: center;
a{
color: #333;
font-size: 16px;
}
}
}
クラス名.lists内にあるliタグ、その内にあるaタグにsccを当てる際の記述となる。
本来cssでliタグを指定する場合は「.lists li｛・・・」となり、またaタグについても「.lists li a｛・・・」となるところを、Sassでは中にタグをそのまま記述することで同様の処理となる。
子、孫要素の記述するのにcssよりもより簡単だといえる。
本来cssでliタグを指定する場合は「.lists li｛・・・」となり、またaタグについても「.lists li a｛・・・」となるところを、Sassでは中にタグをそのまま記述することで同様の処理となる。
子、孫要素の記述するのにcssよりもより簡単だといえる。
＆でつなげる擬似要素・クラスの書き方
＆でつなげることでこれまでの要素を継承することが可能です。
例 CSS
.lists li a:hover {
color: #da1e32;
}
.lists li a.active {
color: #da1e32;
}
例 Sass
.lists { ・・・親要素
li{・・・子要素
a{・・・孫要素
&:hover{ ・・・すべて継承し:hoverを付ける
color: #da1e32;
}
&.active{ ・・・すべて継承し.activeを付ける
color: #da1e32;
}
}
}
}
変数を使ってみよう
これまでJavaSprictなどでは変数を使用していたが、cssでは変数という概念がなかった。Sassでは変数を使用することが出来る。変数を使用することで、同じことを記述しなくていいなどのメリットがある。
■基本の記述■
＄変数名： 値；
例 Sass
$link-color-active: #da1e32;
li{
color: $link-color-active;
}
例 CSS
li {
color: #da1e32;
}
変数link-color-activeに #da1e32 を格納した。
実際に使用するときに、使いたいところに変数を入れることで同様の値が反映されているのがわかる。
変数を使用することでテーマカラーを変える際などに一つ一つを修正する必要がなくなり、保守性が高くなる。
変数をつかった四則演算
変数を使用して四則演算が可能となります。下記は一部のフォントを変数＋10pxとしていた時の例です。
例 Sass
例 CSS
a {
color: #333;
font-size: 24px;
}
変数＋値とすることで計算をしてくれました。四則演算が可能だということを覚えておきましょう♫
定義したスタイルを使いまわそう
@extendの使い方
@extendを使用することで一度定義したスタイルを使いまわすことが可能。
■基本記述■
定義する：通常通りクラス名でスタイル作成。
呼び出し：@expend クラス名;
呼び出し：@expend クラス名;
例 Sass
.button {
color: #333;
font-size: 16px;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
a{
font-size: $link-font-size + 10px;
@extend.button;
}
例 CSS
.button, .lists li a {
color: #333;
font-size: 16px;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
.buttonのスタイルが@extendを使用することで .lists li a タグにも使いまわすことが出来たね！
@mixinの使い方
@mixinは引数を設定することが出来、スタイルをひきつぎながら引数を使用して一部の変更が可能となる。
基本記述■
定義する：@mixin クラス名（引数：初期値）
呼び出す：@include クラス名（引数）
定義したものは呼び出さないと反映されないよ。
呼び出す：@include クラス名（引数）
定義したものは呼び出さないと反映されないよ。
例 Sass
@mixin button ( $font-size ) {
color: #333;
font-size: $font-size;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
a{
@include button( 14px );
}
例 CSS
.lists li a {
color: #333;
font-size: 14px;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
- @mixin で クラスbuttonを定義。その際に変数$font-sizeを引数として設定する。
- buttonスタイル内で引数に該当する値に$font-size;を入れておく
- 別のタグ、クラスにてbuttonのスタイルを使用したいときに、@includ クラス名(引数に当てる値);を入れる
- 引数に該当する箇所が変更され適用される。
aタグはfontsize14px、別のクラスは16px、ほかのスタイルは一緒・・・としたいときに便利だね！
@extendと@mixinの違い
@extend：作られたクラスの使い回しが可能。
@mixin ：作られたクラスで引数が設定でき、一部変更が可能の型。
@mixinを使ったメディアクエリの設定方法
マップ型の変数で定義をし、ブレイクポイントを設定する。
■マップ型変数とは？■
他にもいろいろな型がある。
👇こちらのサイト様がとても分かり易く勉強をさせて頂きました。👇
まずは実際のコードを見てみましょう♫
例 Sass
例 CSS
.header {
height: 100px;
}
@media screen and (max-width: 767px) {
.header {
height: 60px;
}
}
解説（Sass）
マップ型変数でブレイクポイントの定義
$breakpoints: (
) !default;
- マップ型変数を使用する 変数$breakpoints
- 変数に格納するデータを記載する。（key：value）
key →"sp","pc"
value→"screen and (max-width: 767px)","screen and (min-width: 768px)"
もっと細かく分けることも可能 - !default;を設定
■!default;とは？■
変数を宣言する際に「!default」を付けると、その変数が既に定義されていない場合にのみ、その値が代入されます。つまり、既存の値がない場合にのみ変数に値を設定するということです。
👇コチラのサイト様を参考にさせて頂きました。ありがとうございます。👇
@mixinで変数mq（メディアクエリ）を定義し呼び出した際に使える状態へ
/* @mixinを使用し、メディアクエリに使用する@mixinを定義。 */
/* ($breakpoint: sp) とすることで初期値をspに設定 */
@mixin mq($breakpoint: sp) {
/* map-get(マップ型変数, キー)で値を取得 */
@media #{map-get($breakpoints, $breakpoint)} {
/* この中をカスタマイズできる */
@content;
}
}
- @mixinを使用して定義
・変数 mq（略：メディアクエリ）
・引数 新しい変数$breakpointを設定し、初期値keyを"sp"としている。 - css @media screen and (max-width: 767px) {
と同様の記述文になるよう引数や変数の割り当てをする。
ここでのポイント
#{}について
インターポレーションという。
通常変数に入った文字列は値として認識されてエラーが出てしまう。
そのため文字列をセレクタやプロパティ名にも使うことができるようにするための記号。
👇こちらのサイト様を参考にさせて頂きました。ありがとうございます。👇
map-getについて
基本記述 map-get($map,$key)
$mapの中から$keyに対応した値を取得します。
上記が理解できると、下記のようになります。
@media #{map-get($breakpoints, $breakpoint)} {
・#{ ・・・ 文字をそのまま表示してね「例screen and (max-width: 767px)」
・map-get ・・・ 右に記載する$MAP変数の中から、$KEYに対応した値を取得してね
・($breakpoints, $breakpoint)・・・$MAP=変数$breakpoints、$KEY=引数$breakpoint
※ $breakpointは呼び出す際に設定されたKEYで１で設定した該当の内容が取得される。 - @content;
呼び出した際に記述した内容がここに反映される。引き継がれる。
使い方
【初級編DAY20】【調べながら実装しよう】jQuery実践課題②
前回に引き続きjQueryの実践を行っていきます。
本日の課題
■モーダルでの画像の拡大表示■
- メニュー一覧の画像をクリックすると縦横画面いっぱいに薄いグレーの背景ボックスを表示
- その枠の中心に拡大されたメニュー写真を表示
- 画面のどこかをクリックすると拡大写真と背景ボックスを非表示
- アニメーションはフェードイン・フェードアウト
- メニューの拡大表示中は記事のスクロールが出来ないよう設定
※こちらは課題にはありませんでしたが、実装した際に必要に感じたため追加しています！
では実際に実装していきます。
下記はコードの記録と反省および追加で覚えておきたいことをメモします。
≪HTML≫
まとめ※一部省略
<h3 class="menu-list-img">
<img src="〇〇〇" class="js-modal" alt="おすすめ" />
</h3>
<h3 class="menu-list-img">
<img src="〇〇〇" class="js-modal" alt="新発売" />
</h3>
<h3 class="menu-list-img">
<img src="〇〇〇 class="js-modal" alt="おすすめ②" />
</h3>
<div id="gray-display"></div>
- imgタグにクラス名を追加
- 画像をクリックした際に表示される背景グレーを作成するためにDiv #gray-displayを追加
≪CSS≫
まとめ
/* モーダル */
#gray-display{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(100, 100, 100, 0.8);
display: none;
}
#gray-display img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 90%;
max-height: 90%;
}
.is-active{
overflow: hidden;
}
@media screen and (min-width: 768px) {
#gray-display img{
max-width: 30%;
}
- #gray-display
- 画面いっぱいに表示（width,heightを100％）させ、画像を浮かせて固定する（display fixed）
- 背景色の指定
- 通常最初は表示されないので、非表示に
- #gray-display img（id #gray-display 内のimgタグに適用）
- 画像位置の固定。今回が画面に合わせて変化するので親要素からの位置は０で、ほかで指定をしている
- 表示画像の大きさを90％に（max-width、max-height）ここで画像の大きさを調整できる
- marginで画像の余白を調整することで真ん中に配置される
- .is-active
#gray-displayが開いたときに、Bodyのスクロールが行えないようにするため、overflow: hidden;で制御している。htmlに初期設定はついていないが、jQuery内で突け外しをする。 - レスポンシブ対応
表示される画像が大きすぎたためmax-width: 30%;へ変更
反省点
- #gray-displayにてbackground-colorでグレーに、opacityで透明化させたら表示させるimgまで透過されてしまった。background-colorでrgbaにて設定したところ背景のみ透過された。opacityは設定することですべてに適用されてしまい、逆にbackground-colorで設定した場合は背景のみが透過となる違いを覚えておく。
覚えておきたいこと
■スクロールの制御■
復習（position fixedとabsoluteについて）
≪jQuery≫
まとめ
// モーダル
});
});
- .js-modal画像をクリックした際の処理
- #gray-displayのHTMLに.js-modalのHTML情報propを使用し取得、追加
<div id="gray-display"><img src="〇〇〇" class="js-modal" alt="おすすめ" /></div> - #gray-displayをフェードインで表示
- Bodyタグにclass.is-activeを追加する
- #gray-displayのHTMLに.js-modalのHTML情報propを使用し取得、追加
- 開いた画像の#gray-display,#gray-display imgをクリックした際の処理
- #gray-displayをフェードアウトで非表示
- Bodyタグのclass.is-activeを削除する
覚えておきたいこと
■.prop(‘outerHTML’)■
👇こちらのサイトを参考にさせていただきました。ありがとうございます。👇
完成
無事実装が出来ました！
ここまででjQueryの実践課題を終了します٩( ''ω'' )و
これからコードを書くに当たって
- 調べる力を身につける
- コードのストックを作る（Notionがおすすめ）
- アニメーションの引き出しを増やす
- ググってみて、ソースコードの読解
- テンプレートの購入
- codepenの使用
経験を増やしながらストックも増やす術も同時に学んでいきたいですね！
今日はここまで！お疲れさまでした♫
