- ベストアンサー
htmlで枠線や、間隔を表現しようとしています。方法としては、html
htmlで枠線や、間隔を表現しようとしています。方法としては、htmlそのもののタグを利用する方法と、1pxの画像（spacer.gifのような名前が多いようです）を利用する方法があり、spacerの方法の方がいいと聞いたのでそちらでやりたいのですが、素人なので一から作れないので困っています。サンプルをネットで探しているのですが、なかなかありません。おすすめのサンプルはどこかにないでしょうか？
- みんなの回答 （3）
- 専門家の回答
関連するQ&A
- 上下の間隔を10px分空けたい
以下のHTMLで、Mozilla, Safariでは、上下10px分離れた間隔で画像が表示されますが、IE6,IE7では<br>したのと同等の距離になります。 IEでも上下10px分の間隔で表示させるには、どのようにすればよいのでしょうか？ 私が<div>の意味が良く分かっていない為でしょうか？ <div><img src="a.gif" alt=""></dirv> <div><img src="spacer.gif" alt="" width="1" height="10"></dirv> <div><img src="b.gif" alt=""></dirv>
- ベストアンサー
- HTML
- ロールオーバー画像の枠線を消したい
初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、（４ヶ所とも）今度は何も表示されなくなってしまいました。 ＜問題のタグのひな形＞ <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします！
- ベストアンサー
- JavaScript
- 画像の枠線に色をつける方法を探しています。
画像の枠線に色をつける方法を探しています。 現在無料HP作成サイトでHPを作っているのですが、ポップアップウィンドのjavascriptを設定したところ 画像の枠線が消えてしまいました。 入力したのが↓です。 <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> border="1"になっているのに表示されないんです。 色がついていないのか。枠線自体が表示されていないのか。分からず、 調べたところ、色をつけるにはスタイルシートを指定し直接書く方法があるとのことで style="border:solid 5px #000000" をつければ色をつけられるという事を発見しました。 それで、下記のように入力したところ <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" style="border:solid 5px #000000" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> 枠線が太くなって表示されました。 どう書けば枠線を表示できるのでしょうか。 希望はborder="1"の時の太さがいいです。 HP作成初心者なのでタグがめちゃくちゃだと思います。色々なサイトから引用したため。 勉強不足で申し訳ありません。 よろしくお願いします。
- ベストアンサー
- HTML
- 四角い角が丸い枠線内にコンテンツが入れる正しい方法
角が丸く四角い枠線を作り、 その中に画像やコメントを入れたいと思っています。 イメージ的には添付ファイルのような感じです。 プログラムでその枠線を作れるなら背景画像を使わずに 画像とコメントをそれぞれhtmlに入力したいと思いましたが、 その方法はありますか？ 自分がやった方法は、 画像とコメントの全てを枠線で囲い方が分からなかったので、 枠線と枠線の中に入れる画像をまとめた画像を1枚作り、 それを背景画像として表示させました。 コメントだけをhtmlに入力し、marginで位置を設定しました。 しかし、ページの下側に5000px以上の余白ができてしまいます。 背景画像を設定したときに、 コメントの配置位置をmarginで設定するのは間違いでしょうか。
- ベストアンサー
- HTML
- 回り込みについて(間隔が空く）
下記のような内容(1)のhtmlをcssのfloatを利用して回り込みさせていますが、画像の縦幅より文字が多くなると画像の下にはみ出てしまいます。 tableタグは利用せずに、どのようにcssを指定することで回避できました。（２）既に一度質問をしています。 http://okwave.jp/kotaeru.php3?qid=2419373 しかし画像と文字の間に間隔が入ってしまい困っています。 間隔をあけないようにするにはどうしたら良いでしょうか。 marginやpaddingやwidthをいじりましたがその場しのぎのようでブラウザによってはうまく表示できません。 (1) <img src="■">aaaaa ↓結果 ■aaa aa (2) imgはfloat:left textはfloat:right <img src="■">aaaaa ↓結果 ■＿＿aaa ＿＿＿aa （アンダーパーはスペースを示す） ■とaaaにあるスペースを、10pxほどにしたい。
- ベストアンサー
- HTML
- cssを使った枠線の表示について
css初心者です。宜しくお願いします。 タグ打ちしたHTMLファイルとcssファイルがあります。 cssファイルに「.waku {BORDER-WIDTH:5px;BORDER-COLOR:#FFFFFF;BORDER-STYLE:SOLID}」と記述し、 HTMLに「<P CLASS=waku>適当な文字列</P>」としました。 この、「適当な文字列」の周りに5pxの白い枠線が表示されたところまではうまくいったのですが、画面の左右いっぱいまで枠線が延びています。 (1)文字列の幅に合わせて、自動的に枠の幅を変えるにはどうすればいいのでしょうか？ (2)この枠の幅を「画面の50%」あるいは「500px」などと指定することは可能でしょうか？ (3)文字列と枠線との間隔を調整することは可能でしょうか？ 余談ですが、cssの記述の際、スペースを多様している例をよく見かけます。 冒頭での私の書き方でも正常に動作しているようですが、「.waku { BORDER-WIDTH : 5px ; BORDER-COLOR : #FFFFFF ; BORDER-STYLE : SOLID }」このように (4)各文字列や値の前後にスペースを入れる理由を教えてください。
- ベストアンサー
- ホームページ作成ソフト
- 正規表現について
アメブロから独自ブログへ引越しを行うことになったのですが、 ペタしてね というリンク画像を毎ページに張り付けており、この画像リンクを一括で削除したいと思っています。 ＨＴＭＬタグのパラメータが微妙にばらついており、正規表現の利用が必要かなと思っています。 専用のプラグインをインストールし、正規表現を利用して削除できることが分かったのですが、 正規表現の方法を数時間勉強してみましたが、結局どうすればいいのかわかりません・・・ 削除する画像リンクは以下のようなものです。 <a href="http://.........................."><img height="100" alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_18.gif" width="100" /></a> width や hight がページによって微妙に違うようです。 どちらさまか、上記のようなタグをマッチングさせる正規表現を教えていただけませんでしょうか。
- ベストアンサー
- PHP
- CSSで枠線の太さを変えるとき
CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが１pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします（CSSは初心者程度のレベルです）。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================
- ベストアンサー
- CSS
- ＨＴＭＬの画像枠線なしにするタグ記述教えて下さい
タグ <ahref="........................."> <IMG src="AAAAAA/BBBBBB"></a> で画像の枠線なしにする方法ありますか？
- ベストアンサー
- ホームページ作成ソフト
