2022年6月

現在、取り組んでいるしょーごさんのコーディング課題【中級Ex編】は下層ページを含めて4ページを作成します「。 今、動的なコーディングを実装していっていますが、様子をみるため1つのjsファイルにまとめてコーディングしていま […]

モーダルウィンドウも、初級から中級編に入ったばかりのころに勉強していましたが、今回少し忘れてしまっていました。 下記のサイトで記憶を戻しつつ、静的サイト部分は完成しました。 下記サイトは今取り組んでいる課題のようにフォー […]

久しぶりにfvｎ背景画像を充てるところで時間がかかってしまいました。 普通に画像をはめ込むだけでは、拡大して少し左よりになったとように感じます background-size: cover; だと思って、指定するものの、 […]

恥ずかしい話ですが、独学を始めた当初から、画像に関してはfigureタグとimgタグだけでここまできました。 しかし、本来であればsrcsetタグなどを用いて、レスポンシブ幅に応じて画像の出し分けをきちんと行わないといけ […]

学習も後半に差し掛かっていて、営業を見据えた時に自分のコーディングの速度を上げるために、実装したいコードを見てから、コードを書き始めるまでの時間はより少なければ少ないほど良いですし、さらにCSS設計的にも強いものをかけれ […]

pugを用いてコーディングを行う際に、インライン要素であるbrタグの書き方に少し苦労しました。 調べたところ、同じインライン要素であるspanタグは以下のように書くそうです。 ==========↓原文ママ↓====== […]

よく使うmax-widthですが、レスポンシブ対応の実装をしている時に「そういえばmax-widthを解除する方法ってどうやったっけ？」と考え込んでしまったため、調べたことをメモで残しておきます。 今回お世話になったサイ […]

今現在取り組んでいるしょーごさんのコーディング課題【中級Ex編】からpugを取り入れ CSS設計はFLOCSSを採用してみています。 「修正が入った場合を想定して」コーディングするように今回は意識をしてディレクトリ構成な […]

縦書きの実装の際に、CSSで「writing-mode: vertical-rl;」とすることは以前のブログ記事でも書きました。 指定した後、メニューのうち文字数が比較的少ないものはインデントが出来てしまいました。 出来 […]

画像とテキストを少しずらして重ねてあるプロジェクト部分の作成中にはまってしまった場所なので、メモ。 レスポンシブ対応中に、タブレット領域部分で右側に余白が出来ていることを確認。 ↓ すぐさまデベロッパーツールにて検証開始 […]

pugで改行する時、エラーが発生したので備忘録としてメモしておきます。 「br」＋改行＋「｜(パイプ)」＋半角スペース 【参考サイト】

おはようございます。現在1:39。今から朝活で積み上げます。 codolife7期生として無事にcodolifeに合流できました。 今までずっと独りでやってきて、やっぱり一緒に頑張る仲間がいることは素直に嬉しいです。 ま […]

コーディング課題【中級Ex編】取組み中のメモ。 今回はdata属性について調べたことを簡単にメモしておきます。 data属性はタグの中に「data-**=”****”」(**は自由につけられる)と記述して使用↓ このda […]

私がこの属性を発見したのはハンバーガーメニューですが、FAQページでよく見かける開閉パネルにも実装されていることが多いそうです。 この属性を調べていくうちに「WAI-ARIA」(ウェイ・アリア)という単語が何度も出てきま […]

中級編のsassの勉強でお世話になった↓の本。 ディレクトリ構成なども参考に進めていましたが、特にコーディングの流れなどを一から丁寧に解説されていて、とても分かりやすいです。 CSS設計思想は、私は今回FLOCSSを取り […]

久々に縦書きの実装をしようと思ったら、いろいろと忘れてしまっていたので、調べたことを備忘録として残しておきます。 〇縦書きのコーディングは、「writing-mode」プロパティを使用 使う値は、「vertical-rl […]

今回は、npmでgulpやsassのコンパイルをしている時に起こったエラーに対してやったことを記録しておきます。 以前の記事でも紹介した「のせっち」さんのBrainを参考にしてgulpを用いてコーディングを行っています。 […]

勉強用のメモです。 【オブジェクト】・・・配列と同じく複数のデータをまとめて管理するもの。プロパティと値がセット。{プロパティ01:値01, プロパティ02:値02}。 【関数】・・・いくつかの処理をまとめたもの。 【オ […]

他の方のコードを見ていて、buttonタグにonclick属性が設定されていました。勉強用メモです。気になったことを調べてメモしています。 【onclick属性とは】・・・ユーザーが要素をクリックしたときに起動する処理を […]

しょーごさんのコーディング課題【中級編】に取り組んでいる最中は、ブラウザのタブを開きすぎたり、どこからどこまで作業を終えているのか分かりにくかったりしていました。作業のしづらさも覚えてストレスも感じていました。なかなか作 […]

毎回、コーディングする時にどんなクラス名にしようか迷ってしまいます。 とりあえず、皆さんがつけているクラス名を参考にしながら、できるだけ分かりやすいクラス名をつけていこうと思います。 今回のコーディング課題【中級Ex編】 […]

以前、pugを初めて学習する段階でも一通りまとめていましたが、何回かエラー表示を繰り返してしまったので、備忘録として残しておく。 pug内でコメント表示にする際は「//-」を使う。 CSSやJavaScriptでよく使う […]

前回の記事でFLOCSS設計思想に基づいて、CSS設計を行っていくという話をしました。そちらで参考サイトの方は、命名規則をBEMMindBEMdingで行っているとのことでしたので、早速調べてみました。 下記サイトが分か […]

前回のコーディング課題【中級編】では、初めて設計思想というものを導入し、メジャーなBEMに基づいて行いました。 ただ、やりながら使いづらさを感じていました。 今回、【中級Ex編】までに、gulp導入ついでにpugも取り入 […]

のせっちさんのBrainにはGulp導入で大変お世話になりました。そんなのせっちさんのブログでPugについて、その構成の仕方などを詳しく解説してくれていましたので、ブログにて共有しておきます。 こちら↓ また、gulpf […]

以前、初回pushできたがディレクトリ構成がおかしなことになっていたため、再度トライ。またエラー表示出たので、メモしておきます。 「git init」してから初回SSH接続する際に 「git remote add ori […]

こちらでは、自分のメモとしてGitについての知識を体系的に学べそうなサイトのリンクを貼っておきます。 将来的にもしっかり勉強して基礎を身に着けておきたいです！

Gitでなかなかpushできずにいたところ、再度ディレクトリ構成から見直して新しく「git init」を行い、リモートリポジトリも再度新しくしてpushすることにしました。 ※push↑出来なかった経緯はまた別記事にて。 […]

ホームページを公開した直後、なかなかサイトが検索結果に表示されないという悩みを持っていました。 そこでまずは、ホームページがGoogle検索エンジンに登録されているかどうか、という確認から始めてみました。 これは検索結果 […]