HTML/CSS/JavaScriptを扱っている方の為のコミュニティです。
色んな疑問や質問を皆で解決していきましょう!
※最初はjQuery限定のコミュでしたが、jQueryはJavaScriptのライブラリであり、
また、HTML/CSSも深く関わってくるので全部一つのコミュにまとめました。
フォーラム(掲示板)ルール
一般常識さえ守れば、どんなスレでも立てていただいて構いません。
常識外れの投稿やスレを見つけた場合は、私の判断で削除いたします。
スレ立てるまでもない、簡単な質問は、
「スレ立てるまでもない質問」のスレッドに投稿して下さい。
基本的には、一つの質問につき1つのスレッドを立てていただて構いません^^
-
Ciel
- 記事: 252
- 登録日時: 13年前
#1
投稿記事
by Ciel » 13年前
またまた質問です。
下記のソースを表示してもらえればわかるのですが、
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
- 登録日時: 13年前
- 住所: 神奈川県
#2
投稿記事
by Justy » 13年前
文字の部分だけ 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
- 登録日時: 13年前
#3
投稿記事
by Ciel » 13年前
Justyさん、毎度ありがとうございます!
なるほど!spanをうまく使うんですね!
OKです!
ありがとうございました!
oui C'est la Vie♪