htmlで画像とテキストを中央に並ばせる方法

スポンサーリンク
まず編集前の画像がこちら↓ タイトルのSTEP1　ワードを～の部分を画像に合わせて文字を大きく太くし、さらに中央に並ばせ、ピンクにしたいと思います。

①大きくする　②太くする　③色を変える　④画像とテキストを中央に並ばせる

ざっと４つもやることがあります。 ①大きくする ⇒　テキスト size=”○”　○には、文字のサイズを数字で書き込みます。＜例＞size=”3″ にした場合 ⇒ テキストと打ち込んだはずが、なぜかこういう風に置き換わります。 size=”3″ にした場合 どうやらブログの設定のようです。span style=””～は指定された一部分を変えるコードです。サイズ1 サイズ2 サイズ3 サイズ4 サイズ5 サイズ6 サイズ１⇒ xx-small サイズ2⇒ small サイズ3⇒ medium サイズ4⇒ large サイズ5⇒ x-large サイズ6⇒ xx-large ブログを書く上で必要なのでメモ。スポンサーリンク
②太くする ⇒　テキスト テキストを強調の意味がある”strong”ではさむ ③色を変える　⇒　テキスト color=”#○”の○の部分に６ケタのカラーコードか、redやYellowなどのカラーネームを書き込む ④画像とテキストを中央に並ばせる　⇒<img src=”画像の場所／ファイル名” alt=”画像の説明” align=”middle”> 画像のimg要素のテキストにalign=”○”を付け加えて画像に並ぶテキストの位置を指定します。 align=”top” 上に揃える align=”middle” 中央に揃える align=”bottom” 下に揃える ①～④をまとめて書き込みます <img src=”画像を保存している場所/step_1.png” alt=”step1″ width=”100″ height=”40″ align=”middle” />ワードを開いてその他の形式を保存する ワードを開いてその他の形式を保存する 思うような感じに出来ました！ちなみにブログの仕様では⇒　 ワードを開いてその他の形式を保存するになっていました。どちらでも大丈夫なのですね。とりあえず完成です。スポンサーリンク
]]>