スタイルシートでGoogleアドセンスのコードを横に並べて配置することもできる;FC2ブログ・プチカスタマイズ   

スタイルシートでGoogleアドセンスのコードを横に並べて配置することもできる|FC2ブログ・プチカスタマイズ

  このページはFC2ブログ・プチカスタマイズの ・基本のHTMLとスタイルシート | スタイルシートを学ぼう| スタイルシートでGoogleアドセンスのコードを横に並べて配置することもできる に関する情報を紹介しています。
  FC2ブログ・プチカスタマイズは、FC2ブログをちょっとだけ改造して、使い易くします。  FC2ブログの魅力は、初心者は初心者なりに、上級者は上級者なりにテンプレートやスタイルシートを改造して色々と変えることができるところ。 このブログでは、初心者から中級者向けのFC2ブログカスタマイズ法をあれこれご紹介。  FC2ブログを楽しみましょう。

 


 
 
Top Page > スポンサー広告 > スタイルシートでGoogleアドセンスのコードを横に並べて配置することもできる・基本のHTMLとスタイルシート > スタイルシートを学ぼう > スタイルシートでGoogleアドセンスのコードを横に並べて配置することもできる


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking

このエントリーをはてなブックマークに追加

 Googleアドセンスの横に並べて配置する方法。

 いや、Googleアドセンスでなくてもだけど。

 何らかの要素を横に並べるにはどうしたらいい?

 画像は割りと簡単に横並べにできるんだけど、他のコードなんかはどうするんだろう。

 

Googleアドセンスの広告を横へ並べる方法

<div class="oya">
<div style="float:left;">
Googleアドセンスのコード
</div>
<div style="float:left;">
Googleアドセンスのコード
</div><br clear="all">
</div>

<div style="clear:both;">
フロートの下のブロック
</div>

 

float:の意味

 floatとは、左右に要素を回り込ませたいときに使うCSSのプロパティ。

 左右に振り分けるだけでなくfloatした要素は親ブロック(今回は仮に<div class="oya">とした)の中で浮いている状態。

 float:leftで左に浮かせ、2つ目のfloat:leftで左側に回りこませている。

 左右に並べる場合、並べる場所の要素の幅を超えてしまうとレイアウトが崩れるのでご注意。

 

clear:both

 clearプロパティは、floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除する際に使用する。

・left ⇒左寄せされた要素に対する回り込みを解除します。

・right ⇒右寄せされた要素に対する回り込みを解除します。

・both ⇒左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。

・none⇒ 回り込みを解除しません。

 ということで、floatで指定した回り込みをclear:bothで解除する。

 解除しないと次のdiv要素にも回り込みが生じ、これまたレイアウトが崩れる。 

 

 格好良くするには、マージンとかを指定すると良いかも。

 くれぐれも、挿入する場所の幅を超えないように気をつけて。



サイト内の同タグへのリンク: スタイルシート  横に並べる  float  回りこみ 
他のサイトへのタグリンク : スタイルシート 横に並べる float 回りこみ

web拍手 by FC2←これはFC2拍手。お礼のコメントがあるよ。拍手してみて。 FC2 Blog Ranking
このエントリーをはてなブックマークに追加
関連記事リスト
  カテゴリ名:[スタイルシートを学ぼう]
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://tadameru2.blog91.fc2.com/tb.php/137-5d2c36bf
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
管理人の承認後に表示されます
2016/12/02(金) 23:58:48 |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。