-
CSS
ナビゲーションメニューを縦書きで実装する際、上揃えのために指定したCSS
縦書きの実装の際に、CSSで「writing-mode: vertical-rl;」とすることは以前のブログ記事でも書きました。 指定した後、メニューのうち文字数が比較的少ないものはインデントが出来てしまいました。 出来 […] -
CSS
子要素にbox-sizing:border-box;を指定しているのに親要素をはみ出してしまった時に対処したこと
画像とテキストを少しずらして重ねてあるプロジェクト部分の作成中にはまってしまった場所なので、メモ。 レスポンシブ対応中に、タブレット領域部分で右側に余白が出来ていることを確認。 ↓ すぐさまデベロッパーツールにて検証開始 […] -
技術メモ
Pugでインライン要素
を表現したいpugで改行する時、エラーが発生したので備忘録としてメモしておきます。 「br」+改行+「|(パイプ)」+半角スペース 【参考サイト】 -
Web制作の勉強
動画1.5倍速と大活躍のワイヤレスイヤホン
おはようございます。現在1:39。今から朝活で積み上げます。 codolife7期生として無事にcodolifeに合流できました。 今までずっと独りでやってきて、やっぱり一緒に頑張る仲間がいることは素直に嬉しいです。 ま […] -
HTML
HTMLのdata属性について調べてみた
コーディング課題【中級Ex編】取組み中のメモ。 今回はdata属性について調べたことを簡単にメモしておきます。 data属性はタグの中に「data-**=”****”」(**は自由につけられる)と記述して使用↓ このda […] -
HTML
buttonタグのaria属性が気になったので調べてみた
私がこの属性を発見したのはハンバーガーメニューですが、FAQページでよく見かける開閉パネルにも実装されていることが多いそうです。 この属性を調べていくうちに「WAI-ARIA」(ウェイ・アリア)という単語が何度も出てきま […] -
Web制作全般
【中級Ex編】でコーディングの流れを参考にしている本
中級編のsassの勉強でお世話になった↓の本。 ディレクトリ構成なども参考に進めていましたが、特にコーディングの流れなどを一から丁寧に解説されていて、とても分かりやすいです。 CSS設計思想は、私は今回FLOCSSを取り […] -
CSS
CSS-縦書きの実装
久々に縦書きの実装をしようと思ったら、いろいろと忘れてしまっていたので、調べたことを備忘録として残しておきます。 〇縦書きのコーディングは、「writing-mode」プロパティを使用 使う値は、「vertical-rl […] -
gulp
「npm run 〇〇」したら「’NODE_ENV’ は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と表示された時に対応したこと
今回は、npmでgulpやsassのコンパイルをしている時に起こったエラーに対してやったことを記録しておきます。 以前の記事でも紹介した「のせっち」さんのBrainを参考にしてgulpを用いてコーディングを行っています。 […] -
JavaScript
javascriptのオブジェクト、関数、クラス、インスタンス、コンストラクタ
勉強用のメモです。 【オブジェクト】・・・配列と同じく複数のデータをまとめて管理するもの。プロパティと値がセット。{プロパティ01:値01, プロパティ02:値02}。 【関数】・・・いくつかの処理をまとめたもの。 【オ […] -
HTML
HTMLのonclick属性とは
他の方のコードを見ていて、buttonタグにonclick属性が設定されていました。勉強用メモです。気になったことを調べてメモしています。 【onclick属性とは】・・・ユーザーが要素をクリックしたときに起動する処理を […] -
デザインカンプからのコーディング【練習】
作業環境への留意~ブラウザ編~
しょーごさんのコーディング課題【中級編】に取り組んでいる最中は、ブラウザのタブを開きすぎたり、どこからどこまで作業を終えているのか分かりにくかったりしていました。作業のしづらさも覚えてストレスも感じていました。なかなか作 […] -
CSS
CSSのクラス名にはいつも迷わされます
毎回、コーディングする時にどんなクラス名にしようか迷ってしまいます。 とりあえず、皆さんがつけているクラス名を参考にしながら、できるだけ分かりやすいクラス名をつけていこうと思います。 今回のコーディング課題【中級Ex編】 […] -
pug
pugファイル内のコメント記述には注意
以前、pugを初めて学習する段階でも一通りまとめていましたが、何回かエラー表示を繰り返してしまったので、備忘録として残しておく。 pug内でコメント表示にする際は「//-」を使う。 CSSやJavaScriptでよく使う […] -
CSS
命名規則はBEM/mindBEMdingをベースに行ってみる
前回の記事でFLOCSS設計思想に基づいて、CSS設計を行っていくという話をしました。そちらで参考サイトの方は、命名規則をBEMMindBEMdingで行っているとのことでしたので、早速調べてみました。 下記サイトが分か […] -
CSS
CSS設計について、今回(【中級Ex編】)はFLOCSSでやってみます
前回のコーディング課題【中級編】では、初めて設計思想というものを導入し、メジャーなBEMに基づいて行いました。 ただ、やりながら使いづらさを感じていました。 今回、【中級Ex編】までに、gulp導入ついでにpugも取り入 […] -
pug
Pugの導入にあたって参考にしたサイト
のせっちさんのBrainにはGulp導入で大変お世話になりました。そんなのせっちさんのブログでPugについて、その構成の仕方などを詳しく解説してくれていましたので、ブログにて共有しておきます。 こちら↓ また、gulpf […] -
Git
【GitHub】SSH接続の初回設定
以前、初回pushできたがディレクトリ構成がおかしなことになっていたため、再度トライ。またエラー表示出たので、メモしておきます。 「git init」してから初回SSH接続する際に 「git remote add ori […] -
Git
Gitの知識を体系的にまとめてあるサイト【( ..)φメモ】
こちらでは、自分のメモとしてGitについての知識を体系的に学べそうなサイトのリンクを貼っておきます。 将来的にもしっかり勉強して基礎を身に着けておきたいです! -
Git
Gitで「error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)」となった時の対処法
Gitでなかなかpushできずにいたところ、再度ディレクトリ構成から見直して新しく「git init」を行い、リモートリポジトリも再度新しくしてpushすることにしました。 ※push↑出来なかった経緯はまた別記事にて。 […] -
運用・保守
ホームページがGoogle検索エンジンへ登録されていることを確認する
ホームページを公開した直後、なかなかサイトが検索結果に表示されないという悩みを持っていました。 そこでまずは、ホームページがGoogle検索エンジンに登録されているかどうか、という確認から始めてみました。 これは検索結果 […] -
pug
Pugのルールを参考サイトをもとに自分なりにまとめてみた
今回はPugのルールを、以下参考サイトを参照してまとめました。 自分の中に整理するためにも、ここにまとめておきたいと思います。 参考サイト:https://www.tam-tam.co.jp/tipsnote/html_ […] -
pug
Pugとは?
この記事では、Gulp導入時に出会ったpugというものについて簡単に触れておきたいと思います。 Pug(パグ)とは、HTMLを効率的に書くための記述方法で、テンプレートエンジンと呼ばれるものの一つ。 Pugでできることな […] -
gulp
Gulp導入+webpackとの連携を、ここで一旦終了とします!
前回の記事まで、Gulpやwebpackでの不具合が出ていましたが、今優先すべきことを見なおし、これ以上はトレースしないことにしました。 とりあえず、不具合は出ているものの、最後までコードをトレースし、理解しながら進める […] -
gulp
Gulp導入時のエラー④画像の圧縮とwebpの生成がされない
srcに保存した画像を圧縮をかけて、ついでにwebpの生成までしてdistフォルダにコピーする、ということをしたいです。 コマンドを打って、正常に処理は終了しますが、 ①サマリーの出力で全部数値が0のまま ②画像のコピー […] -
gulp
Gulp導入時のエラー③webpackでJSバンドル時、JS文のエラーは出ないが、JSで記載したコードがブラウザ上で実行されない
ついに、webpackとの連携まできました。ここまで何度も小さいエラーが出てきましたが、何度も乗り越えてきました。 次は、JSのバンドルについてです。 一応、import文とexport文を書いたjsファイルがバンドルさ […] -
gulp
Gulp導入時のエラー②index.pugが正常にdistフォルダへコンパイルされない【解決済み】
引き続いて、Gulp導入時のエラーです。 始め、コードを書いてコンパイルしたら、ルートディレクトリにもともと置いてあったindex.htmlの方が更新されていました。 試しにルートディレクトリにあるindex.htmlを […] -
gulp
Gulp導入時のエラー①開発モードとプロダクションモードの切り替えがうまくいかない
タイトル通りです。 エラー発生時はプロダクションモードしか正常に作動せず、時間を置いて触ったら、今度は開発モードしか正常に作動しない、という展開に・・・・。 解決策が見つかれば、記事を更新していきます。 -
本業
自分が初めて作ったシステムは惨敗でした【本業ネタです】
本業でExcelのVBAを使って、システムを組んでいます、というお話を先日しました。 お話をユーザーさんから頂いて、初めて自分なりに作ってみたシステムを上司に報告して、レビューを受けてみました。 結果は・・・・・惨敗でし […] -
Web制作全般
SEO対策に時間を取られています
ここ数日、確保した時間はほとんど案件の方に時間を割いてしまい、勉強時間に回せておらず焦っているたなちよです^^; 皆さんおはようございます。今日はいかがお過ごしでしょうか。 昨日夜活に切り替える!と宣言した次の日、ちゃっ […]