広く『Web』について書いていきます。
必要が出てくれば細分化していきます。
![](https://kotoura3-blog.com/blog/wp-content/uploads/2022/12/95bc1a8bb8c978f775e5c0e5475bb00e-320x198.png)
【Next.js,microCMS】で作るブログ(Next.js基礎編)
UdonTech Advent Calendar 2022の11日目です。 前回はmicroCMSのデータ(ブログのタイトル)を取り出して表示させるところまでしました。今回は Next.jsの基礎的な部分に触れていきたい...
![](https://kotoura3-blog.com/blog/wp-content/uploads/2022/12/c971e1d83a7ca0ea3482a8f30c63b47f-320x198.png)
【Next.js,microCMS】で作るブログ(公式チュートリアル補足編)
少しづつ、Next.jsやmicroCMSについて理解を深めようということで、何回かに分けて書いていこうと思います。今回は下2つのリンクを参考に、自分が躓いたポイントについてを自分の備忘録として書いていきます。 こちらがmicroC...
![](https://kotoura3-blog.com/blog/wp-content/uploads/2022/01/ReactGatsby.jsTailwindCSS-320x198.png)
【React,TailwindCSS,Gatsby.js,MicroCMS,Firebase hosting】Ubuntuマシンでポートフォリオサイトのリニューアルに着手します
以前から思っていたのですが、ポートフォリオサイトをリニューアルしようと構想中です。モダン開発に興味を持ったこともあり、タイトルに含まれているような技術【React,TailwindCSS,Gatsby.js,MicroCMS,Firebase hosting】を使って作ることができればなと思っています。まずはReact,TailwindCSS,Gatsby.jsの概要を説明したあと、実際に行った環境構築について書いていきます。分からないことばかりで大変ですが少しずつ形にしていきたいと思います。
![](https://kotoura3-blog.com/blog/wp-content/uploads/2021/12/python_original_wordmark_logo_icon_146382-320x198.png)
【Python + Selenium】Webスクレイピングを試してみました
普段の業務に少しでも活かせればと思い、以前から興味のあったWebスクレイピングを勉強してみることにしました。 きっかけ 普段の業務でAmazon上での相乗り問題が発覚し、それを解消するために弊社の商品を1つ1つ確認する(商品ペ...
![](https://kotoura3-blog.com/blog/wp-content/uploads/2021/12/www.notion1-320x198.png)
初めてNotionを使ってみた【導入編】
たまたま目にした「Notion」というアプリ。あらゆる情報を1つに集約できるアプリとのことで気になったので使ってみました。今回は主に導入方法について紹介します。※まだまだ使いこなせていないので、導入以降の情報は追々。
![](https://kotoura3-blog.com/blog/wp-content/uploads/2020/05/ec-vcs-eye.png)
Visual Studio Codeの設定・拡張機能まとめ
Visual Studio Codeを使い始めてけっこう経つので、これを機に自分が使いやすいように設定している設定内容や拡張機能についてまとめていこうかと思います。※なお、フレームワークによる特殊な拡張機能は含めない方針です。
![](https://kotoura3-blog.com/blog/wp-content/uploads/2020/04/MeWQ0jLZENIhXac1588088243_1588088278.png)
Facebookのプラグインページをレスポンシブ化&リサイズ化してみた!
ポートフォリオサイトを作るにあたり、Facebookのタイムラインを表示させるようなものはないか探したところ、埋め込むコードを取得するサイトがあり導入を試してみました。どうやらレスポンシブ化やウィンドウサイズが変わった時のリサイズ化に対応していないらしく、それらに対応したコーディングに関しての記事を見つけ導入できたので、その方法を紹介します。
![](https://kotoura3-blog.com/blog/wp-content/uploads/2020/04/vj4hYpxq0Ag14gv1587132421_1587132434.jpg)
インクルード化・PJAXに関する情報収集まとめ
ポートフォリオサイトの一つを作るにあたりトップページ(index.html)はだいぶ形になってきたのですが、その他のページを作る際に「ヘッダーやフッターは内容変わらないよな」とか「メインの部分だけ表示を切り替える仕組みあったよな」なんて思い、とりあえず今回はそのあたりの知識を復習したいと思います。実装まで頑張りたいと思いますので、お付き合いください。
![](https://kotoura3-blog.com/blog/wp-content/uploads/2020/04/twitter-312464_640-1.png)
OGPのまとめ[Twitter]~表示されないときはココを確認!~
HTMLファイルのhead要素内にOGPの記述をしたにも関わらず、Twitterでシェアした際に、上手く表示されないという問題が発生していました。試行錯誤の後、問題が解決されたので、その経緯およびOGPに関する情報のまとめをしたいと思います。
![](https://kotoura3-blog.com/blog/wp-content/uploads/2019/12/1ceb298a0cdbc04ff49a2dd20e680663-4-320x198.png)
サイトの顔!ファビコンについてのまとめ
ファビコンとはブラウザを利用した時に、各タブのサイト名の左隣に表示されるものです。例として、GoogleとYahoo!JAPANのファビコンを表示しています。実装に取り掛かる前にファビコンの仕組みについて理解しなければなりません。順を追って説明していきます。