写真を配置 文章を流し込む

 写真を配置して文章を流し込む。あるいは文章の流れの中に写真を割り込ませる。そういったごく普通のページをまずは作ろうとしました。
 WEB制作アプリで作ったほうが簡単かもしれないと思ってはみたものの10万円はするだろうアプリを簡単には買えません。マイクロソフトの無料アプリ(かつては有料)をインストールして使ってみました。三日ほど操作してWEBページを作ってみたのですが,下の例が結果です。回り込みにはなりませんでした。最低限度の HTML 習得は必要であると痛感することに。WEB制作アプリに習熟する労力を,HTMLの理解に回そうと。

店舗写真
 まずアプリを使って「文章と写真」のページを作ります。最初に写真を配置。そのあとにそのまま文章を流し込みます。回り込みにはなりません。

     

 上記左の結果を望んだのですが。

富士写真  流し込みを実現させるためには,フロート(flort 解除は clear)というタグを使う必要があるようです。フロートを使うことで写真・図に対するテキストまわりこみになりました。書籍編集の感覚では図版面積を過ぎれば自動で文頭から流れてしかるべきと思ってしまうのですが。
 写真はフリー素材で検索し,netchaya.com からダウンロード,使わせてもらっています。ここまでで割り込み終了ならば,次の文頭で clear を宣言する必要があり,宣言せずに文章が続きますと写真面積終了後も字下がりの状態になると入門書で解説されています。試しに終了宣言を外した結果がこれです。どうやら HTML は少々の文法ミスはカバーされるようです。作った HTML 文を見直すと<body>ではじめながら</body>が無いといったミスを見つけました。シンプルで短い HTML なので自動的に補正されていたようです。


富士写真  フロートを使うことで写真・図に対するテキストまわりこみになりますが css の記述で右側配置の設定をしておきます(別のネームで登録)。書籍編集の感覚では図版面積を過ぎれば自動で文頭から流れてしかるべきと思うのですが解除が必要のようです。写真はフリー素材で検索し,netchaya.com からダウンロードさせていただきました。ここまでで割り込み終了ならば,次の文頭で clear を宣言します。


inserted by FC2 system