*

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

関連記事

TeraPad

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

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

記事を読む

スマホの画面

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

ファイルを開く

テンプレートをダウンロードして準備

さて、いよいよサイトを作っていきます。 まず、今回使うテンプレートファイルをパソコンにダウンロ

記事を読む

スマホ人口の増加

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

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

記事を読む

無料テンプレート

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

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

記事を読む

php工房

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

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

記事を読む

メニュー部分をドラッグ

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

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

記事を読む

dreamweaver cc

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

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

記事を読む

ad

Message

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

ad

フェンダー アンプ
機能満載アンプ「Fender Mustang GT40」が届いた

数年ぶりのアンプ購入。Fender Mustang GT40が届きまし

JUJU 東京
JUJUが泣いたMV これは泣けた…

今日、3月1日は娘の卒業式。幸い春の嵐は昨日がピークだったようで、無事

YOUNG GUITER
今さらながらのギターと理論

2月4日立春。暦のうえでは春の始まりらしいですが、しばらく極寒の日が続

メンテナンス完了のギター
FUJIGEN OS-10TT ストラトのメンテナンス

フジゲンカスタムショップ製のストラトキャスターOS-10TTです。

Sick As Overdrive MKⅡ
「Sick As Overdrive」ケンタウロス系のエフェクターを使ってみた

雑誌ギター・マガジンで某ギタリストの評価が高かったエフェクターを買って

→もっと見る

PAGE TOP ↑