今さら聞けないHTML　

inputのnameの設定早見表

姓名	name
姓	family-name
名	given-name
メールアドレス	email
会社名	organization
電話番号	tel
郵便番号	postal-code
都道府県	address-level1
市区町村	address-level2
番地・マンション名（1行目）	address-line1
番地・マンション名（2行目）	address-l 元記事を表示 cssで二重縁取りのテキストを作る方法 【簡単】 ## 作れるもの See the Pen Untitled by sattya (@San-3) on CodePen. 元記事を表示 プロフィールページのテンプレートを作ってみた！ [僕のホームページ](https://pocketpoem24493.github.io/ “僕のホームページ”)見てくれましたか?(圧) [そのホームページ](https://pocketpoem24493.github.io/ “僕のホームページ”)のデザインにこだわったのでテンプレートとして配布したいと思います(そこまでキレイではない) 下がホームページのスクショです。  [結構こだわりました。](https://pocketpoem24493.github.io/ “僕のホームページ”) アイコンはルート直下に`profile.jpg`としてアイコンを置いておけば一番上の丸アイコンが変えられます。また、拡張子がGifなどにしたい場合はソースコードから``から`src`属性変えてください。それから、このソースコードと全く同じ物 元記事を表示 片側がフェードイン/アウトするスプリットレイアウト実装してみた ## スプリットレイアウトって？ スプリットレイアウトとはSplit（分割）の通り、画面を2カラム、あるいは3カラムなどに分割した画面レイアウトのことです。 パッと思いつくのは2カラムで片方は固定されていて、もう片方はスクロールが可能なデザインかなと思います。 最近だとスマホファーストが主流になっているのもあって、PCで閲覧した際にメインのコンテンツはスマートフォンのレイアウトになっていて、これを中央に配置しつつ、左右はメニューや読ませたい文章、写真なんかが固定されているのも結構見るな～という気がします。 参考までに、こういうサイトのことです。 https://www.nikoand.jp/shitamachi_renaissance/ https://www.mtrainier.jp/plantbased/ スプリットレイアウトについていろいろ調べていたら2017年に流行して、2019年頃にも再熱、そして昨今でもよく見かけるデザインの1つなので、Y2Kしかり流行って巡るものですね。 ## こういうスプリットレイアウトを実装したよ 本題なのですが、今回以下のような仕様のサ 元記事を表示 Node.jsのBufferを使って、画像をbase64のバイナリ形式に変換してHTMLに埋め込む Puppeteerというライブラリを使ってHTMLからPDFを作成していた時に、画像ファイルが表示されない（読み込まれない）という問題が発生 →ローカルのファイルは読み込めないのでバイナリで埋め込む必要がある、とのことだった Bufferを使って変換する方法が簡単にできたのでメモ まず、画像をバイナリに変換する方法 “`JS:logic.js // 画像ファイルを読み込む //../../assets/image.pngは読み込むファイルのパス const imageBuffer = fs.readFileSync(path.resolve(__dirname, ‘../../assets/image.png’)); // BufferをBase64文字列に変換 const base64String = imageBuffer.toString(‘base64’); “` HTMLの実装 “`HTML:template.html “` バイ 元記事を表示 固定ヘッダがあるモーダル内でさらに内部ヘッダを固定する方法 ## 説明 – `updateInnerHeaderPosition`関数は、外側のヘッダの高さを計算し、内部ヘッダの`top`プロパティを動的に設定します。 – ページが完全に読み込まれたとき（`DOMContentLoaded`イベント）、およびウィンドウがリサイズされたとき（`resize`イベント）にこの関数を呼び出します。 – `MutationObserver`を使用して、外側のヘッダに変更があった場合に関数を呼び出します。これにより、外側のヘッダの高さが動的に変更された場合にも内部ヘッダの位置が自動的に更新されます。 “`html menu abc 元記事を表示 【こういうときどうすればいいんだっけ】HTML/CSS逆引きTips【個人用/随時追記】 個人的にHTMLやCSSって、既存のものをちょっといじるとかシンプルなものであれば問題無くできるけど、「1からページを実装」とかになると意外と分からないことも多くて意外と時間がかかってしまう… 最近はChatGPTとかで聞けば色々すぐ教えてくれるけど、毎回調べているようでは時間もかかってしまう。 「こういうデザイン、配置にしたいんだけど、どうすればいいんだっけ？」といったときにすぐに確認できるような、逆引きのTipsみたいなのを自分用に蓄積していくようにする。 (1から調べるより、ある程度アタリがついている方が調べる時間も短縮できると思う) # 要素を横並びにしたい(display: flex) `display: flex;` を指定すると、すべての子要素が横並びになる。子要素がフレックスアイテムとして扱われるため、ブロック要素も横並びになる。 ```html Paragraph 1 Paragraph 2 Paragraph 3