ハンバーガーメニューのバーが片方だけスタイルが当たらなかった件について

上記のような感じでspanタグを用いてbarを指定。

&.is-checked {
.drawer-icon__bar {
&:nth-of-type(1) {
transform: translateY(8px) rotate(-63deg);

【Mapbox】自宅を表示してみた

# 前提
* Mapboxのアカウント作成
https://docs.mapbox.com/

* クレジットの登録が必要

* API keyの取得しておく

# ドキュメント通りにhtmlを作成

https://docs.mapbox.com/mapbox-gl-js/example/globe-spin/
こちらの例をそのまま使う。
**※YOUR_MAPBOX_ACCESS_TOKENの部分は、自分のAPIトークンに置き換える必要あり**

“`html





【Emmet】AWS Cloud9での使用方法と略語まとめ(HTML編)

こんにちは～！
今日は最近学んだ爆速でHTMLとCSSを記述できる**Emmet**について紹介します！
今回はHTML編のため、HTMLの略語を紹介します！
使用しているエディタはAWS Cloud9です。他のエディタではプラグインで導入できるものや、デフォルトで備わっているものもあるようです。
公式サイトのチートシートはこちらからどうぞ。

https://docs.emmet.io/cheat-sheet/

## AWS Cloud9でのEmmet使用方法
　AWS Cloud9ではもともと備わっているようなので、まずは略語を入力をし`Ctrl+Alt+E`を押すと変換できます。Cloud9ではEmmetがなくても元々それなりに変換できるようになっていますが、Emmetを使用した方が変換できる幅が広がるように思います。

## 実際に使ってみよう
### HTMLの略語紹介
#### !
`!`を打ったあとに`Ctrl+Alt+E`を押すとこのように表示されます。細かい設定はともかく、htmlの基本形はすぐ出来上がるのでおすすめです！
“`html

フライトマップ風の地図（マップアニメーション）をつくる

　[前回の記事](https://qiita.com/hamanasu/items/ea071823fc732cb5e21f)で、”指定した２点間を地球が球体なことを考慮し最短経路で結ぶ”地図（フライトマップ風の地図）を作成するスクリプトを掲載したが、この地図をマップアニメーション化することを考える。

## 1. マップアニメーションの作成


　マップアニメーションは、LeafletとJavaScriptのsetIntervalやanimate関数を併用し作成する。（HTML上にJavaScript(Leafle

FontAwesomeのCDNを読み込む方法

FontAwesomeのCDNは廃止されたそうです。
詳しくはこちらの記事をご覧ください。

Font AwesomeのCDNは廃止が決定：解決策は２つある！

Font AwesomeのKit CodeであればCDNまで辿り着けるようですが、アカウント登録しないといけないという手間があります。
ですので、海外サイトですがFontAwesomeのCDNをまとめてる「cdnjs」というサイトがあります。
以下サイトに入ってCDNリンクをコピペしてください。
https://cdnjs.com/libraries/font-awesome


●使用例
“`html
Next.js でローカルファイルを読み込む【Module not found: Can’t resolve ‘fs’】

# tl;dr
こういうエラーが出たときは
“`
Module not found: Can’t resolve ‘fs’
1 | import path from “path”;
> 2 | import fs from “fs”;
3 | export default function Home({ content }) {
4 | const fileContents = fs.readFileSync(filename, “utf8”);
5 | return ;
“`
以下2点を抑えて`fs`を使用。
– `pages/*`のファイルで定義する
– `getStaticProps`の中で使用する

“`javascript:pages/siteinfo.js
import path from “path”;
import fs from “fs”;
export default function Home({ content }) {
return

WordPressで固定ページをオリジナルテンプレート適用する方法

## 1 . wordpressのtheme内オリジナルテーマフォルダにpage-（任意の名前）.phpを作る
例えば、ニュースならpage-newsなど任意の名前のphpを作る
※ここではお知らせページを例とする

## 2 . １でつくったphp内上部に以下を記載

“`page-news.php

“`
## 3 . WordPressにアップロードし、固定ページを新規追加、テンプレートを選択の欄から「おしらせページ」を選択できるようになる

SPA（Single Page Application）の基本と簡単な例

### はじめに
ウェブ開発の世界では、SPA（Single Page Application）が注目を集めています。この記事では、SPAの概念を初心者にも分かりやすく説明し、簡単なコード例を通じてその動作を理解します。

### SPAとは？
SPAとは、「Single Page Application」の略で、一つのウェブページで完結するアプリケーションのことを指します。SPAは、文字通り「一枚のウェブページ」で動くアプリケーションです。従来のウェブサイトのように、リンクをクリックするたびに新しいページに移動してロードするのではなく、SPAでは最初にページ全体を読み込んだ後、ユーザーが何か操作をするたびに必要なデータだけを更新して、ページの一部分だけを動的に変えていきます。

### SPAの利点
高速なページ遷移：全ページリロードの必要がないため、ユーザー体験が向上します。
良好なユーザー体験：動的なコンテンツ更新により、アプリケーションがよりインタラクティブになります。
サーバー負荷の軽減：初期ロード後は、必要なデータのみをサーバーから取得します。

### SPAのコード例

【HTML】Youtube動画からサムネイルを取得する方法

## 概要
今回担当した案件の中で、HTML内でYoutube動画を再生させる必要があり、
その際に動画のサムネイルを取得して表示させたかったためです。

今後のためにもメモとして残しておこうと思います！

## 参考記事
– [Youtube動画からサムネイル画像を取得する方法](https://www.billionwallet.com/goods/youtube_image.html)
– [YouTube動画をWebページに埋め込むorリンクを貼り付けるときの便利テクニック](https://4thsight.xyz/26221#YouTube%E5%8B%95%E7%94%BB%E3%81%AE%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B)
– [YouTubeの動画サムネイルの取得方法](https://logicalyze.com/get-youtube-thumbnail/)

## 作業内容

### 1. Youtubeの動画IDを

複数の MBOX ファイルを HTML 形式に変換するにはどうすればよいですか?

複数の MBOX ファイルを HTML 形式に変換するにはどうすればよいですか?

この技術ガイドでは、MBOX データを HTML 形式に変換するためのさまざまな方法を提供します。 MBOX は、Gmail、Thunderbird、AppleMail などの多数の電子メール クライアントでサポートされていますが、普遍的にサポートされているわけではありません。 Gmail、Thunderbird、Entourage、AppleMail、Netscape、Spicebird、Pocomail、MozillaMail、Evolution、OperaMail、Incredimail、ClawsMail、Sylpheed、SeaMonkey、Eudora などのクライアントは、MBOX 形式を利用できます。

多くのユーザーは、MBOX 形式をサポートするもの以外の電子メール クライアントを好み、多くの場合、MBOX ファイルを変更する必要があります。 これらの変更を有効にするには、ユーザーは MBOX ファイルを HTML などの形式に変換します。 少数の電子メール クライアントのみでサポー

話題のhtmxを試してみた

話題のHTMXを試して見ました。
WebアプリケーションフレームワークはFlaskです。

HTMXを使った場合と使ってない場合を比較したかったので、最初にHTMXを使ってないアプリを作りました。以下はChatGPTさんに「ボタンを押下すると表示された数値がカウントされる、簡単なアプリの例をお願いします。」で生成したコードそのままです。

“`python:app.py
from flask import Flask, render_template_string, request, redirect, url_for

app = Flask(__name__)

# カウンターの値を保持する変数
counter = 0

# HTMLテンプレート
html = “””

Counter: {{ counter }}

プログラマーへの道 #8 メモ帳アプリを作る（プログラミング入門）のメモ

# 参考にした動画

写経用

本編

# HTMLの要素
“`

“`
“`“`

# “`

“`

HTMLの要素に属しているHTMLのタグ
HTML の見出し要素は6種類ある！
“`

“`のhはHeadingの略で、見出しを意味するタグ。
“`html

だんご

だんご

だんご

だんご

だんご

だんご

“`
ブラウザ<

元記事を表示

プログラマーへの道 #11 配列と繰り返し（プログラミング入門）のメモ

# 参考にした動画

# おみくじを作る編
やりたいこと
現在時刻の分の値を3で割った余り使っておみくじを判定する。

使った道具
new Date()
getTime()
new Date().getTime()

# 写経したコード
“`html

おみくじ

おみくじをひく