重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

レスポンシブルです。

解決済

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

レスポンシブルです。
https://oshiete.goo.ne.jp/qa/11629904.html
の質問の続きです。

以下のプログラムですが！
添付画像で確認が取れると思います。
---------------------------------------
皆様に、私の作品を
お見せする
ことができとても光
栄です。
---------------------------------------
以上ですが、途中改行となります。
以下がプログラムのCSS側にあります。
span.sample１～３をすべて消しても、画像は
全く変わりませんでした。
何故？途中改行するのでしょうか？
よろしくお願いいたします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>切り絵集</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:4 … rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="favicon.ico" rel="shortcut icon">
</head>
<body id="index">

<!-- header始まり -->
<header>
<div class="logo"><!--P80・P109-->
<a href="index.html"><img src="images/top.png" alt="TOP"></a>
<!--P84-->
</div>
<nav>
<ul class="global-nav">
<li><a href="portfolio.html">Leaf</a></li>
<li><a href="portfolio-Dis.html">Disney's</a></li>
<li><a href="about.html">Flower</a></li>
</ul>
</nav>
</header>

以下CSS側です。
<!-- wrap始まり -->
<div id="wrap"><!-- ｺﾝﾃﾝﾂｴﾘｱを指定する -->
<div class="sample">
<h2><span class="sample1">切り絵集</span></h2>
<h2><span class="sample2">皆様に、私の作品をお見せする</span></h2>
<h2><span class="sample3">ことができとても光栄です。</span></h2>
</div>
</div>
<!-- wrap終わり -->
<footer><!--footer要素を機記述します-->
<small>(C)2017 Hattori-studio.</small>
</footer>

</body>
</html>

#wrap {/*ｺﾝﾃﾝﾂｱﾘｱ*/
color: #ffffff;/*ｺﾝﾃﾝﾂｱﾘｱﾌｫﾝﾄの色は白*/
}
div.sample {/*index.html皆様で始まる文字の調整用*/
width:200px;
height:150px;
position:relative;
}

.span.sample1 {
position:absolute;
top:10px;
left:10px;
}

.span.sample2 {
position:absolute;
bottom:10px;
right:10px;
}

補足
どうもすみません！
以上のURLのリンクが切れていましたので、以下でつながります。
https://detail.chiebukuro.yahoo.co.jp/qa/questio …
よろしくお願いいたします。

「レスポンシブルです。」の質問画像

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

  • うーん・・・

    どうもすみません！
    №２　言語ですが、せっかく作ってくださいましたが
    　リンクページも同文字と同じ画像出て影響がでました。
    リンクが重なり合った画像となりました。
    原因は　
    グルバール変数だから！でしょうか？

    No.2の回答に寄せられた補足コメントです。 補足日時：2020/05/15 16:27
    通報する

  • へこむわー

    どうもすみません！
    以上の補足は間違いでした。

    No.3の回答に寄せられた補足コメントです。 補足日時：2020/05/16 11:14
    通報する
通報する

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

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

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

うーん、そもそもその文章を途中で切る事（改行）自体がおかしく、


<h2>段落で、３段にするのは、文章構造的に、とてもおかしい事ですよ！
（音声ブラウザで、どうなるか想像してみましょう・・・）

なので、
文章構造的には、以下のようにするべきで、CSSは適当で良いのです。

<div id="wrap">
<h2>切り絵集</h2>
<p>皆様に、私の作品をお見せすることができとても光栄です。</p>
</div>

div#wrap{ padding:40px 10px; width:100%; background: url(～背景画像/葉っぱ～.jpg) 50% 0 /contain no-repeat;}
div#wrap h2, div#wrap p{ margin:0; padding: 0.5em; font-size:24px; font-weight:bold; color:white; line-height:2;}
この回答への補足あり
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答くださいまして、ありがとうございましす。
ご紹介していただきました。プログラムで
うまくいっていっています。
後は、葉っぱの画像を大きくしたいのですが・・・
数値を操作しましたが、至りませんでした？
手が空き次第に、頑張ります。
今後ともよろしくお願いいたします

