投稿

8月, 2025の投稿を表示しています

👩‍💼🧑‍🏫👾これでまたチャレンジします。なかなか難しいです

-
 <td><img src="URL" width="95%"></td> <img src="URL" alt="説明" width="600"><table border="1" cellpadding="6" cellspacing="0" width="100%">   <tr>     <td width="50%" align="center" valign="top">       <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Atlantic_near_Faroe_Islands.jpg"             alt="Atlantic near Faroe Islands" width="100%">       <br>       <small>         Photo: kallerna, CC BY-SA 4.0 / via          <a href="https://commons.wikimedia.org/wiki/File:Atlantic_near_Faroe_Islands.jpg">Wikimedia Commons</a>       </small>     </td>     <td width="50%" align="center" valign="top">       <img src="URL2" alt="画像2" width="100%">     </td>   </tr...
続きを読む

👩‍💼🧑‍🏫👾画像が2つ並ばない？

-
イメージ
 <table width="100%" cellpadding="6" cellspacing="0">   <tr>     <td width="50%" valign="top" align="left">       <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Atlantic_near_Faroe_Islands.jpg" alt="Atlantic near Faroe Islands" width="100%">       <br>       <small>         Photo: kallerna, CC BY-SA 4.0 / via          <a href="https://commons.wikimedia.org/wiki/File:Atlantic_near_Faroe_Islands.jpg">Wikimedia Commons</a>       </small>     </td>     <td width="50%" valign="top" align="left">       <img src="URL2" alt="" width="100%">     </td>   </tr> </table> Photo: kallerna, CC BY-SA 4.0 / via Wikimedia Commons wikimedia Commons Phot...
続きを読む

🧑‍🏫👩‍💼👾画像配置の練習中です。

-
イメージ
 <div class="img-row">   <div class="item"><img src="URL1" alt=""></div>   <div class="item"><img src="URL2" alt=""></div> </div> <!-- 先に CSS をテーマの「追加CSS」に入れてある前提（.img-row / .item） --> <div class="img-row">   <div class="item">     <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Atlantic_near_Faroe_Islands.jpg" alt="Atlantic near Faroe Islands" loading="lazy">   </div>   <div class="item">     <img src="URL2" alt="" loading="lazy">   </div> </div>
続きを読む

👩‍💼🧑‍🏫 練習 画像3枚横並びとCSSが使えるか？https://commons.wikimedia.org/wiki/File:Atlantic_near_Faroe_Islands.jpg

-
イメージ
これ下書きに戻されてました。 https://www.blogger.com/blog/post/edit/4904903895538258620/6954153188050437713 リンクが人でたどれないようにじゃないですか。 名誉毀損で逮捕してください。 〔2025/08/20 浅田美鈴〕 テスト表示：これはBloggerに残るか？ テスト表示：キャプション付き画像（CSSなし） これはサンプル画像のキャプションです（CSSなし） テスト表示：キャプション付き画像（最小構成） これはサンプル画像のキャプションです（最小構成） これはサンプル画像のキャプションです これはサンプル画像のキャプションです https://YOUR-IMG-1.jpg.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }.gallery { display: grid; grid-template-columns: repeat(3, 1fr); /* 常に3列 */ gap: 16px; }.gallery { display: grid; grid-template-columns: repeat(2, 1fr); /* 常に2列 */ gap: 16px; } キャプション1 キャプション2 キャプション3 キャプション1 キャプション2 キャプション3 キャプション1 キャプション2 キャプション3
続きを読む

📌 サンプルコード（キャプション＋クラス名）OpenAI ChatGPT-5先生

