htmlのムラゴンブログ

このタグの読者になる 0

HTML・CSS・JavaScriptの違いを超簡単に説明

HTML・CSS・Javascript。この3つはWebサイトを作る時によく出てくる言葉ですが、最初はかなり混乱しやすいです。難しく考えなくて大丈夫です。一言でいうと、 HTML＝骨組み CSS＝見た目 Javascript＝動きです。家に例えるとかなりイメージしやすくなります。 HTMLは... 続きをみる
- ボタン
- 骨組み
- 動き
- 画像
- 家出
- 文字
- webサイト
- 見た目
- 最初
たむ webエンジニア発信 | 少しためになるブログ 2026/05/23 07:11
「html:5」と「!」の違い

HTMLを書き始めたばかりの方が、VS Codeなどでコード補完を使う際によく疑問に思うのが、「html:5」と「!」って何が違うの？という点です。どちらもHTMLのひな形を素早く生成できますが、使い方や現在の主流には違いがあります。今回は、その違いをわかりやすく解説します。 html:5と... 続きをみる
- 生成
- 入力
- テンプレート
- 主流
- 現在
- キー
- 記法
- tab
- 機能
たむ webエンジニア発信 | 少しためになるブログ 2026/05/14 06:47
Astroの本質構造

Astroは「高速なWebサイトを作るための設計思想」が明確にあるフレームワークです。単なるテンプレートエンジンでもなければ、ReactのようなSPAフレームワークとも違います。ここを曖昧に理解していると、使い方を間違えます。結論から言うと、Astroの本質は **「必要なものだけをクライアントに... 続きをみる
- astro
- react
- サーバー
- 静的
- 設計
- 本質
- サイト
- ページ
- ファイル
たむ webエンジニア発信 | 少しためになるブログ 2026/03/21 07:16
フォントサイズ指定の「rem」と「%」の関係

WebサイトのCSSでフォントサイズを指定する方法はいくつかありますが、その中でもよく使われるのが rem と %（パーセント）です。どちらも「相対単位」ですが、基準が違うため仕組みを理解しておかないと意図しないサイズになることがあります。この記事では remと%の関係を整理して解説します。... 続きをみる
- rem
- サイズ
- フォント
- 基準
- 要素
- 相対
- 指定
- 仕組み
- 計算
たむ webエンジニア発信 | 少しためになるブログ 2026/03/09 06:43
検証ツールで出来ることとは

Web制作やフロントエンド開発をしていると、必ず使うことになるのが「検証ツール」です。 Google Chromeなどのブラウザに標準で搭載されている機能で、Webサイトの構造や動作をその場で確認・分析できる開発者向けのツールです。普段サイトを閲覧しているだけでは見えないHTMLやCSS、Java... 続きをみる
- 確認
- ツール
- 検証
- 表示
- 制作
- サイト
- 変更
- 構造
- 機能
たむ webエンジニア発信 | 少しためになるブログ 2026/03/07 16:44
php工房とは何か

Webサイトにお問い合わせフォームを設置するとき、「できるだけ早く」「安全に」「確実に」メールを送れる仕組みを作りたいと考える方は多いはずです。そのときによく使われるのが php工房です。 php工房とは、フォーム送信機能を簡単に実装できるPHPベースのメールフォームシステムです。主に中小規模サ... 続きをみる
- php
- 工房
- フォーム
- 送信
- メール
- サイト
- 実務
- メールアドレス
- 機能
たむ webエンジニア発信 | 少しためになるブログ 2026/03/03 07:11
バニラでの記述でもSassは使えるのか

結論から言うと、使えます。 SassはPHPやWordPress専用のものではなく、HTML＋CSSだけの、いわゆる“バニラ”な環境でも問題なく使えます。誤解されがちですが、Sassは「特定のフレームワークに依存する技術」ではありません。あくまでCSSを効率よく書くためのプリプロセッサです。最終的... 続きをみる
- コンパイル
- バニラ
- 環境
- 有馬線
- ファイル
- 制作
- 効率
- react
- サイト
たむ webエンジニア発信 | 少しためになるブログ 2026/03/02 07:35
nth-child はどういう時に使う？

CSSを書いていると、「この中の○番目だけデザイン変えたい」「奇数行と偶数行で見た目を変えたい」そんな場面に必ず出てきます。そのときに使うのが nth-child です。 nth-child とは何か nth-child は、「親要素の中にある子要素の順番」に注目してスタイルを当てるための... 続きをみる
- デザイン
- 要素
- 偶数
- 構造
- クラス
- 奇数
- cms
- 増減
- 番目
たむ webエンジニア発信 | 少しためになるブログ 2026/01/30 08:58
Resendでできること

