全くの未経験からエンジニアを目指す！ ３ヶ月で学んだことの整理


<!DOCTYPE html>
<html lang="ja">
<body>
    <h1>はじめまして Sayuです！</h1>
    <p>この記事の内容</p>
    <ul>
        <li><a href="#1">自己紹介</a></li>
        <li><a href="#2">Qiitaを始めた理由</a></li>
        <li><a href="#3">３か月で学んだこと一覧</a></li>
        <li><a href="#4">現状の課題</a></li>
    </ul>
    <div>
        <h2 id="1">自己紹介</h2>
        <table>
            <tbody>
                <tr>
                    <th>名前</th>
                    <td>Sayu</td>
                </tr>
                <tr>
                    <th>性別</th>
                    <td>女性</td>
                </tr>
                <tr>
                    <th>年齢</th>
                    <td>34歳</td>
                </tr>
                <tr>
                    <th>居住地</th>
                    <td>神奈川県</td>
                </tr>
                <tr>
                    <th>プログラミング経験</th>
                    <td>約３か月</td>
                </tr>
                <tr>
                    <th>現職</th>
                    <td>エンジニアとは名ばかりの携帯販売員</td>
                </tr>
                <tr>
                    <th>経験職種</th>
                    <td>看護師、コールセンターオペレーター、ヨガ講師、塾講師.etc</td>
                </tr>
                <tr>
                    <th>愛猫の種類</th>
                    <td>ヒマラヤン（♂）</td>
                </tr>
                <tr>
                    <th>哲学</th>
                    <td>インドの聖地から伝わる愛のヨーガの生き方</td>
                </tr>
            </tbody>
        </table>
        <p>
            はじめまして！もしゃねこです(=^・・^=)<br>
            全くの未経験からエンジニアを目指して勉強し始めた34歳です。<br>
            看護師の国家資格を得て就職したものの、紆余曲折あって看護師を辞し、数年道に迷った後に出逢ったのがヨガでした。<br>
            ヨガの道に進もう、ヨガを仕事にしようと決めてヨガの会社に就職しましたが、脊椎関係の難病を発症し、泣く泣く辞職することに。<br>
            体の痛みでベッドから起きらず、仕事をするのはもちろんのこと、普通に日常生活を送ることもできない日々が続きました。<br>
            薬で痛みをある程度コントロールできるようになりましたが、「この先私はどう生きていったらいいのか」と悩みました。<br>
            今の私にとって、リモートワークができてある程度自由に仕事ができるスタイルが、体の負担が少ないように調整できるため理想でした。<br>
            かつ、今後伸びていく業界、手に職をつけられる業種を考えた時に、ITエンジニアを目指すことに決めました。<br>
            転職サイトで検索し、「ITエンジニア(未経験歓迎！)」と記載のある会社に片っ端から応募し、44社に応募してやっと内定をもらった会社に転職。<br>
            ところが、その会社では何の教育もしてもらえず、携帯販売員として派遣され、難病を申告しているにも関わらず、立ち仕事をさせられることになりました。<br>
            病状もどんどん悪化していったためこれではまずいと思い、転職活動も再開しながら、会社に頼らず勉強を始めることにしました。<br>
            こうしてプログラミングスクールの受講申し込みをし、一から学び始めて、約３か月になります。
        </p>
    </div>
    <div>
        <h2 id="2">Qiitaを始めた理由</h2>
        <p>
            プログラミングスクールを受講し始めて約３か月。<br>
            HTML、CSS、Bootstrap、JQuery、Javascript、Wordpressをさらっと学びました。<br>
            ここで、ポートフォリオを作ってみようと講師から提案があり、取り掛かることになったのですが、<strong>何をどうしたらいいかさっぱり分からず…</strong>。<br>
            自分は何ができるのか、何をどうアピールできるのか正直よく分からない。<br>
            それもそのはず、スクールの受講といっても動画を見て、そのコードを写すようなことをやってきただけで、それが全部頭に入っているわけでもない。<br>
