Markdown で画像を追加する場合:
構文を以下に示します。
Markdown で画像サイズを変更する場合:
Markdown で画像のサイズを変更するには、HTML の「 」タグを使用します。このタグのみが、Markdown で画像のサイズを変更するのに役立ちます。この「
」タグの構文を以下に示します。
< 画像 ソース = 「画像名」 すべての = 「」 幅 = '価値' 身長 = '価値' >
幅と高さの値を数値とパーセンテージで設定することで、画像のサイズを変更できます。この「 」タグの style 属性を使用して、Markdown で画像のサイズを変更することもできます。
例 # 01:
Markdown コードの実行には Visual Studio Code を使用します。 Markdown コードの場合、テキスト エディターとプレビュー ウィンドウの両方を開く必要があります。テキスト エディターでは、入力を追加する必要があり、出力はプレビュー ウィンドウで取得されます。テキスト エディターでは、最初に「!」を配置して Markdown に画像を追加します。記号を入力してから、「代替テキスト」を追加する角括弧を追加します。次に、画像のパスを追加します。
コードと画像の両方が同じディレクトリに保存されるため、画像の名前と拡張子を入力します。したがって、ここに「cloud.png」という名前を追加するだけです。次に、「Cloud Image」というテキストを追加します。これは、マウスオーバー時にのみ表示されるテキストです。これで、画像が追加され、プレビュー ウィンドウにもこの画像が表示されます。
上に表示されている Markdown コードにこの画像を追加したので、雲の画像を以下に示します。
例 # 02:
ここで、「 」タグを使用して、この画像のサイズを変更します。まず、画像の名前またはパスが追加された「src」を入力します。この後、「alt」を配置して「Cloud Image」を調整します。画像の「幅」を「230」に調整しました。 「高さ」は「300」に調整されます。また、この「
」タグに「タイトル」を追加し、この「タイトル」の値は「クラウド タイトル」です。これで、画像のサイズが変更されました。プレビュー ウィンドウで、イメージの変更されたサイズを確認できます。
この結果の画像のサイズは変更されており、画像の「幅」は「230」、「高さ」は「300」です。これは、Markdown コードでこの幅と高さを調整したためです。
例 # 03:
画像の「幅」と「高さ」の値をパーセンテージで変更することもできます。画像の名前またはパスを追加し、「alt」を「Cloud Image」に調整した後、画像の「幅」と「高さ」を「50%」に設定しました。次に、「タイトル」を追加して、このタグを閉じます。
「 」タグでサイズを変更した画像です。画像の高さと幅は「50%」です。
例 # 04:
現在、この「 」タグの「style」属性を使用して、Markdown で画像のサイズを変更しています。画像の名前を追加してから、「alt」属性を追加する必要があります。この後、「スタイル」属性を配置し、その値として「幅と高さ」を追加しました。設定した「幅」はピクセル単位で「500px」、「高さ」は「400px」です。これで、画像サイズがそれに応じて調整されます。
この結果の画像のサイズが更新されました。その「幅」は「500px」になり、「高さ」は「400px」になりました。これは、スタイル属性で幅と高さを調整した上記の Markdown コードの結果として表示されます。
例 # 05:
別の画像を追加しています。しかし、この Markdown コードでは、画像のサイズを変更しません。画像のサイズは、「 」タグを使用した場合にのみ変更されます。 「！」を入れます。次に、角括弧内に「Sun Image」というテキストを追加します。角かっこを閉じた後、画像名「New_sun.png」を挿入したかっこを配置し、マウスオーバーで表示されるテキストを追加します。画像の元のサイズが結果に表示されます。
Markdown コードにこの画像を追加したため、太陽の画像が表示されます。また、「 」タグを使用しないと画像のサイズを調整できないため、画像の元のサイズが表示されます。
例 # 06:
「 」タグを使用して、この画像のサイズを変更しています。まず、サイズを変更したい画像の名前またはパスを「src」フィールドに追加します。画像の「幅」と「高さ」はともに「300」に変更されています。画像のサイズが変更されました。プレビュー ウィンドウに、イメージの新しいサイズが表示されます。
画像の幅と高さは両方とも「300」に変更されています。
例 # 07:
画像の「幅」と「高さ」の値をパーセンテージで設定することで、これらの寸法を簡単に変更できます。画像の「幅」と「高さ」の両方を「40%」に調整してから、このタグを閉じました。
これは、高さ 40%、幅 40% の画像です。画像の名前を追加した後、この幅と高さを「 」タグ内に追加しました。
例 # 08:
現在、「 」タグの「style」属性を使用して、Markdown で画像のサイズを変更しています。画像名と「alt」属性を追加した後、「style」属性に値として「幅と高さ」を追加しました。指定する「幅」は「450px」ですが、「高さ」も「450px」に調整されています。これらの新しい幅と高さの値に応じて、画像サイズが適切に変更されます。
このコードの結果は、下に表示されるプレビュー ウィンドウにも表示されます。以下の結果では、この画像の幅と高さの両方が「450px」になりました。
結論：
このガイドでは、画像を追加する概念について詳しく説明し、Markdown で画像のサイズを変更する方法についても説明しました。 Markdown に画像を追加し、「 」タグを使用してサイズを変更し、これらすべてを Markdown で行う方法を示しました。幅と高さの値を数値とパーセンテージで指定して、画像のサイズを変更しました。また、Markdown で画像のサイズを更新または変更するために、「
」タグの style 属性を利用しました。