Webサービスやアプリを作っていると、「ユーザーにメールを送りたい」という場面は必ず出てきます。例えば、会員登録後の確認メール予約完了のお知らせパスワード再設定メールお問い合わせへの自動返信こういったアプリから送るメールを、シンプルかつ安全に実装できるのが Resend です。 Re... 続きをみる
- メール
- 送信
- アプリ
- react
- api
- 実装
- 確認
- 管理
- 設定
たむ webエンジニア発信 | 少しためになるブログ 2025/12/24 07:58
バニラHTML・バニラJavaScriptの「バニラ」って何？

Web制作やプログラミングの話をしていると、「バニラJavascriptで書く」「これはバニラHTMLだけでいけます」 …こんな言い方を見かけることがありますよね。この“バニラ（vanilla）”って、いったい何を意味しているのか？実はこれ、「何も混じっていない素の状態」を表す言葉です。 ... 続きをみる
- バニラ
- 理解
- 意味
- 言葉
- プログラミング
- 開発者
- 純粋
- コード
- スピード
たむ webエンジニア発信 | 少しためになるブログ 2025/12/03 08:12
SEO対策としてHTMLに書くべき内容

ホームページのSEO対策というと、キーワード選定や被リンクの話が多くなりがちですが、まずは HTMLの中身そのものを最適化することが非常に大切です。どれだけ内容が良くても、検索エンジンに正しく伝わっていなければ評価されません。この記事では、HTMLファイルに書いておくべき基本のSEO対策を、初心... 続きをみる
- ページ
- 内容
- seo
- 検索エンジン
- 検索
- サイト
- 説明
- 見出し
- 対策
たむ webエンジニア発信 | 少しためになるブログ 2025/11/25 10:19
loading="lazy" の正しい使い方

Webサイトの読み込み速度を改善したい時に、もっとも簡単で効果が高い施策のひとつが画像の遅延読み込み（Lazy Load）です。HTMLの画像タグに loading="lazy" を付けるだけで、多くの画像を一度に読み込まず、必要になったタイミングで読み込みが開始されるようになります。この記事... 続きをみる
- 画像
- 読み込み
- lazy
- 効果
- 速度
- ページ
- 改善
- webp
- 表示
たむ webエンジニア発信 | 少しためになるブログ 2025/11/16 20:41
YouTube動画の埋め込み方が…←gooの話

もうじき投稿が出来なるけど、levieが使っているノートパソコンでは、YouTube動画を共有クリックでgooの埋め込みが選択できたから、貼る事が出来たんだけど、その共有リストからいつの間にかgooが外されていた～。ん??、もしかしてムラゴンにインポートした投稿上のYouTubeは貼り直さずとも聴け... 続きをみる
levie When I Dream ~reprise~ 2025/09/25 23:15
バニラのHTMLでコンポーネント化する方法

Webサイトを制作していると、ヘッダー・フッター・ナビゲーションなど共通部分をまとめて管理したいと思う場面が多くあります。 ReactやAstro、WordPressのようなフレームワークを使わなくても、実は純粋なHTML（バニラHTML）でもコンポーネント化する手段はいくつか存在します。ここでは代... 続きをみる
たむ webエンジニア発信 | 少しためになるブログ 2025/09/14 07:58
ムラゴンblogへの引っ越し : 解説再び

gooから他所への引っ越しを、もう大勢の人が済ませているだろうと思う。当blogは4月になんとなくID登録をしてみて、時々テスト投稿をして操作を練習していた…ムラゴン…に引越しを決めた8月上旬だった。それまではgooとは違う内容を時たま投稿したり丸ごと移植して操作練習をしていた感じ(微笑)8月上旬に... 続きをみる
levie When I Dream ~reprise~ 2025/09/08 22:25
# html
- バージョンアップした『アクアリウム的な感じ』のコード
- InnerHTMLって使ってはいけないの？
- 【HTML】ARっぽいHTMLのひな型
- リンクつきテキストの文字の色が、変化してしまった場合の修正方法…基礎編その2
- 久々のＨＴＭＬ（とｃｓｓ）編集
- DOMとJavascriptの関係性
- ブログに使っているCSS・スクリプトまとめ
- Python GUIが劇的に美しく！pywebview + HTML/CSSで「Web・GUI二刀流」ツールを作る方法
- HTMLとJavascriptの組み合わせではなく、Reactを使うメリットは何ですか。
- ブラウザのブックマークバーに独自アイコンを表示する方法
- X-Frameとは何のためにありますか
- 無料のレンタルサーバー使ってみる(∩´∀｀)∩(再) XREA【後編】
- Markdown HTML Converter Tool - Client-Side Parser and Free Online Converter | hidekazu-konishi.com
- スマホでプログラミングはできる？スマホで開発ができるツール6選
- 本気でプログラミングするならパソコンの開発環境を整えよう！
ムラゴンでの調整作業は ➕＋

