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