プロが教えるわが家の防犯対策術！

リンク文字同士の間隔を開けるには？

解決済

  • 質問者：Campus2
  • 質問日時：
  • 回答数：5件

皆様のご協力より、やっと以下のプログラムを作成することがで
きました。
少しづず理想に近づけたいと思います。
さて、以下のプログラムですが、リンクの文字同士が
LeafFlowerDisney'sと表示され、間隔がほとんどありません！
リンク文字同士の間隔を開けるには、どんなプログラムを組めば
いいでしょうか？
よろしくお願いいたします。
<center>
<ul class="global-nav" style="font-size:40px;">
<a href="portfolio.html">Leaf</a>
<li><a href="about.html">Flower</a>
<li><a href="portfolio.html">Disney's</a>
</ul>
</center>

質問者からの補足コメント

  • うーん・・・

    ありがとうございます。
    現在ＣＳＳで、できるか模索中です。
    能力が低いので、できるかは疑問です！？

      補足日時：2019/11/20 10:13
    通報する

  • へこむわー

    <li>は不要でしたので、外します。

      補足日時：2019/11/20 10:22
    通報する

  • うーん・・・

    私が現在使用している参考にありましたよ^^
    プログラムはCSSです。

    メニュー項目にはリスト形式になっているの
    で、デフォルトでは縦に並んでいます。
    まず、これを横並びにするため、class属性
    「global-nav]と目印をつけたul要素の
    子要素となるli要素に対して、floatプロパ
    ティで左揃えを指定します。
    .global-nav li {
    float: left;
    margin: 0 20px;
    font-size: 20px;
    list-style: none;
    font-family: 'Bitter', serif;
    }
    　以上ですが、最初からこの設定が施されているにも関わらず
    「横並びにならない理由」として、の質問の内容を変更します。

      補足日時：2019/11/22 14:50
    通報する

  • うれしい

    No.3
    回答者： gura_ 回答日時：2019/11/20 08:27
    様ご回答くださいまして、ありがとうございました。
    お礼の欄にプログラムを書き込みました。
    お礼の文字数制限で、補足を借りたことをご了承ください。
    　 gura様のご回答と、他のサイトでご回答してください
    ました方の以下のプログラム
    <!--
    .img-contain img {
    width: 20vw; height: 33.3vh;
    margin: 3.15vw 0 3.15vw 3.15vw;
    object-fit: contain;
    }
    -->
    とのコラボで理想に近づけるけることができました。
    以上ですが
    不思議と<!--　～　-->のコメントとしていただいたプ
    ログラムでしたが！コメントを外しても同じです。
    コメントをつけていても、プログラムが働いている理由は
    私にも分かりません。

      補足日時：2019/11/22 16:01
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.3ベストアンサー

  • 回答者： gura_
  • 回答日時：

Campus2さん



>････文字同士の間隔を開けるには、･･････････

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
li{ display:inline-block;}
</style>
</head>
<body>
<center>
<ul class="global-nav" style="font-size:40px;">
<li><a href="portfolio.html">Leaf</a>　</li>
<li><a href="about.html">Flower</a>　</li>
<li><a href="">Disney's</a>　</li>
</center>
</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

以下でOKとなりました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
li{ display:inline-block;}
<!--
.img-contain img {
width: 20vw; height: 33.3vh;
margin: 3.15vw 0 3.15vw 3.15vw;
object-fit: contain;
}
-->
</style>

</head>
<body>
<header>
<div class="logo">
<a href="index.html"><img src="images/top.png" alt="TOP" style="width:10%; position:absolute; top:-1px; left:-10px;" ></a>
</div>
<center>
<ul class="global-nav" style="font-size:40px;">
<li><a href="portfolio.html">Leaf</a>　</li>
<li><a href="about.html">Flower</a>　</li>
<li><a href="">Disney's</a>　</li>
</center>
</nav>
</header>
<div class='img-contain' >
<img src="images/Dis/14371.jpg" alt="駅への階段" >
<img src="images/Dis/14372.jpg"="自転車とシャッター">
<img src="images/Dis/14373.jpg" alt="スケートパーク">
<img src="images/Dis/14374.jpg" alt="エアポート">
<img src="images/Dis/14375.jpg" alt="雑貨を扱う店舗">
文字おーばで、1437６.jpg～1437９.jpgを省略しました。
<img src="images/Dis/14380.jpg" alt="ストリートバスケ">
</div>

</body>
</html>

通報する
お礼日時：2019/11/22 15:37

No.5

  • 回答者： naokita
  • 回答日時：

CSSの補足を見ました。

#2です。

