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

WEB

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

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

ざっと4つもやることがあります。   ①大きくする  ⇒ <font size=”3″>テキスト</font> size=”○” ○には、文字のサイズを数字で書き込みます。   <例>size=”3″ にした場合 ⇒ <font size=”3“>テキスト</font>と打ち込んだはずが、なぜかこういう風に置き換わります。 <span style=”font-size:medium;”>size=”3″ にした場合</span>   どうやらブログの設定のようです。span style=””~は指定された一部分を変えるコードです。 サイズ1 サイズ2 サイズ3 サイズ4 サイズ5 サイズ6 サイズ1⇒ xx-small    サイズ2⇒ small    サイズ3⇒ medium    サイズ4⇒ large サイズ5⇒ x-large    サイズ6⇒ xx-large ブログを書く上で必要なのでメモ。  
スポンサーリンク

  ②太くする  ⇒ <strong>テキスト</strong> テキストを強調の意味がある”strong”ではさむ   ③色を変える ⇒ <font color=”#FF708B”>テキスト</font> color=”#○”の○の部分に6ケタのカラーコードか、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” /><strong><font size=”3″ color=”#FF708B”>ワードを開いてその他の形式を保存する</font></strong>   step1 ワードを開いてその他の形式を保存する   思うような感じに出来ました! ちなみにブログの仕様では⇒ <strong><span style=”color: #ff708b; font-size:medium;”> ワードを開いてその他の形式を保存する</span></strong>になっていました。どちらでも大丈夫なのですね。とりあえず完成です。  
スポンサーリンク

 ]]>

コメント

タイトルとURLをコピーしました