*

スタイルシート(CSS)で画像を回り込ませる

公開日: : 最終更新日:2017/10/15 Webサイト作成

赤枠部分のような、CSSで文字の右や左に画像を回り込ませる方法。ホームページ制作によく使いますね。

画像を回り込ませる方法

基本的なソースはこのようになると思います。(classで右に画像指定した場合)
=========================
.float {float:right;}
.floatclear {clear:both;}
=========================

必要に応じて、マージンやパディングを指定いくのですが、今回のようなレスポンシブサイトの場合、スマホでも違和感なく見られるようにしないといけません。サイトの全幅はだいたい1000px前後が多いと思うので、2カラムだとメイン部分は約750px前後でしょうか。

750px幅にテキスト(文字)と画像のバランスを考えれば、画像幅は250~300pxと思いますが、これをスマホで見ると文字が端に追いやられ読みにくくなります。

なので目安としては200px以下でしょうか。特に画像が重要でなければスマホではテキストをメインにし、画像は非表示という選択もありかも。

■スマホサイトに画像やメニューを表示させない設定

また、画像右用と画像左用をCSSに指定しておけば、HTML側のclassを変るだけで変更できます。
たとえば右用は「.float_r」「.float_l」など。サイトの仕様によって試してください。



ad

関連記事

php工房

問い合わせフォームを作る

ちょっと油断すると更新が遅れますね(笑 ところで、サイトに不可欠なのが問い合わせフォーム。

記事を読む

テンプレートの見出しタグ

タイトル(メタタグ)と見出しタグを編集する

テンプレートのソースタグ「<head>~</head>」の部分を編集します。

記事を読む

バナー画像をJavaScriptで切り替える

前回スマホ用の画像の話をしましたが、jQueryのJavaScriptを使ってサブページのバナー画像

記事を読む

メニュー部分をドラッグ

DreamWeaverの便利な「ライブラリ機能」

webサイト作成にはコピーとペースト(貼付け)作業をよく使います。 メニューやヘッダー(タイト

記事を読む

TeraPad

サイト作成に役立つツール

webサイト作成には、バナーやボタンなどが必要です。 ホームページビルダーには「ウェブアートデ

記事を読む

エックスサーバー

レンタルサーバーを選ぶ

webサイトの運営にはサーバー選びが重要。 中小企業、個人事業者なら、レンタルサーバーが一般的

記事を読む

ページのコピーと貼付けで注意すること

以前も書きましたが、ホームページ作成にはコピーと貼付け作業を頻繁に使います。 サイトの構成を考

記事を読む

トップバナー

トップのイメージ画像を入れ替える

サイトのイメージ画像とロゴを入れ替えましょう。 あらかじめテンプレートにはサンプル画像が入って

記事を読む

dreamweaver cc

サイト作成ソフトとHPビルダーの設定

サイト作成のソフトもいろいろありますが、代表的なものといえば「ホームページビルダー」と「Dreamw

記事を読む

無料テンプレート

webサイトのテンプレートはどれを選ぶ?

さて、サイトのテンプレート選びです。 googleで検索をかけると、たくさんでてきます。 い

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

相島での釣果
離島 相島へナイトアジングに行ってきた

福岡県北部の離島、相島へ知人と夜釣りに行ってきました。 新宮港発17

梱包された時計
グランドセイコーの電池交換完了

先月末メーカーへ電池交換に出していたSBGX065が戻ってきました。

プランクトン1.8
34のNewワーム「プランクトン1.8」でアジング

前から心待ちにしていた、34のワームが一般発売されました。 タイ

魚子メタル
魚子メタルでアジングをやってみた

寒さは大の苦手ですが、ほぼ毎週アジングに行ってます。 リグはワー

グランドセイコー SBGX065
グランドセイコーのクォーツを電池交換に出してみた

約3年前に購入したGrand Seiko SBGX065。 時計

→もっと見る

PAGE TOP ↑