*

スタイルシート(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

関連記事

dreamweaver cc

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

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

記事を読む

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

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

記事を読む

TeraPad

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

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

記事を読む

エックスサーバー

レンタルサーバーを選ぶ

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

記事を読む

無料テンプレート

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

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

記事を読む

スマホの画面

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

スマホの画面は表示範囲が狭いので、縦長のサイトになります。 縦スクロールは操作がしやすいとはい

記事を読む

スマホ人口の増加

スマホのユーザーが増加中!なのに…

企業のウェブサイト(ホームページ)でも、まだスマートフォン対応していないものが多いですね。

記事を読む

メニュー部分をドラッグ

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

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

記事を読む

電話番号にリンクを設定する

スマホサイトによくある、タップをすると電話がかけられるリンクを設定します。 スマホ画面では電話

記事を読む

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

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

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

記事を読む

ad

Message

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

ad

コンパクト卓上コンロ
シーズン前に釣りキャンプの準備中

暦では立春を過ぎましたが、北海道は猛烈な寒波に襲われ、関東地方も積雪だ

ライフジャケット
海釣りにライフジャケットは必需品!?

気温は低いものの天気が良いので釣りに出かけていますが、相変わらず釣果は

姫島の漁港
離島で釣り 糸島市の姫島に行ってきた

2019年も半月が過ぎすっかり正月気分も抜け、繁忙期の仕事に追われてい

シャローフリーク・プチ
シャローフリーク・プチ(3.3g)を使ってみた

アルカジックジャパンから発売されているフロート、シャローフリーク PU

ショアジギング用のリールとライン
ショアジギング用のタックルを揃えてみた

12月も残りわずかとなり、公私ともに慌ただしい日が続いています。

→もっと見る

PAGE TOP ↑