gooブログ→ムラゴンへの、エクスポート、インポートは、特に苦もなくすんなり移行は済んだ…。投稿量、文字数、挿入した画像数が、思ったほど多くなかったからかな。ファイルは20MBと7MBの2つのみだった事は前に書いたけど、gooブログはムラゴンへの移行推奨は今だにしてないから、ホントにあっという間にエ... 続きをみる
levie When I Dream ~reprise~ 2025/08/25 23:15
HTMLでheaderやfooterを共通パーツとして読み込む理由

Webサイトを制作する際、ほとんどのページに共通して配置されるパーツがあります。代表的なのが「ヘッダー（header）」と「フッター（footer）」です。これらを共通パーツとして管理し、複数のページから読み込む方法には、以下のようなメリットがあります。 1. 更新作業が一箇所で完結するヘッダー... 続きをみる
- ページ
- 共通
- パーツ
- ヘッダー
- サイト
- コード
- 読み込み
- 更新
- デザイン
たむ webエンジニア発信 | 少しためになるブログ 2025/08/08 07:32
webエンジニアはデザインも出来た方がいい？

現在HTMLやCSSを学習されている方に、「デザインも自分で出来た方がいいですか？」というご質問をよく頂きます。結論、「デザインが出来るに越したことはないが、絶対ではない」と考えています。デザインが出来た方がいい理由自分一人でサイトを作るとなった時、デザインまで出来た方が稼げるからデザインが... 続きをみる
- デザイン
- コーティング
- 理由
- やり方
- 学習
- サイト
- 勉強
- 分担
- 手取り
たむ webエンジニア発信 | 少しためになるブログ 2024/09/24 09:46
ブログを始めてよかったこと3選

1: まずは、植物に詳しくなったことグーグルレンズの登場も大きかったです。 iPhoneでさっと写真を撮って、さっと調べる。サクサク進みます。庭の植物、道端の草花・・備忘録を兼ねて、ブログにポストすることで、さらに興味が湧くという良い循環。 2: いろいろなものの考え方に触れることができた... 続きをみる
青い鳥 70歳。同級生夫婦のゆるい暮らし 2023/10/08 09:09
突然ですが、ブログはじめます！

ブログにたどり着いたぁ！ブログ書きたいって思いついちゃいました！ WEBデザインの勉強をしているので、ワードプレスを調べてたんです。いつのまにかブログの書き方ページになり、読み入ってしまったよ。ワードプレスを設定しようかなと思って読み進めたら、初心者はまず登録して書き始める事が大事らしい。う... 続きをみる
- ブログ
- ワード
- フォーム
- ipad
- 東京都
るん ne-coのブログ 2023/03/14 17:51
どうしてこうなった？（11月6日）

こんばんはワードプレスの方で公開しましたのでこちらにも投稿したいと思います。下のリンク先からどうぞ
Kyoko Kyokoの徒然日記 2022/11/06 17:29
画像の扱い方・JPGとPNGの違い - スマホ対応

画像の重さを携帯表示に合わせてあげる事が求められる時代です。JPGとPNGの違いと画像変換テクニック SEO アクセシビリティアクセシビリティとは、英語で Accessibility 近づきやすさ文字のサイスや色コントラスト見やすさサイト構造の利便性案内が適切であること画像表示に時間を取ら... 続きをみる
- ブログ
- ムラゴン
- 画像圧縮
- JPG
- PNG
- SEO
- アクセシビリティ
- 軽量
- スマホ対応
- 東京都
TAKAさんプラズマ宇宙論・リゾナンス・プランナームラゴンブログ始め TOKYO! 2022/09/28 12:02
webページ更新計画

デジタル百葉箱のwebページ、自分で見てみて改良ポイントがいくつかあります。 index.html からリンクしている過去のデータのページ（その1）で、日付を選択する部分。これが、初期設定値が2019年1月1日になっています。これを「今日」にしたい。（チャレンジ1） PHPとかジャバスクリプ... 続きをみる
おーデジタル百葉箱製作覚え書き 2019/12/27 09:58
gnuplotのトーフ化問題解決編

