43号線を西へ東へ

フリーランスの備忘録、アウトプットの実験場

HTML&CSS

コード部分を折りたたむ【detailsタグ】の使い方

長いCSSコードやPythonコードなどを折りたたんで隠したり、FAQのタイトルをクリックすれば解説が表示されたりするHTMLタグがディテイルズタグ「<details>〜</details>」。 Detailsタグの例 内容が折りたたまれて、隠されています。 <details> は2014年に正式導入されたHTML5のタグだが、</details>…

シンプルなブログテーマに回帰しました【2024年春】

ブログ開設1周年、すっきりとしたテーマに変更しました。 備忘録です。

汎用性の高い方の日数計算ツール(JavaScript)

前回、経過日数を自動計算するJavaScriptの記事を書きました。ランニングを再開してから何日経ったかを知るためのものです。 driveon43.com 設定した開始日が2024年2月27日です。その日に生まれたお子さんや、何かを始めた人向けのツールなので、それ以外の…

自動で日数を数える!あなたの進捗ブログに追加すべきJavaScriptコード

超個人的なJavaScriptの便利ツールをご紹介します。 走り始めてから何日だったっけとすぐに振り返れるような日数計算ツールです。私以外の誰が得するのか謎なツールですが、日付とタイトルを変更すればみんなに便利になツールになりそうです。 用途に合わせ…

はてなブログでわかりやすい手順説明を実現するステップバーの導入方法

自分の備忘録として役立っている本ブログです。PCの設定、アプリの使い方、たまには料理だったりと、何かのやり方を記載した記事が多くなります。 手順を書き残すときに、ステップがわかりやすい表示を導入されているブログがあり、ずっと気になっていました…

はてなブログの記事の画像を横並びにする

下書きに放置されたされていた記事の掘り起こしです。多分8月くらいに書いた記事ですが、もったいないので修正して投稿します。 画像をふんだんに使った記事は、スクロールが多くなりがちです。たとえばアプリの紹介等をアップする時は画像を横並びにしたほ…

ブログでチャートを書くMermaid記法

ブログやホームページでフローチャートを比較的簡単に作成する方法を調べました。Mermaid(マーメイド)記法と言います。箇条書きのテキストをハイフン---や-->でつなげたりすることでフローチャートなどの図が作成できます。 シーケンス図やガントチャート…

ブログデザインのカスタマイズ

はてなブログの見た目の変更は、テーマのインストール等で行います。6月から現在のテーマ「コンテンツ」に変更するにはしたものの、細かいところは放置していました。 100記事到達したのを機に、細かいところを改善しました。いろいろ調べましたが、次やるとき…

基礎代謝をJavaScriptで計算する 89/100

Apple Watchでは、総消費カロリーや基礎代謝が自動的に計算されているんです。この数値って妥当な値なのか、よくある計算式で計算して検証してみました。 近頃Apple Watchの投稿が多くなって恐縮ですが、現在ムーブ(アクティブエネルギー)の指標を増加させ…

Progeteは老眼にも優しい【HTML&CSS】85/100

先日、ホームページ言語のHTMLとCSSの勉強を始めた記事を書きました。 driveon43.com Progateというサイトを使いだして3日目になりました。明日も継続できていれば、三日坊主は回避したことになります。継続して学べるように、サイトの構成がよく考えられて…

Web界隈のたしなみ、HTML・CSS・JavaScriptを学ぶ 83/100

プログラミングの学びなおしをしています。と言ってもホームページの基幹技術HTMLとCSSです。ホームページの構造と見た目を作るコードですね。