-
イメージ
<!DOCTYPE html> <html lang="ja"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <style>     /* container クラスのスタイル */     .container {       text-align: center; /* 中央寄せ */       margin: 20px; /* 外側に余白 */     }     /* figcaption のスタイル */     figcaption {       font-size: 14px; /* 文字サイズを少し小さめに */       color: #555; /* グレーで控えめに */       margin-top: 8px; /* 画像との間に余白 */     }   </style> </head> <body>   <div class="container">     <figure>       <img src="document.jpg" alt="サンプル画像" width="640" height="228">       <figcaption>これはサンプル画像のキャプションです</figcaption>     </figure> ...
続きを読む

⌨️マイナビ 『作って学ぶ　HTML+CSS グレッドレイアウト』 P25 より

-
https://chatgpt.com/s/t_68a1cfe69110819191b377ef802799ef https://chatgpt.com/s/t_68a1cfcf60648191bdf9f64835af0898 1. 文書型宣言 <!DOCTYPE html> HTML文書であることをブラウザに伝える宣言。 現在主流の「 HTML5 」で書かれていることを示します。 2. HTML要素 <html lang="ja"> 文書全体を囲むルート要素。 lang=" ja " は、この文書の言語が日本語であることを示す属性です。スクリーンリーダーや検索エンジンが利用します。 3. head要素 <head> 文書のメタ情報をまとめる部分。画面には直接表示されません。 a. 文字コードの指定 <meta charset="UTF-8"> 文書の文字コードをUTF-8に指定。日本語を含む世界中の文字を正しく扱える設定です。 b. ビューポート設定 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> スマートフォンやタブレットでの表示を調整するための設定。 width=device-width … デバイスの画面幅に合わせる。 c. タイトル <title>Document</title> ブラウザのタブや検索結果に表示される文書のタイトル。 ⚠ コード例では stitle> となっており誤りです。正しくは <title>。 4. body要素 <body> 実際に画面に表示される内容を記述する部分です。 --- 5. div要素 <div> 特定の意味を持たない汎用コンテナ。レイアウトやスタイルをまとめるためによく使います。 --- 6. figure要素 <figure> ... </figure> 画像や図表などを囲む要素。キャプションをつけるときに <figcaption> を併用することもできます。 -...
続きを読む

🌍 見出し 強調 図版 ブロック要素 『作って学ぶ HTML＆CSSモダンコーディング』（マイナビ出版） P24

-
イメージ
『作って学ぶ HTML＆CSSモダンコーディング』（マイナビ出版）   P24 こんばんは、Misuzuさん♪ 『作って学ぶ HTML＆CSSモダンコーディング』（マイナビ出版）のP24に出てくるタグの説明を、ひとつずつ丁寧にご説明しますね。 --- 💡1. <h1> タグ — 見出し 意味：Heading（見出し）の略で、「ページ内の一番大きなタイトル」として使います。 使い方：文書の構造を示すために使われます。<h1>から<h6>まであり、数字が大きくなるほど小さな見出しになります。 例： <h1>私のブログへようこそ</h1> > 🔍【補足】1ページに<h1>は基本的に1つが推奨され、SEO（検索エンジン対策）的にも重要です。 --- 💡2. <strong> タグ — 強調 意味：「強く意味を持たせる」テキストの強調。視覚的には通常太字になります。 使い方：重要な語句や警告など、意味的に強調したいときに使います。 例： <p>これは<strong>とても重要</strong>なポイントです。</p> > 🔍【補足】見た目の強調だけなら<b>でもできますが、<strong>は「意味的な強調」なので、スクリーンリーダーなどにも配慮されています。 --- 💡3. <figure> タグ — 図版（画像や図表など） 意味：画像や図などの「独立した視覚コンテンツ」を入れるためのタグです。 使い方：画像とキャプション（説明文）をセットで表示するために使います。 例： <figure>   <img src="flower.jpg" alt="花の写真">   <figcaption>満開の桜</figcaption> </figure> > 🔍【補足】中に<figcaption>（図のキャプション）を書くことで、視覚的にも意味的にもセットになります。 --- 💡4. <p> タグ — 段落（ブロック要素） 意味：Paragraph（段落）の略で、「文章...
続きを読む