通報する
お礼日時：2020/05/13 07:31

No.3

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

#2です。

　補足拝見しましたが、

影響が出るのは、他がおかしいからでしょうね。
単品で作って、単品で表示すると、何がおかしいか、何が正しいか判断できるでしょう・・・

＞「言語ですが」
＞「リンクページも同文字と同じ画像出て影響」
＞「リンクが重なり合った画像」
＞「グルバール変数だから」
A,
何を言っているのか、さっぱりわかりません・・・
私は、日本語の他に多少の英語、HTML/CSS/画像を交えての会話などはできますが、
ご提示の文章では、誰も理解できないでしょ（笑）
提示すらしていない、他の人には見えない/知らないリンクページの事なんて、文章で言われても、誰も理解も想像すらできませんがな・・・

新規で、詳細な質問をしてください。
この回答への補足あり
    • good
    • 1
    • 件
通報する
この回答へのお礼

どうもすみません！
補足が
ちゃんと日本語になっていませんでした。
眠たかったからでしょう！
手が空き次第に調整したいと思います。
しばらくお待ちください。

通報する
お礼日時：2020/05/16 09:26

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞以上ですが、途中改行となります。
正確には「改行」ではなく、行末で折り返しがおきているのではないでしょうか？
親要素に幅を指定しているので、文字等はその中で自動的に折返しされます。
例えば、
　border:1px solid red;
などを追加してみれば、要素の大きさが目視できるようになるので理解できることでしょう。
（背景色等でも良いです）

＞span.sample１～３をすべて消しても、画像は
＞全く変わりませんでした。
「.span」となっているので、そのCSSはもともと適用されていませんから、あってもなくても同じです。
ご提示のCSSのうち実際に適用されているのは、
　#wrap
　div.sample
だけです。
ブラウザに表示して確認なさっているのなら、F12キーでブラウザの開発ツールが表示されると思います。（たいていの最近のブラウザであれば）
これを利用することで、HTMLが実際にどのように解釈されているかやCSSがどのように適用されているかを確認することができますので、使い方を覚えておくことをお勧めします。


ご質問には関係がありませんが・・・
＞以下のプログラムですが！
HTMLもCSSも「言語」ではありますが、プログラムではありません。

＞レスポンシブルです。
Web関連では「レスポンシブ」という言葉はありますが、ご質問の内容とは関係はないでしょう。
一方、レスポンシブルは「責任ある」とか「信頼できる」などの意味となる英単語のはずです。
文章として何を意味しておっしゃっているのかわかりません。
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答くださいまして、ありがとうございました。
ご回答の内容から
１）「改行」ではなく、行末で折り返しがおきている

　　了解です。知識不足で、これからの課題です。


２）「.span」となっているので、そのCSSはもともと適用されていません
　　
　http://www.htmq.com/style/top.shtml
　　　にスタイルシート部分は外部ファイル（sample.css）に記述。
div.sample {width:200px; height:150px; position:relative;}
span.sample1 {position:absolute; top:10px; left:10px;}
span.sample2 {position:absolute; bottom:10px; right:10px;}
ありましたので、そのままコピーペーストしました。

３）HTMLもCSSも「言語」ではありますが、プログラムではありません。
　　
　了解です。


４）Web関連では「レスポンシブ」という言葉はありますが、ご質問の内容とは関係はないでしょう。
　　　
　　どうもすみません！[レスポンシブル]ではなくて[レスポンシブデザイン]でした。
　
　　私的には、製作にあたり、パソコン端末での閲覧よりも、スマホ端末の閲覧対象
　　で、取り組んでいます。
　　つきまして、それを「レスポンシブデザイン」というそうですが！
　　詳しくは、私もわかりません！？

通報する
お礼日時：2020/05/15 07:03

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報