まずは、HTMLの変更

<ul class="global-nav" style="font-size:40px;">
を
<ul class="global-nav">
に戻す。

そして、#2に書いたように、しっかり<li>～～</li>を付与しないと、CSSは利きませんので、#2のように正しくしましょう。
自分勝手に<li></li>を削除するのは、HTMLでは文法違反ですｗ

<center>
<ul class="global-nav">
<li><a href="portfolio.html">Leaf</a></li>
<li><a href="about.html">Flower</a></li>
<li><a href="portfolio.html">Disney's</a></li>
</ul>
</center>


次に、CSSを以下と入れ替え変更
.global-nav li {
/* float: left; これで横並びになっているので、非対応で縦並びに変化 */
margin: 0 20px; /* この数値0や20pxを変更すると微調整可能 */
font-size: 40px; /* 先の40pxに大きくした */
list-style: none; /* 黒●を削除している */
font-family: 'Bitter', serif; /* フォントの種類 */
}


怪しいので、
１行目の.global-nav li {
を
ul.global-nav li {
にした方が良いかな。

もしかして、
.global-nav li a{
もあるかもしれないので、その内容も注意

こんな感じで、CSSには、他のCSSでの優先や上書きもあるので、
一部のソースを載せられても、ヒントにはなるけど、実際の正解はわからないよ・・・

=====================
蛇足、
もっと最適にするなら、<center>なんて、時代遅れのタグなんて使わない・・・

<ul class="global-nav">
<li><a href="portfolio.html">Leaf</a></li>
<li><a href="about.html">Flower</a></li>
<li><a href="portfolio.html">Disney's</a></li>
</ul>

そして、CSSに以下を設置（または既存があるなら内容を追記）

ul.global-nav li {
margin: 10px auto 10px auto;
}

/* 順に、上は間隔を10px開けた 左右をautoにすることでセンター寄せになる　次の10pxは株の間隔 */

autoを数値に変えれば、センター寄せではなく、左右のスペースが開きます。

----------------
きっと、他にもボロがある筈です（素人あるある）ので、じっくり勉強して良いもの作って下さい。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： t_fumiaki
  • 回答日時：

手っ取り速く、CSSに以下1行を追加する。



.global-nav a{margin:0 10px 0 10px;}

margin:上 右 下 左;
上の例は「global-nav内のaタグは、左右10px空ける」、と言う意味。
    • good
    • 1
    • 件
通報する

No.2

  • 回答者： naokita
  • 回答日時：

前の質問を見たけど・・・　別ファイルのCSSを使えない人だね？　じゃHTMLで直接書く。



まず、質問内のソースは間違っているので、最初に修正から始めるけど。

<center>
<ul class="global-nav" style="font-size:40px;">
<li><a href="portfolio.html">Leaf</a></li>
<li><a href="about.html">Flower</a></li>
<li><a href="portfolio.html">Disney's</a></li>
</ul>
</center>

こうなる。
それで、本来なら縦に３行に並ぶんだけど、
＞LeafFlowerDisney'sと表示され、間隔がほとんどありません！
という事は、横並びになっているんだよね？
それならば、以下のように変更

<center>
<ul class="global-nav" style="font-size:40px;">
<li><a href="portfolio.html">Leaf</a></li>
<li style="margin-left:1.6em; margin-right:1.6em;"><a href="about.html">Flower</a></li>
<li><a href="portfolio.html">Disney's</a></li>
</ul>
</center>

数字の1.6は倍数の意味だから適当な数値に変更しても良い。1.2や1.8とか2.5とか3でも何でも良いので、適当に変えて表示してみて。それが微調整って事。


=========================
万が一（別のCSSの優先で）上記でも、何も変わらななければ、
以下に変更（他にもやり方はあるけど）

<center>
<ul class="global-nav" style="font-size:40px;">
<li><a href="portfolio.html">Leaf</a></li>
<li><a href="about.html" style="margin-left:1.6em; margin-right:1.6em;">Flower</a></li>
<li><a href="portfolio.html">Disney's</a></li>
</ul>
</center>
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答くださいまして、ありがとうございます。
htmlでのプログラムですね^^
ご指摘いただきました通り、CSSを勉強しします。

通報する
お礼日時：2019/11/20 15:55

No.1

  • 回答者： t_fumiaki
  • 回答日時：

CSSが邪魔してるとしか言えません。



CSSで以下を探して、内容を書いて下さい。
.global-nav
ul
li
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答くださいまして、ありがとうございました。
CSS関連を
８０分ほど、調べましたが、解決に至っていません！？

通報する
お礼日時：2019/11/20 11:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報