- ベストアンサー
アイコンと文字を並べる時アイコンが上にずれる
アイコンと文字を並べる時アイコンが上にずれる <img src="images/icon.png" alt="" ><a href="tenken.php">点検</a> 上記のようにアイコンを２０×２０で作ったら文字より上にずれてしまいます。 何か良い方法はないんでしょうか？
- kurobon619
- お礼率76% (314/410)
- HTML
- 回答数1
- ありがとう数7
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
font-sizeはおそらく16pxとか14pxとか、20pxよりは小さいでしょうから、 それだとアイコン画像の上部分がピョコンと出た状態になります。 まず、imgの位置を img{vertical-align:top;} として、 line-heihtを20pxに合わせればよござんしょう。 .hoge{ line-height:20px; } .hoge img{ vertical-align:top; } <p class="hoge"> <img src="images/icon.png" alt="" width="20" height="20"><a href="tenken.php">点検</a> </p> もしくは <span class="hoge"> <img src="images/icon.png" alt="" width="20" height="20"><a href="tenken.php">点検</a> </span> とか。 これで文字が縦位置で中央に来るはず。
関連するQ&A
- 交互に入れ替わる画像を複数配置
画像名が変わっても、プログラムは変更しないで、html内のソースの画像名のみを変更するだけでいいようなjavascriptを探していたところ、下記のサイトを発見しました ◆画像を交互に入れ替える (title属性を利用して入れ替える) http://www.openspc2.org/reibun/javascript2/image/change/0002/index.html やりたいことは上記のものでいいのですが、1ページ内に、交互に入れ替わる画像を複数配置する場合は、どのようにしたらいいでしょうか？ 上記のものですと、「photo01」をidに指定した画像１つしか動作しません。 最初にも申しました通り、プログラムは変更したくないので、できれば、1つのIDで画像名を変更するだけにしたいのですが・・・ 以下のように記述して、画像名を修正するだけでいいようにしたいですが可能でしょうか？ <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon01.png"> <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon02.png"> <img src="images/new.png" width="10" height="10" alt="" id="photo01" title="images/icon03.png"> よろしくお願い致します
- ベストアンサー
- JavaScript
- htmlの修正のため、正規表現で２つほど質問です。
秀丸を使っています。 下記の２つをやりたいのですが、いまひとつうまくいきません。 ご教授いただけると幸いです。 <p><br /></p> <a href="a.html">あいうえお</a><br /> <a href="k.html">かきくけこ</a><br /> <p><br /></p> ↓ <p><br /></p> あいうえお<br /> かきくけこ<br /> <p><br /></p> <img alt="" src="../images/aaa.jpg" /> <img alt="" src="../images/bbb.jpg" /> ↓ <a href="index.html"><img border="0" alt="" src="../images/aaa.jpg" /></a> <a href="index.html"><img border="0" alt="" src="../images/bbb.jpg" /></a>
- ベストアンサー
- その他（プログラミング・開発）
- HTML(レスポンシブ)画像の均等方法
レスポンシブ機能による、３枚の画像の間隔を均等にする方法を教えて下さい。 <section id="link_down" class="clearfix"> <h4>Web Site Link</h4> <figure class="link"><a href="#"><img src="img/icon_4.png" alt="#"></a><figcaption>example</figcaption></figure> <figure class="link"><a href="#"><img src="img/icon_5.png" alt="#"></a><figcaption>example</figcaption></figure> <figure class="link"><a href="#"><img src="img/icon_6.png" alt="#"></a><figcaption>example</figcaption></figure> </section><!--contact end--> コードはこちらです。 画像サイズは固定でお願い致します。 ブレイクポイントは600pxです。（600px以上で横並びに均等にします) marginやpaddingを%で設定したのですが、700pxまでは均等なのですが、1000以上となると、 左寄りになって均等になりません。 よろしくお願い致します。
- 締切済み
- HTML
- mapでロールオーバー
以下のようにmapでロールオーバーをしようとしたのですが、機能しません。 <div align="center"><img src="images/main.png" alt="" usemap="#map1" border="0" /></div> <map name="map1"> <area href="taku.html" alt="" shape="rect" coords="766,0,996,69" onmouseover="this.src='images/mainleft1_on.png'" onmouseout="this.src='images/mainleft1.png'" src="images/mainleft1.png" alt="" border="0" /> <area href="taku2.html" alt="" shape="rect" coords="766,70,996,137" onmouseover="this.src='images/mainleft2_on.png'" onmouseout="this.src='images/mainleft2.png'" src="images/mainleft2.png" alt="" border="0"/></map> 全体の画像main.png の上にボタンmainleft1.png mainleft2.png がロールオーバーするようにしたいんですができないんでしょうか？
- ベストアンサー
- HTML
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- 縦にタブをならべて隙間ができてしまう。
縦にタブをならべて隙間ができてしまう。 以下のように左側に縦にタブをならべその横にバーを並べ、本の見出しのようにしたいのですが、 タブとタブがくっつかないし、タブとバーがくっつかず一体感がありません。どうしたらよいでしょうか？ CSS .ta11 { margin: 0; padding: 0; border-width: 0; border-collapse: collapse; border-spacing: 0; } HTML <table class="ta11"><tr><td valign="top"><a href="qa.php"><img src="images/qa_kit.png" alt="" border="0"/></a></td><td rowspan="2"><img src="images/bar2.jpg" alt="" /></td></tr><tr><td><a href="qa1.php"><img src="images/qa_gai2.png" alt="" border="0" /></a></td></tr＞ </table>
- ベストアンサー
- HTML
- 順番にクラスをつけていく方法
順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード０にしてactiveクラスがついたときに フェードを１００にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>
- ベストアンサー
- JavaScript
- リストを一行にせずに横並びにする方法
リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか？ ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>
- 締切済み
- HTML
- imgボタンにfocusの当て方
<a href="#" onclick="javascript:on_pwche();"><img src="./img/ok.png" alt="OK"></a> 上記のボタンにフォーカスを当てたいのですが、 どうしたら良いのでしょうか？ 宜しくお願いします。 －－－以 上－－－
- ベストアンサー
- JavaScript
- wordpressのjqueryが動かない
wordpress3.8.1で作業しています。 会社のHPの作成用途でwordpressを使用しています。 何度か作成経験がありphpもなんとなく分かっているのですが、ここだけ解決せずです。 トップページにスライドショーのプラグインを入れたのですが動きません。 プラグインはWP-Cycleというプラグインです。 function.phpにはまだ何も記載していません。 header.phpはこんな感じの記載です。 ******************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="description" content="<?php bloginfo( 'description' ); ?>"> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> <link rel="shortcut icon" href="<img src="<?php bloginfo('template_url'); ?>/images/favicon.ico" /> <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" /> <?php wp_head(); ?> </head> <body> <a name="pagetop_here"></a> <div class="wrap"> <div class="header"> <h1 class="h_logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_logo.png"/></a></h1> <ul class="h_nav"> <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_01.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/news' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_02.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_03.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/works' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_04.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/faq' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_05.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/company' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_06.png"/></a></li> <li><a href="http://ameblo.jp/ecoblue-smile/" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/h_07.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_08.png"/></a></li> </ul><!--h_nav--> </div><!--header--> ******************************************* <?php wp_head(); ?>を無効にして外部の jqueryを読み込むにすると、スライドはおろか、縦に並んでしまいます。（cssが効いていないみたいです。） どこが原因なのかも分からないです。 ただ過去に同じheader.phpで同じプラグインが実装しています。 よろしくお願い致します。
- ベストアンサー
- PHP
お礼
zeffさん、すみません、大変遅れまして。 ありがとうございました。