運用・保守 ホームページがGoogle検索エンジンへ登録されていることを確認する
ホームページを公開した直後、なかなかサイトが検索結果に表示されないという悩みを持っていました。
そこでまずは、ホームページがGoogle検索エンジンに登録されているかどうか、という確認から始めてみました。
これは検索結果に表示...
tanatiyo
運用・保守 pug Pugのルールを参考サイトをもとに自分なりにまとめてみた
今回はPugのルールを、以下参考サイトを参照してまとめました。
自分の中に整理するためにも、ここにまとめておきたいと思います。
参考サイト： ：
：
Pugの公式サイトはここ→
...
pug Pugとは？
この記事では、Gulp導入時に出会ったpugというものについて簡単に触れておきたいと思います。
Pug（パグ）とは、HTMLを効率的に書くための記述方法で、テンプレートエンジンと呼ばれるものの一つ。
Pugでできること...
gulp Gulp導入+webpackとの連携を、ここで一旦終了とします！
前回の記事まで、Gulpやwebpackでの不具合が出ていましたが、今優先すべきことを見なおし、これ以上はトレースしないことにしました。
とりあえず、不具合は出ているものの、最後までコードをトレースし、理解しながら進めることはできま...
gulp Gulp導入時のエラー④画像の圧縮とwebpの生成がされない
srcに保存した画像を圧縮をかけて、ついでにwebpの生成までしてdistフォルダにコピーする、ということをしたいです。
コマンドを打って、正常に処理は終了しますが、
①サマリーの出力で全部数値が０のまま
②画像のコピー...
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を使って、システムを組んでいます、というお話を先日しました。
お話をユーザーさんから頂いて、初めて自分なりに作ってみたシステムを上司に報告して、レビューを受けてみました。
結果は・・・・・惨敗でしたor...
Web制作全般 SEO対策に時間を取られています
ここ数日、確保した時間はほとんど案件の方に時間を割いてしまい、勉強時間に回せておらず焦っているたなちよです＾＾；
皆さんおはようございます。今日はいかがお過ごしでしょうか。
昨日夜活に切り替える！と宣言した次の日、ちゃ...
本業 初めてVBAを扱っています【本業ネタです】
エクセルに関しては、ユーザーとしてしか触ったことのない私ですが、転職して今の職場に来て、自分でVBAを組むお仕事を任せて頂けることになりました。
窓口接客業兼一般事務の前職では、VBAに触ったこともありませんでした。もともと...
Web制作全般 HP運用について考える
現在、コーディングの独学ロードマップ上にいる私ですが、縁あって案件を頂き、ホームページを制作・公開まで担当させて頂きました。
このことは先日の記事でもご報告させて頂きました。
作ることに集中していた私ですが、せっかく作...
Web制作全般 VSCodeのターミナルでpowershellもGitBashも開ける
今回の記事は、まんまタイトル通りなのですが、2日前くらいの記事で、VSCodeのエディタ部分とターミナル部分をショートカットキーで移動する、という内容を書いたかと思います。
実はこの時、VSCode上でターミナルへの移動はしていても...
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）を修正して、ポートフォリオとして活用させて頂きたいと思います。
以下となります。よろしければご覧ください。
ユーザー名、パスワードともに「tanati...
Web制作全般 コーディング課題【中級編】完走。出来た事。反省点。振り返り。
先日、しょーごさんのコーディング課題【中級編】を無事に終えることが出来ました。
完走者のサイトを見ようか・・・と思うこともありましたが、とりあえず自力で走りきるところに拘りました。
若いころ、人になんでもすぐに聞いてしまうのが...
Web制作全般 しょーごさんのコーディング課題【中級編】レビュー依頼が返ってきました②
GW中にも関わらず、2回目のレビュー依頼では半日と待たずレビューが返ってきました！
早くレビューが頂けるから、フィードバックも早くできます！
今回の記事では2回目のレビュー内容と反省点を振り返ります。中級編の反省はまた翌日以降...
Web制作全般 しょーごさんのコーディング課題【中級編】レビュー依頼が返ってきました①
ようやく、一通りのチェックも終わり、提出することができました。
GW中にも関わらずレビュー依頼を提出した翌日にはもうお返事がありました。今回も早くて驚きました＾＾；
今回の記事では修正内容と反省をしながら進めていきたいと思いま...
CSS tableで謎の余白が出来た～原因はthに指定したtransformだった～
tableのth（見出し）部分の文字を長細く表記するために「transform：scale(〇, 〇) translate(〇, 〇);」を実装したところ、レスポンシブ対応時にthのみ左右に謎の余白が出来てしまった事件。
→tran...
デザインカンプからのコーディング【練習】 各モジュールの細かな調整は別のクラスを割り当ててそこで管理
よくあるブログカードやメディア（画像1枚とテキスト部分からなる）の構成は、CSS設計で勉強したことを踏まえてモジュールと捉え、拡張・保守・運用しやすいようにSassファイルを別で分けてコーディングを行っていました。
ところが、デザイ...
CSS flexboxを用いた時の子要素の幅を均一にしたい
flexboxは奥が深いので、まだまだ勉強しなければならないことが多いですが、ここではデザインカンプからのコーディング課題時によく悩んだことの一つ、「子要素の幅を均一にする」ことについて( ..)φメモを残しておきます。
【コード例...
CSS 文字を細くする方法～transformを使った方法②～【AOS.js】と併用する時は注意
昨日書いた記事（1つ手前の記事）で、文字を細くする方法について書きました。
ここでは、AOS.js（JavaScriptのライブラリで、簡単にスクロール連動型のアニメーションを実装できるものです）と併用した場合に、transform...
CSS 文字を細くする方法～transformを使った方法～
デザインカンプからのコーディングを行っている時に、文字のサイズや行間、文字間は指定通りなのに、なぜか文字がデザイン通りに合わない、ということが出てきました。
その解決方法を備忘録がてら( ..)φメモしておきます。
結...
Web制作全般 web制作の勉強を始めて3か月が経ちました。
先日の4月25日で、本格的にweb制作の勉強を始めてか3か月が経ちました。
最初の頃と比べれば、いろんな知識やスキルはついたと思います。
でもまだ、それを自在にこなせておらず、自分なりに完璧な整理も出来ていない状態です...