HTML&CSSで「横並び」にする方法

2023/09/06 08:25

このQ&Aのポイント

HTMLとCSSを使用して「横並び」にする方法について説明します。
HTMLの「display:inline;」やCSSの「display:inline;」を使用することで要素を横に並べることができます。
ただし、質問文のCSSでは「display:inline;」の後に不要なスペースが入っている可能性がありますので、削除するか確認してください。

ベストアンサー

「横並び」にする方法→HTML&CSS

2015/02/26 15:22

HTMLでは、 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>KUJIRA cafeへようこそ</title> <link rel="stylesheet" type="text/css "href="css/style.css"> </head> <body> <div class="wrapper">  <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> CSSでは #nav li { 　　　　display:inline; 　　　　list-style-type: none; 　　　　padding-right: 30px; } と書きましたが「横並び」になりません。何が間違っているのでしょうか？非常に困っております。回答よろしくお願いします。

abcabc119
お礼率86% (287/332)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

doraneko66
ベストアンサー率11% (535/4742)

2015/02/26 15:36 回答No.2

やはり <link rel="stylesheet" type="text/css "href="css/style.css"> これが問題でしたね。 ”とhrefがくっついているので、空白を入れてください。

質問者

お礼 2015/02/26 16:12

やっと、やっと・・・解決しました。本当にありがとうございます。初歩的なことを何回も質問したのに、その度何度も回答を頂き大変感謝しております。やっと次に進めます。

その他の回答 (3)

tkmojo
ベストアンサー率50% (105/207)

2015/02/26 15:58 回答No.4

あなたまだやってるんですか？嘘でしょ？ <link rel="stylesheet" type="text/css "href="css/style.css"> これが間違ってます。 <link rel="stylesheet" type="text/css" href="css/style.css"> これが正しい。（半角スペースの位置）ここを修正するとcssは効きます。（正しい位置にファイルを置いてれば、の話ですが）あと、この辺も無茶苦茶です。 <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> imgの閉じタグが無いし、それぞれの属性の間は半角スペースで区切ってください。

質問者

お礼 2015/02/26 16:05

すいません。知識が浅く初めて書いたので。で、やっと解決しました。回答ありがとうございます。

doraneko66
ベストアンサー率11% (535/4742)

2015/02/26 15:41 回答No.3

IE11だと右クリックから要素の検査を行い、デベロッパーツールを出してコンソールをみると原因がわかると思われます。

質問者

お礼 2015/02/26 16:08

"とhrefの間に半角スペースが必要だったみたいです。やっと解決しました。ありがとうございます。

outbrave
ベストアンサー率60% (231/380)

2015/02/26 15:29 回答No.1

#nav li { □□□□display:inline; □□□□list-style-type: none; □□□□padding-right: 30px; } 全角文字が入っているからです。（□が全角スペース）インデントを付けるのなら、半角スペースまたはタブで。

質問者

お礼 2015/02/26 16:06

大変参考になりました。回答ありがとうございます。

関連するQ&A