実現したいことがあって、それをどうやったら実現できるか自分で考えるような講義ではなかったからです。<br>
            初めてそれをしようとして、いかに学びが身になっていないか痛感しました。<br>
            そのため、ここで一旦<strong>今まで学んできたことを整理しよう</strong>と思ったのです。<br>
            そんな時、このQiitaを知って、アウトプットを兼ねてこれまでの学習内容を整理しつつ、学びをさらに深めていきたいと思い、投稿を始めることにしました。
        </p>
    </div>
    <div>
        <h2 id="3">３か月で学んだこと一覧</h2>
        <p>
            <ul>
                <li>HTML</li>
                    <ul>
                        <li>HTML5について</li>
                        <li>Vidual Studio Codeについて</li>
                        <li>要素、属性と属性値について<br>
                        <a>https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics</a></li>
                        <li>ドキュメントタイプ宣言、html要素<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/html</a></li>
                        <li>head要素、title要素、meta要素(charset属性、description属性、content属)<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/head<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/title<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta</li>
                        <li>body要素、p要素、br要素、空要素<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/body<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/p<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/br<br>
                        https://developer.mozilla.org/ja/docs/Glossary/Void_element</a></li>
                        <li>コメントの書き方－< !--○○--!></li>
                        <li>header要素、見出し(h)要素<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/header<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/Heading_Elements</a></li>
                        <li>nav要素、ul要素、li要素<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/nav<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/li</a></li>
                        <li>img要素(src属性、width属性、height属性、alt属性)、ファイルのパスについて<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/img</li>
                        <li>footer要素、コピーライト－&copy ;、small要素<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/footer<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/small</a></li>
                        <li>a要素(href属性、target属性)<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/a</a></li>
                        <li>div要素、section要素<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/div<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/section</a></li>
                        <li>style要素(color属性、その他CSS)<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/style</a></li>
                        <li>table要素(thead要素、tbody要素、tr要素、th要素、td要素)<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/table</a></li>
                        <li>span要素、strong要素、hr要素<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/span<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/strong<br>
                        https://developer.mozilla.org/ja/docs/Web/HTML/Element/hr</a></li>
                        <li>Google MAPを埋め込む方法<br>
                        <a>https://web-camp.io/magazine/archives/85020</a></li>
                    </ul>
                <li>CSS</li>
                    <ul>
                        <li>セレクタ、プロパティ、値とは<br>
                        <a>https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics</a></li>
                        <li>リセットCSSとは</li>
                        <li>単位(px,em,rem,%,vw)</li>
                        <li>記述場所(styleタグ、style属性、外部ファイル)<br>
                        <a>https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured</a></li>
                        <li>ブロック要素とインライン要素<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements</a></li>
                        <li>文字をカスタムする－color、font-family、font-size、font-weight、font-style、text-align<br>
                        vertical-align、text-decoration、line-height、letter-spacing、list-style<br>
                        <a>https://developer.mozilla.org/ja/docs/Learn/CSS/Styling_text/Fundamentals</a></li>
                        <li>背景を指定する－background-color、background-image、background-position<br>
                        background-size、background-repeat<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/background</a></li>
                        <li>線を指定する－border-color、border-width、border-style<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/border</a></li>
                        <li>ボックスの横幅と高さを指定する－width、height
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/width</a><br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/height</a></li>
                        <li>要素の最大幅を指定する－max-width<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/max-width</a></li>
                        <li>ボックスの余白を指定する－margin、padding<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/margin</a><br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/padding</a></li>
                        <li>ボックスの表示形式を指定する－display<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/display</a></li>
                        <li>収まりきらない要素の表示方法を指定する－overflow<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/overflow</a></li>
                        <li>置換要素(imgやvideoなど)をどのようにはめ込むか指定する－object-fit<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/object-fit</a></li>
                        <li>ブロックの周りをインライン要素がまわり込めるように指定する－float<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/float</a></li>
                        <li>ページ内の要素の位置を絶対的に指定する－abusolute、relative<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/position</a></li>
                        <li>余白も含めてサイズを計算する－box-sizing<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing</a></li>
                        <li>要素を隠す－visibility<br>
                        <li>要素の不透明度を指定する－opacity<br>
                        <a>https://nishinatoshiharu.com/opacity-display-visibility/</a></li>
                        <li>影をつける－boxshadow、textshadow<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow<br>
                        https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow</a></li>
                        <li>角に丸みをつける－border-radius<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/border-radius</a></li>
                        <li>疑似クラスとは<br>
                        <a>https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements</a></li>
                        <li>カーソルを当てた時の挙動を指定する－hover<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/:hover</a></li>
                        <li>カーソルのカスタマイズ－cursor<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/cursor</a></li>
                        <li>特定のクラス以外の要素を指定する－:not()<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/:not</a></li>
                        <li>○番目の要素を指定する－nth-of-type<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type</a></li>
                        <li>フレックスコンテナ内の配置を指定する－justify-content、align-items<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/justify-content<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/align-items</a></li>
                        <li>フレックスコンテナ内のアイテムの並び順を指定する－flex-direction<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction</a></li>
                        <li>フレックスコンテナ内の要素を一行か折り返すか指定する－flex-wrap<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap</a></li>
                        <li>要素の重なりを指定する－z-index<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/z-index</a></li>
                        <li>プロパティの値を親要素から取得する－inherit<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/inherit</a></li>
                        <li>最優先のCSS－!inportant<br>
                        <a>https://creive.me/archives/14805/#i-1</a></li>
                        <li>レスポンシブ対応－@ media screen and(max-width: )<br>
                        <a>https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap</a></li>
                        <a>https://www.sejuku.net/blog/99964</a></li>
                        <li>sassについて<br>
                        「.scss」という拡張子でファイルを作る(style.scss)。
                        プラグイン「Live Sass Compiler」をインストール。「Live Server」も便利。
                        画面下の「Watch Sass」を押すと、「style.css」と「style.css.map」というファイルが作られる。<br>
                        使うのは、</li>
                    </ul>
                <li>Bootstrap</li>
                    <ul>
                        <li>コンテナについて－conteiner<br>
                        <a>https://getbootstrap.jp/docs/5.0/layout/containers/</a></li>
                        <li>グリッドシステムについて－row、col-○○(数字)、bg-○○(色名)<br>
                        <a>https://getbootstrap.jp/docs/5.0/layout/grid/</a></li>
                        <li>カラムについて－colum<br>
                        <a>https://getbootstrap.jp/docs/5.0/layout/columns/</a></li>
                        <li>レスポンシブデザインとブレイクポイントについて<br>
                        <a>https://getbootstrap.jp/docs/5.0/layout/breakpoints/</a></li>
                        <li>横並びコンテンツについて－flex、flex-wrap、flex-wra-revers<br>
                        <a>https://getbootstrap.jp/docs/5.0/utilities/flex/</a></li>
                        <li>文字色のカスタマイズ－text-○○(色名)<br>
                        <a>https://getbootstrap.jp/docs/5.0/utilities/colors/</a></li>
                        <li>スペーシング－ms-〇(数字)、me、mt、mb、ps、pe、pt、pb<br>
                        <a>https://getbootstrap.jp/docs/5.0/utilities/spacing/</a></li>
                        <li>テキストの大きさを変更する－h1~6、display-〇(数字)<br>
                        <a>https://getbootstrap.jp/docs/5.0/utilities/text/</a></li>
                        <li>リストのカスタマイズ－list-unstyled、list-inline-item</li>
                        <li>画像のカスタマイズ－img-fluid、img-thumbnaile<br>
                        <a>https://getbootstrap.jp/docs/5.0/content/images/</a></li>
                        <li>表のカスタマイズ－table、table-stripet、table-borderd<br>
                        table-bordeless、table-hover、table-○○(色名)、table-○○(サイズ:sm,lg)<br>
                        <a>https://getbootstrap.jp/docs/5.0/content/tables/</a></li>
                        <li>枠線のカスタマイズ－border、border-○○(方向:top,bottom,right,left)<br>
                        border-(方向)-0、border-○○(色名)<br>
                        <a>https://getbootstrap.jp/docs/5.0/utilities/borders/</a></li>
                        <li>角を丸くするカスタマイズ－rounded、rounded-○○(方向)、rounded-pill<br>
                        rounded-circle、rounded-○○(サイズ)</li>
                        <li>影のカスタマイズ－shadow、shadow-○○(サイズ)、shadow-none<br>
                        <a>https://getbootstrap.jp/docs/5.0/utilities/shadows/</a></li>
                        <li>ディスプレイの指定－d-○(数字)-○○(表示形式:none,block,inline,flex)<br>
                        <a>https://getbootstrap.jp/docs/5.0/utilities/display/</a></li>
                        <li>サイズの指定－w(h)-○○(%:25,50,75,100)、mw(h)-○○(%)<br>
                        <a>https://getbootstrap.jp/docs/5.0/utilities/sizing/</a></li>
                        <li>バッチのカスタマイズ－badge、badge-○○(色名)、badge-pill<br>
                        <a>https://getbootstrap.jp/docs/5.0/components/badge/</a></li>
                        <li>ボタンのカスタマイズ－btn、btn-○○(色名)、btn-outline-○○(色名)、btn-○○(サイズ)<br>
                        btn-block、disabled属性<br>
                        <a>https://getbootstrap.jp/docs/5.0/components/buttons/</a></li>
                        <li>カードを作る－card、card-body、card-title、card-subtitle、card-text<br>
                        card-img-○○(方向)、card-deck<br>
                        <a>https://getbootstrap.jp/docs/5.0/components/card/</a></li>
                        <li>ナビゲーションを作る－nav、nav-item、nav-link、nav-tabs、nav-pills、active属性<br>
                        dropdwon-toggle、dropdown-menu、dropdown-item、dropdown-divider<br>
                        <a>https://getbootstrap.jp/docs/5.0/components/navs-tabs/</a></li>
                        <li>中央揃えにする－justfy-content-center属性</li>
                        <li>ナビゲーションバーを作る－navbar、navbar-expand-○○(サイズ:mdなど)、navbar-○○(色名)<br>
                        navbar-brand、navbar-toggler、navbar-toggler-icon<br>
                        <a>https://getbootstrap.jp/docs/5.0/components/navbar/</a></li>
                        <li>ページネーションを作る－pagination、page-item、page-link、pagination-○○(サイズ)<br>
                        <a>https://getbootstrap.jp/docs/5.0/components/pagination/</a></li>
                        <li>フォームを作る－for属性、form-group、form-control<br>
                        <a>https://getbootstrap.jp/docs/5.0/forms/overview/</a></li>
                        <li>チェックボタンとラジオボタンを配置する－form-check、form-check-input、<br>
                        form-check-label、form-check form-switch<br>
                        <a>https://getbootstrap.jp/docs/5.0/forms/checks-radios/</a></li>
                        <li>YouTubeなどの動画を埋め込む－ratio、iframe要素(HTML)<br>
                        <a>https://getbootstrap.jp/docs/5.0/forms/overview/</a></li>
                        <a>https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe</a></li>
                    </ul>
                <li>JQuery</li>
                    <ul>
                        <li>セレクタとメソッドについて</li>
                        <li>同じセレクタに対して複数のプロパティを書く<br>
                        －$("セレクタ")."メソッド"({"プロパティ1": "値1";, "プロパティ": "値2"})</li>
                        <li>同じセレクタに対して複数のメソッドを書く(メソッドチェーン)<br>
                        －$("セレクタ")."メソッド1"(プロパティ1).メソッド2(プロパティ2);<br>
                        <a>https://zero-plus.io/media/basic-jquery-syntax/<a/></li>
                        <li>クラスを付与・除去する－.addClass、.removeClass、.toggleClass</li>
                        <li>テキストを取得する－変数var、.text、consol.log</li>
                        <li>イベントとは<br>
                        <a>https://pengi-n.co.jp/blog/jquery-events/<a/></li>
                        <li>イベント発生時に実行する処理を設定する－.on、.off<br>
                        <a>https://www.codegrid.net/articles/2014-practical-jquery-1/</a></li>
                        <li>HTMLを書き換える－.html</li>
                        <li>特定の要素を非表示にする－.hide</li>
                        <li>非表示の要素を表示する－.show</li>
                        <li>アコーディオンメニューを作る－.slideToggle<br>
                        <a>https://coco-factory.jp/ugokuweb/<a/></li>
                        <li>関数とは<br>
                        <a>https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables</a></li>
                        <li>条件分岐－if、else<br>
                        <a>https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals</a>
                        <li>スクロールすると下から要素が出てくる動きを設定する－.each、.scroll、.height、.scrollTop、.offset( ).top、if ( "スクロールのトップ" > "画面のトップ" - 100 )<br>
                        <a>https://dezanari.com/jquery-scroll-fadein/<a/></li></li>
                        <li>スライダーのプラグイン「slick」<br>
                        <a>https://and-ha.com/coding/slick/<a/></li>
                    </ul>
                <li>Javascript</li>
                    <ul>
                        <li>Javascriptとは<br>
                        <a>https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript</a></li>
                        <li>デベロッパーツールでのデバックの方法－ブレイクポイントを張る</li>
                        <li>記述ルール<br>
                        <a>https://tcd-theme.com/2022/01/javascript-basic-rule.html</a></li>
                        <li>変数とは<br>
                        <a>https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables</a></li>
                        <li>関数の基本書式<br>
                        <a>https://skillhub.jp/blogs/259#skillhub-subchapter-2-2</a></li>
                        <li>スライダープラグイン「Swiper」<br>
                        <a>https://pengi-n.co.jp/blog/library-swiper/</a></li>
                        <li>モーダルウィンドウ<br>
                        <a>https://tcd-theme.com/2021/08/javascript-modalwindow.html</a></li>
                        <li>ハンバーガーメニュー<br>
                        <a>https://tsumawosettoku20200808.com/hamburger20220704/</a><br></li>
                        <a>https://coco-factory.jp/ugokuweb/move01-cat/humbugermenu/</a></li>
                        <li>アコーディオン機能<br>
                        <a>https://coco-factory.jp/ugokuweb/move01-cat/accordion/</a></li>
                        <a></a></li>
                        <li>タブメニュー<br>
                        <a>https://coco-factory.jp/ugokuweb/move01/5-4-1/</a></li>
                    </ul>
                <li>Wordpress</li>
                    <ul>
                        <li>ローカルに開発環境を作る―MANP、LOCAL<br>
                        <a>https://www.onamae.com/column/wordpress/27/#article4_0/</a><br>
                        <a>https://blog-bootcamp.jp/start/wordpress-local/</a></li>
                        <li>ダッシュボードの使い方<br>
                        <a>https://webst8.com/blog/wordpress-dashboard/</a></li>
                        <li>基本的なデザインカスタマイズ<br>
                        <a>https://webst8.com/blog/wordpress-customizer/</a></li>
                        <li>固定ページと記事の違い<br>
                        <a>https://wp-exp.com/blog/post-page/</a></li>
                        <li>テーマについて<br>
                        <a>https://wp-exp.com/blog/theme/</a></li>
                        <li>記事の投稿<br>
                        <a>https://webst8.com/blog/wordpress-posts-howto/</a></li>
                        <li>固定ページの作成<br>
                        <a>https://webst8.com/blog/wordpress-page-howto/</a></li>
                        <li>メニュー作成<br>
                        <a>https://webst8.com/blog/wordpress-menubar-setting/</a></li>
                        <li>カテゴリとタグの設定<br>
                        <a>https://webst8.com/blog/wordpress-category-tag/</a></li>
                        <li>パーマリンク設定<br>
                        <a>https://webst8.com/blog/wordpress-permalink/</a></li>
                        <li>ウィジェットの説明<br>
                        <a>https://webst8.com/blog/wordpress-widget-howto/</a></li>
                        <li>プラグインのインストール<br>
                        <a>https://webst8.com/blog/vscode-plugin-insttall/</a></li>
                        <li>コンタクトフォームの作成<br>
                        <a>https://webst8.com/blog/mail-form-recommended/</a></li>
                        <li>レンタルサーバーへのインストール<br>
                        <a>https://takapon.net/all-in-one-wp-migration/</a></li>
                        <li>WebサイトをWordpress化する方法<br>
                        <a>https://www.conoha.jp/lets-wp/make-it-wp/</a></li>
                    </ul>
                <li>デザインについて</li>
                    <ul>
                        <li>Adobe XD のデザインからプロパティを取得する<br>
                        <a>https://teru1213.com/coding-xd/</a></li>
                    </ul>
                <li>スコアについて</li>
                    <ul>
                        <li>作ったサイトのスピードを評価する<br>
                        <a>https://pagespeed.web.dev/</a></li>
                    </ul>
                </li>
            </ul>
        </p>
    </div>
    <div>
        <h2 id="4">現状の課題</h2>
        <p>上記の一覧を作成するのに非常に時間を要しましたが、これでやっと、今まで学んできたことを整理することができました。<br>
        一覧を作成してみて、忘れていたものもたくさんあり、学習してきたことがどれだけ定着していないのかを改めて痛感しました。<br>
やはり実践が足りないのだと思っているところです。<br>
今ポートフォリオを作っていますが、一覧を作る前は何をどうしたらいいか、どこから手を付けたらいいのか分からず、茫然としてしまいました。<br>
今回一覧を作成したことで、必要なものを選択してコーディングするための大きな足掛かりになると感じています。<br>
それでも、実際に自分でコーディングしてみると、CSSが効かなかったりと思うようにいかないことがたくさんあるので、その都度さらに詳しく調べて、学びをまた投稿していきたいと思います。
</p>
    </div>