CSS
table2列複数行タイプをレスポンシブで1列にする方法
2022-05
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でターミナル（今までは別ウィンド...
Web制作全般 webpackとgulpの導入を進める
HP案件と並行してですが、WebpackとGulpの導入も進めています。こちらの導入に関しては、しょーごさんもロードマップを完走した後に実践しながらで良いかな、とおっしゃていました。ただ、私としては実践に入る前に出来るだけ使えるようになって...
Web制作全般 HPを作った後のことについて考える
今、web制作のコーディングを勉強中ですが、縁あってHPリニューアルのお仕事を頂けたので、サーバーの契約から公開まで担当させていただきました。いろんなことが非常に勉強になり、とても有難い気持ちです。そして公開まで至った後、クライアントの方か...
ロゴ制作 ロゴ制作
今対応させて頂いている案件でロゴ制作も依頼があったので、自分で作ってみることにしました。ロゴ制作をするツールはたくさんあって、本当に簡単に作成できるものから、凝って作りたい場合にはいろいろな機能がついているものまで様々でした。機能がたくさん...
Web制作全般 HPリニューアルの件がひと段落しました
何とか形にして、本日公開まで持ってくることができました！WordPressの有料テーマを使った案件ではありましたが、1人でサーバーの契約からWordPressの導入、HPデザイン（もどき）、制作、公開までを担当することができて、本当に勉強に...
Web制作全般 SNOW MONKEYを使ったHP制作
初めてテーマというものを使って、１つHP制作を行いました。使ったテーマは「SNOWMONKEY」という有料テーマです。このテーマは年間のサブスクリプション型で商用利用可能となっていて、web制作をお仕事にしていこうとする身としては扱っていて...
Web制作全般 しょーごさんのコーディング課題【中級編】完走しました！
レビュー2回目まで指摘された箇所（フォントのtransform）を修正して、ポートフォリオとして活用させて頂きたいと思います。以下となります。よろしければご覧ください。ユーザー名、パスワードともに「tanatiyo-01」です。参考までに、...
Web制作全般 コーディング課題【中級編】完走。出来た事。反省点。振り返り。
先日、しょーごさんのコーディング課題【中級編】を無事に終えることが出来ました。完走者のサイトを見ようか・・・と思うこともありましたが、とりあえず自力で走りきるところに拘りました。若いころ、人になんでもすぐに聞いてしまうのが私の悪い点でもある...
Web制作全般 しょーごさんのコーディング課題【中級編】レビュー依頼が返ってきました②
GW中にも関わらず、2回目のレビュー依頼では半日と待たずレビューが返ってきました！早くレビューが頂けるから、フィードバックも早くできます！今回の記事では2回目のレビュー内容と反省点を振り返ります。中級編の反省はまた翌日以降の記事にてまとめま...
Web制作全般 しょーごさんのコーディング課題【中級編】レビュー依頼が返ってきました①
ようやく、一通りのチェックも終わり、提出することができました。GW中にも関わらずレビュー依頼を提出した翌日にはもうお返事がありました。今回も早くて驚きました＾＾；今回の記事では修正内容と反省をしながら進めていきたいと思います。ちなみに、参考...
CSS tableで謎の余白が出来た～原因はthに指定したtransformだった～
tableのth（見出し）部分の文字を長細く表記するために「transform：scale(〇, 〇) translate(〇, 〇);」を実装したところ、レスポンシブ対応時にthのみ左右に謎の余白が出来てしまった事件。→transform...
デザインカンプからのコーディング【練習】 各モジュールの細かな調整は別のクラスを割り当ててそこで管理
よくあるブログカードやメディア（画像1枚とテキスト部分からなる）の構成は、CSS設計で勉強したことを踏まえてモジュールと捉え、拡張・保守・運用しやすいようにSassファイルを別で分けてコーディングを行っていました。ところが、デザインをよく見...