HTML&CSSで「横並び」にする方法
最近、独学でプログラミングを学び始めた初心者です。知識が浅く、HTML&CSSで「メニューリストを横並びにする」にする方法がわかりません。詳しい方がいたら教えてください。・HTMLでは <h1 id="logo"><a href="index.html"><img src="images/logo1.png"width="400"height="200"alt="KUJIRA cafe"</a></h1> <ul id="nav"> <li><a href="index.html">ホーム</a></li> <li><a href="about.html">店舗案内</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="menu.html">メニュー</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> ・CSSでは、 #nav li { display: inline; list-style-type: none; padding-right: 30px; } と書いたのですが「横並び」になりません。何が間違っているのでしょうか？これだけの情報だと回答が難しいかもしれませんが、非常に困っております。よろしくお願いします。
- ベストアンサー
- HTML
ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ　ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP">  <div id="page">  <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div>  <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div>  <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div>  <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
cssでロールオーバーを横並びにする記述方法のご教示をよろしくお願いい
cssでロールオーバーを横並びにする記述方法のご教示をよろしくお願いいたします。 htmlには以下の記述をしてあります。［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"</a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"></a></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"></a></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"></a></li> </ul> </div> ここまでは、出来たのですが、その後のcssでどのように記述をして良いのかわからなくなってしまいました。Okwave様で何度かご質問もさせて頂き、とてもためになるご教示も頂いたのですが、どうしてもうまくいかなく難議しているところで御座います。htmlの記述は上記のように出来たのですが・・・画像については、以下にアップしました。よろしかったら見てみてください。 http://desktop10.web.fc2.com/test.html どうか初心者の私にご教示のほどよろしくお願いいたします。
- ベストアンサー
- HTML
横並びのリストで左端がはみ出る
リストを横並びにしてメニューバーを作ろうとしているのですが、CSSの参考書に書いてある通りにHTMLとCSSを書いても、添付ファイルのように、どうしても左端がはみ出てしまいます。（この例ではわかりやすいようにli要素の左にボーダーを入れています） index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>TITLE</title> <link href="nav.css" rel="stylesheet" type="text/css"> </head> <body> <ul class="nav"> <li class="nav_item"><a href="index.html">ホーム</a></li> <li class="nav_item"><a href="#">リンク１</a></li> <li class="nav_item"><a href="#">リンク２</a></li> </ul> </body> nav.css .nav { display: table; width: 100%; table-layout: fixed; padding-top: 10px; padding-bottom: 10px; background-color: #dddddd; } .nav_item { display: table-cell; border-left: thick solid #000000; } .nav_item > a { display: block; list-style-type: none; text-decoration: none; text-align: center; } どのブラウザで確認しても同じ現象です。どうやったら正常に表示されるのか、おわかりになれば教えてください。
- ベストアンサー
- CSS
CSS+HTMLだけで画像を使わず、角丸タブメニューを作りたい
職場でネットショップのWEB管理をしているものですが、サイト上のヘッダーに画像を使わずCSS+HTMLだけで角丸タブメニューっぽいものを作りたいのですが、なんせCSS初心のためどこをどう指定すれば画像なしの角丸タブメニューっぽくなるのかわかりません。できたら各メニューの下段にもサブメニューリンクを追加したいのですが・・・どうか良きアドバイスよろしくお願いします。感じとしてはここのサイトっぽいタブメニューができればと・・・ CSS <style type="text/css">  </style> HTML <div id="demo-container"> <ul id="simple-menu"> <li><a href="#" title="MENU1" class="current">MENU1</a></li> <li><a href="#" title="MENU2">MENU2</a></li> <li><a href="#" title="MENU3">MENU3</a></li> <li><a href="#" title="MENU4">NENU4</a></li> <li><a href="#" title="NENU5">NENU5</a></li> <li><a href="#" title="NENU6">NENU6</a></li> </ul> </div>
- ベストアンサー
- HTML
よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい
よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。まず以下の記述をしました。［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> ［css］ #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下にページでエラーが発生しました。と出てしまいます。お手数では御座いますがどなた様かご教示をお願いできませんでしょうか？わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。
- ベストアンサー
- HTML
javascriptとCSSを使ってのドロップダウンメニュー作成
CSSとJavaScriptを使ってドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();
- 締切済み
- JavaScript
HTMLとCSSを使い、
HTMLとCSSを使い、メニューボタンを作成しました。しかしIE８やgooglchromeではきちんと表示されるのに対して Firefoxではメニューボタンの背景に設定した画像が表示されません。以下にコーディングを記します。 ************************************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="outline"> <ul id="ul"> <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> </ul> </div> </body> </html> ************************************************************** メニュー背景ボタンはPhotoshop、色はRGBで作成しました。ちなみに、 <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> を <a href="#" class="menu"><li>ホーム</li></a> <a href="#" class="menu"><li>トップ</li></a> に変更すると画像は表示されるようになりますが、本来ホームとトップの裏に１つづつ表示されるはずの画像がテキストの無い所でもう１つづつ表示されてしまいます。計４つです。かといって <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> を <li class="menu"><a href="#">ホーム</a></li> ><li class="menu"><a href="#">トップ</a></li> に変更しても、 a:hoverで色違いの同じ画像を背景にせっとするときにサイズなどがうまくいきません。ボタンを全て画像にして、ビヘイビアでイメージをスワップさせるという手もありますが、それは避けたいと思います。 Firefoxでもきちんと表示される正しいコーディングを教えてください。
- ベストアンサー
- HTML
リストのCSSでのflort時の背景
ulに幅と背景色を設定しているのですが、リストを横に並べるために、floatさせると希望の表示になりません。リストを横に並べて、かつ、ulで指定している幅と背景色にしたいのですが、どのようにすればよいでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu {background-color: red;width: 1024px;} ul#menu li {float: left; width: 100px;} </style> <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
メニューの横並びで改行されてしまう。
ul　li　を使用して、横並びのメニューを作成したいのですが、最後の項目が、横に並びきれなくて、下の段に移ってしまいます。 border幅や、marginも計算してpxで指定しているつもりですが、上手くいきません(TдT) 何故ですかね？ HTML <body> <div id="wrapper"> <header> <nav> <ul> <li><a href="#">about</a></li> <li><a href="#">information</a></li> <li><a href="#">party</a></li> <li><a href="#">access</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header> </div> CSS #wrapper { width: 985px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } nav ul { list-style-type:none; } nav li { float:left; width:190px; border: 1px #ffb366 solid; text-align:center; margin-right:5px; }
- ベストアンサー
- CSS

HTML&CSSで「横並び」にする方法

「横並び」にする方法→HTML&CSS