- ベストアンサー
写真+リンク文字を縦ならびにして中央寄せする
ワードプレスですが、 <a href="A"><img src="http:"A1" alt="A" /></a> <a href="A">A</a> <a href="B"><img src="http:"B1" alt="B" /></a> <a href="B">B</a> この2つセットを、↓のようなかんじで横に並べて、中央寄せして、間を少し空けたいのです。 画像A 画像B リンク文字A リンク文字B tableは使いたくないので、CSSとの組み合わせで、教えていただけましたら、と思います。 よろしくお願いいたします。
- serena777
- お礼率33% (18/53)
- ホームページ作成ソフト
- 回答数2
- ありがとう数0
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
デザインではなく、文書構造だけを考えてマークアップします。 HTMLはデザインではなく、文書構造をマークアップするだけの言語です。それをどのように表示するかは、ブラウザが持つ、あるいは著者なり、ユーザーが指定するスタイルシートによるものです。 その意味で、表であれば表(table)でも構わないのですよ。--表でないものをデザインのためにtableを使用するのは間違っているのです。 ・単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) ・ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 例えば、アルバムのように、画像とその説明のリストがあれば次のようにマークアップするでしょう。 <ul> <li><a href=""><img src="" width="" height="" alt="画像の説明"></a> <ol> <li><a href="">画像の説明</a></li> <li>撮影場所</li> <li>日時</li> </li> ・・・・ 単に <ul> <li><a href=""><img src="" width="" height="" alt="">説明</a></li> <li><a href=""><img src="" width="" height="" alt="">説明</a></li> ・・・・・ かも知れません。 もちろん、 <table> <tbody> <tr> <th abbr="画像">画像</th> <td><a href=""><img src="" width="" height="" alt=""></a></td> <td><a href=""><img src="" width="" height="" alt=""></a></td> <td><a href=""><img src="" width="" height="" alt=""></a></td> </tr> <tr> <th abbr="タイトル">タイトル</th> <td><a href="">画像のタイトル</a></td> <td><a href="">画像のタイトル</a></td> <td><a href="">画像のタイトル</a></td> </tr> </tbody> </table> のほうが良いかもしれません。 もちろん <ul> <li><a href="" title="画像の説明"><img src="" width="" height="" alt=""></a></li> <li><a href="" title="画像の説明"><img src="" width="" height="" alt=""></a></li> <li><a href="" title="画像の説明"><img src="" width="" height="" alt=""></a></li> </ul> このいずれでも、全く同じに 画像A 画像B リンク文字A リンク文字B とプレゼンテーションできるのですよ。 ★大事なことは、きちんと正しく文書構造をHTMLでマークアップすること それさえきちんと出来ていれば、あとは、スタイルシートでどのようにもなるということです。 [サンプル]どのようにマークアップされていても、下記はすべて同じように表示されるはずです。 ★タブは、全角スペースに置換してあるので戻すこと!! <div class="section album"> <ul id="photoList1"> <li><a href="/A"><img src="./images/01.jpg" width="240" height="180" alt="画像の説明1"></a> <ol> <li><a href="A">画像の説明</a></li> </ol> </li> <li><a href="/B"><img src="./images/02.jpg" width="240" height="180" alt="画像の説明2"></a> <ol> <li><a href="B">画像の説明</a></li> </ol> </li> <li><a href="/C"><img src="./images/03.jpg" width="240" height="180" alt="画像の説明3"></a> <ol> <li><a href="C">画像の説明</a></li> </ol> </li> </ul> <ul id="photoList2"> <li><a href="/A"><img src="./images/01.jpg" width="240" height="180" alt="画像の説明">画像の説明1</a></li> <li><a href="/B"><img src="./images/02.jpg" width="240" height="180" alt="画像の説明">画像の説明2</a></li> <li><a href="/C"><img src="./images/03.jpg" width="240" height="180" alt="画像の説明">画像の説明3</a></li> </ul> <table summary="画像一覧" id="photoTable"> <tbody> <tr> <th abbr="画像">画像</th> <td><a href="/A"><img src="./images/01.jpg" width="240" height="180" alt="画像の説明1"></a></td> <td><a href="/B"><img src="./images/02.jpg" width="240" height="180" alt="画像の説明2"></a></td> <td><a href="/C"><img src="./images/03.jpg" width="240" height="180" alt="画像の説明3"></a></td> </tr> <tr> <th abbr="タイトル">タイトル</th> <td><a href="/A">画像の説明1</a></td> <td><a href="/B">画像の説明2</a></td> <td><a href="/C">画像の説明3</a></td> </tr> </tbody> </table> <ul id="photoList3"> <li><a href="/A" title="画像の説明1"><img src="./images/01.jpg" width="240" height="180" alt="画像の説明"></a></li> <li><a href="/B" title="画像の説明2"><img src="./images/02.jpg" width="240" height="180" alt="画像の説明"></a></li> <li><a href="/C" title="画像の説明3"><img src="./images/03.jpg" width="240" height="180" alt="画像の説明"></a></li> </ul> </div> [スタイルシート] #photoList1,#photoList2,#photoTable,#photoList3{ margin:0 auto; text-align:center; line-height:1.4em; } div.album ul,div.album ol,div.album li{ list-style-type:none; margin:0;padding:0; } div.album li{display:inline-block;width:250px;padding:5px;} #photoTable th{display:none;} #photoTable{border-collapse: separate;border-spacing:20px 0;} #photoList3 a:after{content:"\A" attr(title);white-space:pre;}
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
#photoList2{ margin:0 auto; text-align:center; line-height:1.4em; } div.album ul,div.album ol,div.album li{ list-style-type:none; margin:0;padding:0; } div.album li{ display:inline-block; width:250px; padding:5px;/* 250-2*5 = 40にする */ margin:0 5px; /* この値もありかな 前の数字は上下 後の数字は左右 */ }
関連するQ&A
- Excelから任意の文字列を抽出したい
A列にリンクのタグがあるのですが、このような文字列から【リンク先】という部分と、【<img src="" alt="">】の部分だけを取り出したいと思いますが、上手く出来ません。 A列に入っているタグは→<a href="リンク先" target="blank"><img src="" alt=""></a> A列にリンクのタグが入っています。 B列に【リンク先】 C列に【<img src="" alt="">】 となるようにしたいです。 又A列の文字列には、<img src="" alt="">が続いて2つか3つ入っているものもありますが、その場合は、D列・E列に順番に抽出したいです。 最大でも<img src="" alt="">は4つまでしか入っておりません。 ダブルコーテーションの扱いなどがよく分からなくて、詳しかたいれば教えていただけるとありがたいです。 よろしくお願いいたします。 ※【】はわかりやすくするためのものです。
- ベストアンサー
- Excel(エクセル)
- CSSで文字をリンク付き文字へ変える
CSSを使って、文字を画像へ置き換えることが出来るということを知ったのですが、 ある文字をリンクつきの文字へ置き換えることは可能ですか? たとえばこんなかんじです。 実際のソース aaaaa uaaaaa CSSの定義で aaaaa⇒<a href="http://">あいう</a> 表示されるもの あいう uあいう という感じで、あいうはhttp://のリンク入り。 調べてみてもヒットしないので、出来ないのかなという感じがしますが。 CSS以外でも方法があれば教えていただきたいです。 わかる方、回答よろしくお願いします。
- ベストアンサー
- HTML
- HTMLでリンク画像に右回り文字を書きたい
<A Href="URL"><Img Src=""></A> 画像でリンク と <Img Src="" Align="画像の位置"> 画像に文字を回りこませる を組み合わせて ただの画像では無くてアメブロのサムネイル画像に 右回りで文字を書きたいのですが不可能でしょうか? 難点がたくさんありますよね。 ただの画像では無くてリンク付き画像 しかもリンク付き画像はサムネイル表示させたい そのサムネイル画像に右回りで文字を書きたい HTMLに詳しい方教えて頂けると大変ありがたいです。 どうぞよろしくお願い致します。
- ベストアンサー
- ブログ
- 画像をクリックするとリンクを取得
<a href=""><img src="" alt=""></a> こういうタグの場合 画像をクリックしただけで、その画像に貼られている リンクが、コピーできるっという jsってないでしょうか?
- ベストアンサー
- JavaScript
- table要素の使い道
tableはレイアウトに使ってはいけないのは知っていますが、boxのなかに画像でリンクを作る簡単なメニューの場合は、リストとtableどちらを使ったほうがいいのでしょうか? こんな感じです。リストの場合はcssで同じような感じにします <table> <tr> <td><a href="#"><img src="a.png" alt=""></a></td> <td><a href="#"><img src="b.png" alt=""></a></td> </tr> <tr> <td><a href="#"><img src="c.png" alt=""></a></td> <td><a href="#"><img src="d.png" alt=""></a></td> </tr> </table>
- ベストアンサー
- HTML
- IEとFirefoxでリンクの「hover」の状態が異なります。
IEとFirefoxでリンクの「hover」の状態が異なります。 メニューに画像を使っているのですが、IEとFirefoxでは「hover」時のbackground-colorのかかり方が異なります。 IEだと画像全体にかかるのですが、Firefoxでは画像の下の方だけにしか色がつきません。 画像をテキストに変更すると、テキスト全体にきちんとかかります。 画像に問題があるのでしょうか? どうすれば解決するのか教えてください。 以下にメニューのソースを載せておきます。 (HTML) <table width="100%" height="40" cellspacing="0"> <tr> <td width="100" ><a href="page1.html"><img src="menu1.gif" border="0" alt=""></a></td> <td width="100" ><a href="page2.html"><img src="menu2.gif" border="0" alt=""></a></td> <td width="100" ><a href="page3.html"><img src="menu3.gif" border="0" alt=""></a></td> <td width="100" ><a href="page4.html"><img src="menu4.gif" border="0" alt=""></a></td> <td width="100" ><a href="page5.html"><img src="menu5.gif" border="0" alt=""></a></td> <td width="100" ><a href="page6.html"><img src="menu6.gif" border="0" alt=""></a></td> <td width="100" ><a href="page7.html"><img src="menu7.gif" border="0" alt=""></a></td> </tr> </table> (CSS) a:hover { background-color: #000000;} どうぞよろしくお願いします。
- ベストアンサー
- HTML
- 画像リンクの上に文字リンクを乗せる方法は?
画像(アイコン)リンクの上にテストで、文字リンクを貼りつけたいのですが、どのようにしたらよいでしょうか? ちなみに、リンク先はphpで読み込ませています。 ソースは <li><a href="<!--{$smarty.const.URL_DIR}-->abouts/index.php"><img src="<!--{$TPL_DIR}-->img/side/about_on.jpg" width="166" height="30" alt="当サイトについて" style="border: none" name="about" id="about" /></a></li> のようになっています。現在、画像(アイコン)リンクはこれで表示できています。 どなたかよろしくお願い致します。
- 締切済み
- HTML
- リンクの文字とリンクの文字を横に並ばす時に適度にスペースを入れたいので
リンクの文字とリンクの文字を横に並ばす時に適度にスペースを入れたいのですがどうすればよいでしょうか?特に「はいそうです。」と「いいえ、違います」のリンク文字の間にスペースをキーボードから打ち込もうとすると、リンクの下線が伸びてしまうのですが・・・。文字の下のリンクの下線は残したまま、スペースの時に下線が伸びないようにするにはどうすればよいでしょうか? <style type="text/css"> <!-- .style1 { font-size: x-large; font-weight: bold; } --> </style> </head> <body> <p class="style1"><img src="../image/web_013.gif" alt="引越元も引越先も1階かつ目の前でこちらが用意した台車は使用可能ですか?" width="400" height="77" /></p> <div align="justify"> <a href="link3.html"><span class="style1">1.はいそうです。 </span></a> <a href="link0.html"><span class="style1"> 2.いいえ、違います。</span></a><br /> </div> <p><span class="style1"> <img src="../image/web_024.gif" alt="引越元と引越先" width="300" height="357" /></span> <a href="link1.html"></a></p> <a href="link1.html"> <p align="left" class="style1"><input type="button" value="前へ戻る" onclick="window.history.back()" /> </p> </a> <a href="../index.html"> <p align="center">トップページへ戻る</p> </a> <p class="style1"> </p> </body> </html>
- ベストアンサー
- HTML
- 文字の前の画像を縦中央に配置したい
はじめてCSSを使ったホームページを作ってます。 文字の前に画像を置きたいのですが、それが上付きになってしまいます。 <IMG src="***.gif" align="absmiddle"> として文字と同じ高さ(縦の中央)になったのですが、これをCSSですることはできますか。 教えてください。
- ベストアンサー
- HTML
補足
ありがとうございます! photoList2を使ってできました。 もう一つ教えてくださいますか? 画像の間隔を調整するには、どの数字をいじったらよいのでしょうか? よろしくお願いいたします。