【ブログ】文章を画像の横に回りこませるために必要なcss | AMGブログ 【ブログ】文章を画像の横に回りこませるために必要なcss:AMGブログ

コラム、ゲーム、PC・ネット、生活、プロレス情報などを幅広くお届けしています。

おすすめサイトヘッドライン


【ブログ】文章を画像の横に回りこませるために必要なcss


      [ 2014/04/29] PC・ネット・ブログ ブログ 編集

今回の記事はこちらの記事のご紹介です。

【CSS 初級】 ブログの記事で使いやすい 「画像の回り込み」 サンプルCSS : サブカルシート


結論から言うと、画像の横に文章を回りこませるのはこのタグでOKです。

<div class="hiro-left">
画像
文章
</div>


これで画像の下に書いた文章が、画像の左側に回りこみます。


そして、このタグを使うためには、css欄にあらかじめ、このcssを記述しておく必要があります。

.hiro-left,
.hiro-right {
overflow: hidden;
height: auto;
}

.hiro-left img {
float: left;
margin: 0 15px 0 0 !important;
padding: 0 !important;
border: 0 !important;
}

.hiro-right img {
float: right;
margin: 0 0 0 15px !important;
padding: 0 !important;
border: 0 !important;
}

.hiro-left p,
.hiro-right p {
overflow: hidden;
height: auto;
}


こちらを、お持ちのブログのcss欄に記載してください。
ちなみに、画像の右側に文字を回りこませたい場合には、以下の記述をしてください。

<div class="hiro-right">
画像
文章
</div>


leftがrightになっただけです。簡単ですね。
このカテゴリのランダム記事

RSS・Twitterフォロー


My Yahoo! などのRSSリーダーを使うと、AMGブログの更新情報をすぐに受け取ることができます。下記バナーをクリックして、このブログのRSSをリーダーに登録すれば、記事が更新されるたびに最新記事がリアルタイムで入手できます。


Twitterによる更新情報の配信も行なっております。下記バナーをクリックして、アカウントをフォローしていただければ、AMGブログの最新記事があなたのタイムラインに表示されます。




関連するタグ ブログHTMLCSS




タグcloud
リンク
俺とゲームの素晴らしき時間
まじめ系クズの日常
青空プロレスNEWS – 新日本プロレス・WWEの海外最新速報ニュースピックアップ
陰陽座コピーバンド「魂響(Tamayura)」Webサイト 魂響
ニコニコ動画研究部
ひといきゲーム - 無料フラッシュゲームがたくさん!
実は都市伝説
検索窓.com
お手軽ゲーム館
ゲーム生活はじめました。
オールフリーソフト Windows 7・8対応のフリーソフト
オールフリーソフト更新情報
New ひろのブログ
Wii&WiiUおすすめゲームソフト集
☆ニョッキ動画
新作オンラインゲームベスト
フラシュ - 無料フラッシュゲーム
無料ゲーム探索隊
アクションゲームの庵
無料ブラウザゲーム集
無料ゲームのSimple Flash Games
棒人間ゲーム
無料ブラウザゲームnet
フラッシュゲームな日々・・・
フラゲーム
面白オンゲ通信!
ベリーズゲーム
無料防衛ゲームプレイ
はっぴぺ通信2
イジワル海賊団【無料ゲーム本部】
おもしろ フラッシュゲーム ミュージアム
脱出ゲームセンター
無料パチスロゲーム
MMORANK.JP
FPSRANK.JP
無料フラッシュゲーム
ファミコンのネタ!!
おもしろいゲーム 無料ゲームで遊ぼうよ!
オモロ無料ゲーム
だしゅつ! 無料脱出ゲーム
おもしろゲームフラッシュ集-脱出ゲーム集
フリーソフトの樹
ゲーム動画ブログ
その他リンク集

脱出ゲーム大百科 





逆アクセスランキング