• コミュニティトップ
• トピック一覧
• 新着トピック
• 最近活発なトピック
• 閲覧数の多いトピック

コメント一覧 新しい順に表示▽ / 古い順に表示△

コメント一覧

新しい順  |  古い順

• floatに関しては以上です。
  続きまして「画像間の空白指定」
  
  画像というのはスペースキーを入れれば空白が空きますが、CSSでの指定を行いたい、ということでお間違いないでしょうか。
  その方がソースは綺麗ですよね　(´・ω・｀)
  
  以下の説明では<a>タグ・<img>タグ共に具体的内容を省略します。
  
  
  <a><img src="画像アドレス" style="margin-right: 数値px;"></a>
  
  これを横並びに書くだけです。
  marginの方向は right をおすすめ。
  margin-left を指定しますと、ブラウザ横幅が縮小された際に画面に収まり切らない画像は下へ移動しますが、そうなったとき左に空白ができてしまいます。
  
  <a><img ひとつめの画像></a><a><img ふたつめの画像></a>
  
  といったように、改行を行わずに横に繋げて書いてください。
  改行すると画像も改行されてしまいます。
  
  ざっとのご説明は以上です。
  ただね。レスポンシブデザインですので、テキストの回り込みを多用されますとあまり良いことはありませんです　(´・ω・｀)
  スマホ版をご利用頂いておられるならば構いませんが。
  テキスト回り込みはスマホから見たときの状態がアレでソレなもので。
  
  ご不明点ありましたらお気軽にどぞ　^｡･x･)b
  by vanillaice (Akira)  2015年09月24日 08:56
  by vanillaice (Akira)
  2015年09月24日 08:56
• 
  ★ 続く記述内容
  
  [①]<div>テキスト内容を入れます。テキスト改行はキーボードのEnter/ Returnキーで行ってください</div>
  
  [①]の横に続けて書いてください。
  改行するとテキスト位置が画像の上辺よりも下がってしまいます。
  (逆に下げたい場合はそれでも良いのかもしれませんけど)
  
  ★ この時点でもう後続にfloatを行う予定が無いならば....
  
  </div>
  
  これ必ず忘れずに書いてください。
  こういうの「終了タグ」「〆タグ」「閉じタグ」と言いますが、
  レイアウトが崩れる原因のほとんどがこの終了タグ記述忘れです。
  ここで書く終了タグと対になる開始タグは、最初に記述した
  <div class="cf"> です。
  
  ★ まだfloatをする予定があるならば
  
  上に書いた終了タグはまだ入れずに同じ要領でfloat関連の内容を記載します。
  それを終えてから終了タグです。
  
  だいたいの構造はスクショをご参照ください。
  float内容全てを<div class="cf">が包括する形のソース内容です。
  (スクショ内のソース説明は<a>タグを省略しています)
  by vanillaice (Akira)  2015年09月24日 08:48
  by vanillaice (Akira)
  2015年09月24日 08:48