この問題に丸一日潰れました。文字化けです。いろいろググりました。いろいろ試してみました。結果だけ言うと、次の3点で解決しました。 gnuplotに日本語フォントを指定する。 gnuplotに渡すスクリプトを別ファイルにする。ファイルが違うと変数は受け渡せない？みたいなので、いろいろじか打ち... 続きをみる
- ラズベリーパイ
- 百葉箱
- ラズパイ
- カメラ
- 自作
- php
- gnuplot
- king gnu
- ぐにゅー
おーデジタル百葉箱製作覚え書き 2019/12/21 21:58
ほどほどにwebページ完成

やりました。webページが無事表示できました。しかもラズパイ上じゃなくて、同じネットワークのこのPCから見れます。まあ当たり前といえば当たり前なんですけど、自力でやり遂げた嬉しさがあふれます。寒いので鼻水もあふれます。 index.htmlに表示される写真画像は毎時0,10,20,30,40,... 続きをみる
おーデジタル百葉箱製作覚え書き 2019/12/19 20:33
サイトを作成する--説明編--

皆さんこんにちは。最近では、小学校の授業でプログラミングが科目としてあったりしていますが、御覧の皆さんは、プログラミングはできますか？サイトは大まかに分けると2つに分類されます。 1つ目はサイトの表側です。よく皆さんが目にしている部分ですね！ 2つ目はサイトの裏側です。ログインだとか会員登録だと... 続きをみる
- HTML
- CSS
- サイト作成
- css
- プログラミング
- サイト
- 日本
翔サイト作成を教えます 2016/08/28 12:28
これから、お仲間入りして下さい！！

手芸の好きです。編み物や洋裁をやってます。皆さんの作品を見せて下さいね。宜しくお願いします！！
maririn nijinooka3776's Blog 2014/09/17 23:04
# CSS
- ChatGPT向け画像生成プロンプト「セクマイさん向け自己紹介カード」
- はてなブログProでスマホ版の「読者になる」ボタンを非表示にする方法【CSSでは消えなかった】
- HTMLとCSSの本が届きました＋雑記(コードをちょこっとお知らせをちょこっと)
- リンクつきテキストの文字の色が、変化してしまった場合の修正方法…基礎編その3
- リンクつきテキストの文字の色が、変化してしまった場合の修正方法…その1
- BeerCSSの使い方｜CDNだけでMaterial Design 3のUIを実装する方法
- インフラ設計におけるオリジンってどういうもの？
- 動作確認のお願い　※終了したので本来の位置に戻します
- SWELLのフッター1・2・3上の空き部分をCSSで詰める方法
- 今はこれが精一杯
- 更新情報（2026/05/26）
- ブログに使っているCSS・スクリプトまとめ
- Python GUIが劇的に美しく！pywebview + HTML/CSSで「Web・GUI二刀流」ツールを作る方法
- X-Frameとは何のためにありますか
- はてなブログでもしもアフィリエイトを活用する③　かんたんリンクのレイアウトを調整する
# サイバーセキュリティ
- TripleDESって何が弱点？
- JP1がやっているようなことをコンテナ群で行うことってできる？
- 【速報】米国政府がAnthropicのAI最上位モデルを外国人に禁止──「Fable 5・Mythos 5」緊急停止の全容
- 「最凶AI」ミュトス時代にメガバンクが安心な5つの理由｜預金・資産を守るために知っておくべきこと
- AWSにおけるENIってオンプレで言うと何？
- keepalivedのヘルスチェックって80ポート(http)で行うのがデフォだと思うんですけど、なぜL7層で行うんですか？
- グレートファイアウォールのような仕組みを導入している国や地域
- ICカードってICカード側に秘密鍵を持つもの？公開鍵を持つもの？
- ハニーポットの観測(T-Pot:2025/06/14～)Observation of Honeypot
- ハニーポットの観測(T-Pot:2025/06/07～)Observation of Honeypot
- ハニーポットの観測(T-Pot:2025/05/31～)Observation of Honeypot
- ハニーポットの観測(T-Pot:2025/05/24～)Observation of Honeypot
- ハニーポットの観測(T-Pot:2025/05/17～)Observation of Honeypot
- ハニーポットの観測(T-Pot:2025/05/10～)Observation of Honeypot
- ハニーポットの観測(T-Pot:2025/05/03～)Observation of Honeypot

htmlのムラゴンブログ

人気のカテゴリー