エル×WEB制作・デザイン勉強中！
学習記録です。
scssの学習メモ
Block ・・・ コンテンツの単位となる塊 Element ... コンテンツを構成する要素（これ自体は単体で動作しないし、コンポーネントにならない） __でBlock名の後につなぐ Modifier ・・・コンテンツのあしらいを変えた別パターンの定義 --でElement名の後につなげる BEMでBlockを作る際に意識すること 子要素だからといって、なんでもかんでもElementにするのではなく、親のBlockを起点に考えたときに、本当に直近の親はそのBlockで
SCSSの構造 各ファイルについてcomponent 共通パーツを格納 今回はbutton/heading global 変数(color/font-family/breakpoints )やmixin project 各セクション等毎のSCSS utility スタイルの上書きや便利パーツ ex. pc時のdisplay:none; 扱い方・_〇〇.scssは@use"〇〇"で呼び出すことができる。 ・ファイルに_index.scssを作成し、ファイル
とりあえずで自分で考えた内容↓↓ 調べたら違う構造が出てきたからこれは【仮】 SCSS構造 SCSS ー style.scss ー page ー_header.scss ー setting ー_color.scss ー_font.scss ー_breakpoints.scss ポイント ・まずstyle.scssですべ
質問テンプレート 詰まっている箇所（〇〇編DAY〇〇） 聞きたいことの一行まとめ 起きている問題（起きている現象の詳細/エラーメッセージ/スクリーンショット） ソースコード（関連するソースコード/全ソースコード） 問題解決するために試したこと（コードもあれば追記） 問題について自分なりに考えたこと（デバッグ結果/検索結果/自分なりの原因予想） ディスコードの使い方 対象の質問部屋からメッセージを送信する。 送信するときは担当メンタースケジュールを確認し、担当メ
実装の手順 ①：swiperのサイトからCDNをコピーぺする https://swiperjs.com/get-started CSSタグは自身で設定したreset.css style.cssの上に記述 scriptタグは自身で設定したscriptタグの上に記述 （swiperはJQueryに依存していないので、JQueryのscriptの上下どちらでも大丈夫！） ②：HTML と jsのコードをコピペする ③：②のHTMLにデザインに合わせてHTMLを追加、クラス追加し、
形容詞名詞の性質や状態を修飾する品詞。「〜の」「〜な」。 main - 主要な。 primary - 主要な。 secondary - 補助的な・第二の。 tertiary - 第三の。 quaternary - 第四の。 common - 共通の。 global - 全体的な。 local - 局所的な。 general - 一般的な。 brand - ブランドの。 site - サイトの。 分類サイトのページやカテゴリとして使える名詞。 abo
ホバーしたら画像が少し拡大するようなアニメーション p a{ overflow:hidden; }p a img:hover{ transform:scale(1.3); transition:0.5s linear;} まず、overflow:hidden;で拡大したときにはみ出た画像を表示させないようにする。 あとはtransform:scale(1.3);でホバーした時にどれくらい拡大するのか指定。 scale(1)は1倍なのでそのままのサイズ、scale(2)は2
sectionタグの使い方基本、見出し（h1～h6）とコンテンツがある場合に使用する 単独の記事の場合はarticle メインコンテンツの付帯情報ではあるがメインコンテンツでない場合はaside スタイル付けのためのラッパーの場合はdivを使用 アコーディオンをHTMLタグで作るdetailsというタグで囲い、 その中の summaryタグ部分をクリックすることで summary以下 の部分が開閉される。 デフォルトで▼がついている。 開いている時はopen属性がついて、閉
確認するサイズ最大サイズ：1920px 最小サイズ：320px どこまで担保するか確認は必要 innerの指定max-width ・広げた時にめいっぱい広がってほしい時 max-width:100% ・広げた時に指定した余白分(ex. 15px)を残して広がってほしい時 max-width:calc(100% - 15px * 2 ) ・最大コンテンツ幅(ex. 1280px)を指定する時 max-width:1280px ・最大コンテンツ幅(ex. 1280px
header__nav等、固定する時のプロパティー 中央配置したい時 margin-left:auto,margin-right:autoは効かない！！ .クラス名{ position: fixed; margin: auto; top: 0; bottom: 0; right: 0; left: 0;} または .クラス名{ position: fixed; inset: 0; margin: auto;} を記述する。 対象のサイズが決ま
:nth-child タグや属性を問わずすべての兄弟要素のn番目 指定する場所は子要素。 ここでは「『text』クラスが付いた2番目の要素」ではなく、 ・.nth-child_testの2番目の子要素であり ・「text」クラスがついている 要素を指定している :nth-of-type 同じタグをもつn番目の要素を指す (より細かく指定） 指定する場所は子要素。 HTML内で「text」クラスをもつ 「2つ目のdiv」と「2つ目のp」にスタイルが当た
Alt + Tab - Tab キーを複数回押しながら開いているアプリを切り替えます Alt + D - アドレス バーを選択します Windows キー + E - エクスプローラーを開きます。 Windows キー + D- エクスプローラーを閉じる。 Windows キー + S- タスクバーで検索 Ctrl + Tab - 開いているウィンドウを移動します。 Ctrl + T 新しいタブを開く Ctrl + W 開いているウインドウを削除する Ctrl +S
aタグ inline要素 まずdisplay:block または display;inline-blockを設定し paddingやwidth等が効くように変更する aタグの中には、aタグ・buttonタグ以外のいろんなタグを入れることができる。入れたものはすべてリンクにとぶ ちなみに今までの学習では navのaタグはaタグのみ 他のaタグはdivで囲み、divでmarginを指定aタグでpaddingを指定している aタグでとべるリンク ページ内リンク idを指
display: grid 要素をグリッドコンテナに指定することにより、子要素をグリッドレイアウトで配置できるようになる。 grid-template-columns:repeat(3, 1fr); grid-template-columns：1fr 1fr 1fr；と同じ意味になる。 repeat（繰り返す回数、繰り返す値） この記述では、要素を3列に分け、各列がコンテナ内の利用可能なスペースを均等に占めるデザインを作成 ・repeat(3, 1fr): 3列を作成し
