Web制作全般
【仕事】Mozilla Thunderbirdを使用したメール整理
HTML buttonタグのaria属性が気になったので調べてみた
私がこの属性を発見したのはハンバーガーメニューですが、FAQページでよく見かける開閉パネルにも実装されていることが多いそうです。この属性を調べていくうちに「WAI-ARIA」(ウェイ・アリア)という単語が何度も出てきました。「Web Acc...
Web制作全般 【中級Ex編】でコーディングの流れを参考にしている本
中級編のsassの勉強でお世話になった↓の本。ディレクトリ構成なども参考に進めていましたが、特にコーディングの流れなどを一から丁寧に解説されていて、とても分かりやすいです。CSS設計思想は、私は今回FLOCSSを取り入れているので、クラス名...
CSS CSS-縦書きの実装
久々に縦書きの実装をしようと思ったら、いろいろと忘れてしまっていたので、調べたことを備忘録として残しておきます。〇縦書きのコーディングは、「writing-mode」プロパティを使用使う値は、「vertical-rl」でこの「rl」は右から...
gulp 「npm run 〇〇」したら「’NODE_ENV’ は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と表示された時に対応したこと
今回は、npmでgulpやsassのコンパイルをしている時に起こったエラーに対してやったことを記録しておきます。以前の記事でも紹介した「のせっち」さんのBrainを参考にしてgulpを用いてコーディングを行っています。タイトルの通り、「np...
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について、その構成の仕方などを詳しく解説してくれていましたので、ブログにて共有しておきます。こちら↓また、gulpfile.jsにたった1行...
Git 【GitHub】SSH接続の初回設定
以前、初回pushできたがディレクトリ構成がおかしなことになっていたため、再度トライ。またエラー表示出たので、メモしておきます。「git init」してから初回SSH接続する際に「git remote add origin <ssh接続用の...
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↑出来なかった経緯はまた別記事にて。今まではhttpsで接...
運用・保守 ホームページがGoogle検索エンジンへ登録されていることを確認する
ホームページを公開した直後、なかなかサイトが検索結果に表示されないという悩みを持っていました。そこでまずは、ホームページがGoogle検索エンジンに登録されているかどうか、という確認から始めてみました。これは検索結果に表示されるための最初の...
pug Pugのルールを参考サイトをもとに自分なりにまとめてみた
今回はPugのルールを、以下参考サイトを参照してまとめました。自分の中に整理するためにも、ここにまとめておきたいと思います。参考サイト： ： ：Pugの公式サイトはここ→【自分なりにまとめたPugの基本的な書き方、ルール】・タグ...
pug Pugとは？
この記事では、Gulp導入時に出会ったpugというものについて簡単に触れておきたいと思います。Pug（パグ）とは、HTMLを効率的に書くための記述方法で、テンプレートエンジンと呼ばれるものの一つ。Pugでできることなどを、記事最下部の参考サ...
gulp Gulp導入+webpackとの連携を、ここで一旦終了とします！
前回の記事まで、Gulpやwebpackでの不具合が出ていましたが、今優先すべきことを見なおし、これ以上はトレースしないことにしました。とりあえず、不具合は出ているものの、最後までコードをトレースし、理解しながら進めることはできました。Gu...
gulp Gulp導入時のエラー④画像の圧縮とwebpの生成がされない
srcに保存した画像を圧縮をかけて、ついでにwebpの生成までしてdistフォルダにコピーする、ということをしたいです。コマンドを打って、正常に処理は終了しますが、①サマリーの出力で全部数値が０のまま②画像のコピーは出来ているけど圧縮されず...
gulp Gulp導入時のエラー③webpackでJSバンドル時、JS文のエラーは出ないが、JSで記載したコードがブラウザ上で実行されない
ついに、webpackとの連携まできました。ここまで何度も小さいエラーが出てきましたが、何度も乗り越えてきました。次は、JSのバンドルについてです。一応、import文とexport文を書いたjsファイルがバンドルされて、bundle.js...
gulp Gulp導入時のエラー②index.pugが正常にdistフォルダへコンパイルされない【解決済み】
引き続いて、Gulp導入時のエラーです。始め、コードを書いてコンパイルしたら、ルートディレクトリにもともと置いてあったindex.htmlの方が更新されていました。試しにルートディレクトリにあるindex.htmlを削除して再度「npx g...
gulp Gulp導入時のエラー①開発モードとプロダクションモードの切り替えがうまくいかない
タイトル通りです。エラー発生時はプロダクションモードしか正常に作動せず、時間を置いて触ったら、今度は開発モードしか正常に作動しない、という展開に・・・・。解決策が見つかれば、記事を更新していきます。
本業 自分が初めて作ったシステムは惨敗でした【本業ネタです】
本業でExcelのVBAを使って、システムを組んでいます、というお話を先日しました。お話をユーザーさんから頂いて、初めて自分なりに作ってみたシステムを上司に報告して、レビューを受けてみました。結果は・・・・・惨敗でしたorz実は上司も、片手...
Web制作全般 SEO対策に時間を取られています
ここ数日、確保した時間はほとんど案件の方に時間を割いてしまい、勉強時間に回せておらず焦っているたなちよです＾＾；皆さんおはようございます。今日はいかがお過ごしでしょうか。昨日夜活に切り替える！と宣言した次の日、ちゃっかり子どもたちの寝かしつ...
本業 初めてVBAを扱っています【本業ネタです】
エクセルに関しては、ユーザーとしてしか触ったことのない私ですが、転職して今の職場に来て、自分でVBAを組むお仕事を任せて頂けることになりました。窓口接客業兼一般事務の前職では、VBAに触ったこともありませんでした。もともと紙ベースの仕事が多...
Web制作全般 HP運用について考える
現在、コーディングの独学ロードマップ上にいる私ですが、縁あって案件を頂き、ホームページを制作・公開まで担当させて頂きました。このことは先日の記事でもご報告させて頂きました。作ることに集中していた私ですが、せっかく作ったものがより多くの方の目...
Web制作全般 VSCodeのターミナルでpowershellもGitBashも開ける
今回の記事は、まんまタイトル通りなのですが、2日前くらいの記事で、VSCodeのエディタ部分とターミナル部分をショートカットキーで移動する、という内容を書いたかと思います。実はこの時、VSCode上でターミナルへの移動はしていても、GitB...
Web制作全般 Git Bashで便利なコマンド～インストールしたパッケージの確認とファイルの中身を見たいとき～
今、webpackとGulp導入を進めている最中ですが、個人的に便利だなと思ったコマンドを2つ挙げておきます。（Node.jsとGitをインストールして、Git Bashにてコマンドを使い操作しています。Windowsのターミナルは使い勝手...
Web制作全般 VSCodeでターミナルを開き、ショートカットキーでエディタと行ったり来たりする(for Windows)
最近は、CLIを使ってコマンドを書くことが習慣づいてきたため、キーボードを使うことが多くなってきました。そのため、ちょっとしたことでもマウスではなくてキーボードで操作をしてみたくなります。そして、VSCodeでターミナル（今までは別ウィンド...