• わぁ。気付くの遅れてしまいました。
  ごめんなさいね　(*_ _)
  えと　私はこちらのコミュニティはタクシー移動中なんかにiPhoneから気まぐれに覗く程度です。
  直接お越し頂いた方が解決は早いと思います(笑)
  
  今からご説明をしますけれども、注意点いくつかあります
  
  ・独自クラスを利用しますので、汎用的に使えるものではありません
  ですから他の方がこちらの回答を参照されましても上手く機能しません。
  (なので本当はブログ内説明の方が良いんですけどね　^^;)
  
  ・現在のFC2エディターはHTML5の規格になっておりませんので、プレビュー画面と照らし合わせながら作業を行ってください。
  
  -------------
  
  まず、画像とテキストを並べて整形するために float (ふろーと) というのを利用します
  (他にも display: inline-block; (でぃすぷれい いんらいんぶろっく) という方法なんかもありますが、今回は説明を避けます)
  
  で、スクショの通りで合ってますか　(´・ω・｀)
  そちらまずご確認ください。
  意味が違っていればご指摘ください。
  
  手順
  
  ★ フツーに文章を書いていて、さあfloat を始めよう と思ったらその時点でまずこれを書く
  
  <div class="cf">
  
  これが「独自クラス」です。
  私のテンプレでしか通用しません。
  
  ★ 文章「左」画像「右」文章と画像の間隔「20px」の雛形ソース(コピーして要保存)
  
  <a href="画像アドレス" 〜省略〜><img src="画像アドレス" 〜省略〜 style="float: right; margin-left: 20px;"></a>
  
  画像貼り付けにはFC2エディターのツールをご利用でしょうから、内容は自動生成なので省略しました。
  img のタグ内に一部付け足しをする形です(太字部分)。
  
  float: 位置; --- 左右どちらに画像を持ってくるかの指定
  margin-位置: 数値px; --- 画像の左右どちらにいくつの空白をつくるかの指定
  
  上記ソース内容を[①]とします。
  
  
  
  一旦投稿します。
  by vanillaice (Akira)  2015年09月24日 08:35
  by vanillaice (Akira)
  2015年09月24日 08:35
• 
  
  「画像が左、文章が右、画像と文章の余白20px、画像と文字の合わせが上 の場合」は、ご指示の通り書き込み問題は解決しました。
  
  １　上記と逆のケースですが、leftをright入れ替えたりしてみましたが、写真は右へ移動しましたが、文章が左に表示されません。以下のケースはどうすればいいのでしょうか。
  
  「画像が右、文章が左、画像と文章の余白20px、画像と文字の合わせが上 の場合」
  
  ２　写真を２枚または３枚を横に並べてその写真の間に間隔を取りたいのですが
  　どうすれば間隔を取ることができるのでしょうか。
  
  以上　よろしくお願いします。
  
  
  by ONNの福祉  2015年09月23日 20:02
  by ONNの福祉
  2015年09月23日 20:02
• vanilaice 様
  
  ありがとうございます。見事に問題が解決しました。
  
  パソコンの知識は初歩の初歩というレベルですので、
  プレビューと公開画面が相違するとい問題はどこに尋ねればいいのかも
  分からなくて困っていたのですが、
  作者の方から直接ご指導いただけるとは思いもよりませんでした。
  
  おかげさまできれいに画像と文書との間隔が開き、
  きれいに表示できるようになりました。
  ありがとうございました。
  by ONNの福祉  2015年09月22日 19:15
  by ONNの福祉
  2015年09月22日 19:15
• 
  私のテンプレをご利用頂いていたのですね。失礼を致しました　(*_ _)
  以下の通り作成して頂けると良いかと思います。
  (CSSスタイルシートが絡んでいますので私のテンプレ限定内容が含まれます)
  
  「画像が左、文章が右、画像と文章の余白20px、画像と文字の合わせが上 の場合」
  
  <div class="cf">
  <a href="画像アドレス" target="_blank"><img src="画像アドレス" alt="apple-758333_1280-compressed.jpg" border="0" width="150" height="100" style="float: left; margin-right: 20px;"></a><div>あいうえお
  かきくけこ
  さしすせそ</div>
  </div>
  
  
  class="cf"
  は必ずつけてください。
  これがフロート解除になってます。
  お手数おかけします。よろしくお願いします。
  ご質問等がございましたら直接当ブログへお越しくださいませ　(*_ _)
  
  
  by vanillaice (Akira)  2015年09月22日 15:54
  by vanillaice (Akira)
  2015年09月22日 15:54
• お使いのテンプレートがHTML5規格なのではないでしょうか。
  現在のweb標準では align, hspace, vspace いずれも廃止要素です。
  
  <img src="画像アドレス" style="vertical-align: 位置; width: 数値px; height: auto;"><span style="margin-left: 数値px;">文章</span>
  
  *文章が左にあるのならば margin-right を指定
  by vanillaice (Akira)  2015年09月22日 15:35
  by vanillaice (Akira)
  2015年09月22日 15:35