【HTML/CSS】背景色の幅の自動調整について

HTML/CSS/JavaScriptを扱っている方の為のコミュニティです。

色んな疑問や質問を皆で解決していきましょう!

※最初はjQuery限定のコミュでしたが、jQueryはJavaScriptのライブラリであり、
また、HTML/CSSも深く関わってくるので全部一つのコミュにまとめました。
フォーラム(掲示板)ルール
一般常識さえ守れば、どんなスレでも立てていただいて構いません。

常識外れの投稿やスレを見つけた場合は、私の判断で削除いたします。

スレ立てるまでもない、簡単な質問は、
「スレ立てるまでもない質問」のスレッドに投稿して下さい。

基本的には、一つの質問につき1つのスレッドを立てていただて構いません^^
返信
アバター
Ciel
記事: 252
登録日時: 8年前

【HTML/CSS】背景色の幅の自動調整について

#1

投稿記事 by Ciel » 8年前

またまた質問です。

下記のソースを表示してもらえればわかるのですが、
divで囲んだ文字の背景に色をつけたんですが、どうも背景色が一番端まで伸びてしまいます。
これを文字があるところまで自動で調整してくれる、CSSやHTMLの設定はありますでしょうか?
色々overflowとかやってみたんですが、うまくいきませんでした。
よろしくお願いします。

コード:

<html lang="ja">
<head>
<title>jqueryテストページ</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.4.2");</script>
<script type="text/javascript">google.load("jqueryui","1");</script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css" rel="stylesheet">
<style type="text/css">
<!--
div{
	background-color:#444444;
}
-->
</style>
</script>
</head>
<body>

<div id="myclick">ここをくりっく</div>
<div id="change">ここがかわります</div>


</body>
</html>
oui C'est la Vie♪

アバター
Justy
副管理人
記事: 122
登録日時: 8年前
住所: 神奈川県

Re: 【HTML/CSS】背景色の幅の自動調整について

#2

投稿記事 by Justy » 8年前

 文字の部分だけ spanで囲って、独自にスタイルシートを割り当てればOKです。

コード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
  <title>jqueryテストページ</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta http-equiv="content-style-type" content="text/css">
  <meta http-equiv="content-script-type" content="text/javascript">
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("jquery","1.4.2");</script>
  <script type="text/javascript">google.load("jqueryui","1");</script>
  <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css" rel="stylesheet">
  <style type="text/css">
  <!--
    div
    {
        background-color:#444444;
    }
    .text1
    {
        background-color:#ff00ff;
    }
    .text2
    {
        background-color:#ffff00;
    }
  -->
  </style>
</head>
<body>
  <div id="myclick"><span class="text1">ここをくりっく</span></div>
  <div id="change"><span class="text2">ここがかわります</span></div>
</body>
</html>

アバター
Ciel
記事: 252
登録日時: 8年前

Re: 【HTML/CSS】背景色の幅の自動調整について

#3

投稿記事 by Ciel » 8年前

Justyさん、毎度ありがとうございます!

なるほど!spanをうまく使うんですね!
OKです!

ありがとうございました!
oui C'est la Vie♪

返信

“HTML/CSS/JavaScript” へ戻る