• ベストアンサー

Dreamweaverで、直接タグにスタイルを適用したい場合・・・

Dreamweaverでテキストとかにスタイルを適用すると、 ヘッダーの部分にまとめて記述をしてくれますが、 Dreamweaverでタグに直接記述させる方法はあるのでしょうか? 例えば、↓このような記述なんですが、 <h2 style="width: 300px; font-weight: bold; color: #ffffff; background-color: #8484ee;">テスト</h2>

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

  • ベストアンサー
  • suzuko
  • ベストアンサー率38% (1112/2922)
回答No.1

そのままコードビューに記入すれば反映されますよ。 ちなみに、書き方としてはMX以降(以前は未検証)ならば、 <h2>にカーソルを持っていき、2の後に半角英数で「スペース」を空ければタグ表が出てきます。「style」を選択すれば <h2 style="">テスト</h2> となります。ご参考までに。

関連するQ&A

  • EXCELでHTMLのタグの入ったセルを結合したい

    下記のHTMLのタグが入ったセルと画像URLのセルを結合したいのですが、&などで結合すると ダブルクォーテーションが倍くらいに増えてHTMLのタグとして機能しません。 どうやって結合させるのがいいのでしょうか? =A1(HTMLのタグ)&A2(画像URL)&A3(HTMLのタグ) <body> <div style="WIDTH: 100%; TEXT-ALIGN: center"> <div id="wrapper" style="FONT-SIZE: 23px; FONT-FAMILY: Arial, Helvetica, sans-serif; WIDTH: 860px; COLOR: #000; TEXT-ALIGN: left; MARGIN: 0px auto"> <h1 style="FONT-SIZE: 38px; HEIGHT: 60px; WIDTH: 850px; COLOR: #ffffff; PADDING-LEFT: 10px; MARGIN: 0px; LINE-HEIGHT: 60px; BACKGROUND-COLOR: #336600">Picture</h1> <img src="画像URL"> <div class="sub_tit" style="FONT-SIZE: 35px; HEIGHT: 40px; WIDTH: 850px; FONT-WEIGHT: bold; COLOR: #ffffff; PADDING-LEFT: 10px; LINE-HEIGHT: 40px; BACKGROUND-COLOR: #336600"> Description </div><br><font size="5">

    • ベストアンサー
    • HTML
  • HTMLのタグの入ったセルを結合したい

    ヤフオクやイーベイの出品管理をEXCELで行っており、商品説明や商品画像URLを 各セルに保存しています。 別途用意したHTMLのフォーマットにそれぞれを埋め込みたいです。 商品数が多いので、コピペではとても出来ません。 現状、そのまま下記のとおりセルの中身を結合するとダブルクオーテーションが現状の 倍くらいの数になってしまい、HTMLのタグとして機能しません。 =A1(HTMLのタグ)&B1(画像URL)&C1(HTMLのタグ) A1のセル <body> <div style="WIDTH: 100%; TEXT-ALIGN: center"> <div id="wrapper" style="FONT-SIZE: 23px; FONT-FAMILY: Arial, Helvetica, sans-serif; WIDTH: 860px; COLOR: #000; TEXT-ALIGN: left; MARGIN: 0px auto"> <h1 style="FONT-SIZE: 38px; HEIGHT: 60px; WIDTH: 850px; COLOR: #ffffff; PADDING-LEFT: 10px; MARGIN: 0px; LINE-HEIGHT: 60px; BACKGROUND-COLOR: #336600">Picture</h1> <img src=" B1のセル 画像URL C1のセル "> <div class="sub_tit" style="FONT-SIZE: 35px; HEIGHT: 40px; WIDTH: 850px; FONT-WEIGHT: bold; COLOR: #ffffff; PADDING-LEFT: 10px; LINE-HEIGHT: 40px; BACKGROUND-COLOR: #336600"> Description </div><br><font size="5">

  • ピクセル表示をパーセント表示にするには?

    ピクセル表示をパーセント表示にするには? style.cssで下のような記述をしています。 これをパーセント表示に切り替えたいのですが、 WIDTH: 640px;を WIDTH: "100%"に変更する他に、 どこを変更すればよいのでしょうか? 上の変更だけでは、パーセント表示に切り替わりません。 よろしくおねがいします。 -----ここから BODY { BACKGROUND-COLOR: #000000 } TABLE { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 640px; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; BORDER-RIGHT-WIDTH: 0px } DIV.veryimportant { FONT-SIZE: large; BACKGROUND: #7375ce; COLOR: #ffffff } A:hover { FONT-WEIGHT: bold; COLOR: #f00ca0 }

    • ベストアンサー
    • HTML
  • Firefoxでのスタイルシートの記述について

    Firefoxでのスタイルシートの記述について 4つの文字を配置するために (1) font-size:18px; font-weight:bold; color:#000000; margin:127px 72px 0px 40px; (2) font-size:18px; font-weight:bold; color:#000000; margin:64px 72px 0px 40px; (3) font-size:18px; font-weight:bold; color:#000000; margin:101px 72px 0px 40px; (4) font-size:18px; font-weight:bold; color:#000000; margin:65px 72px 0px 40px; と指定しました。IEでは思った位置になったのですが Firefoxでは(2)(3)(4)が下のほうにずれてしまいました。Firefoxに合わせるとIEでの位置が上にずれてしまい頭を悩ませています。 記述の間違いや、アドバイスなどあれば教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • <li>タグについて質問です。まずは添付した画像を見てください。当方は

    <li>タグについて質問です。まずは添付した画像を見てください。当方は以下のようなタグを入力し、FC2ブログへ記事を書いたのですが、丸ボッチの部分が枠の外へはみ出してしまいました。これを枠の内側へ揃えたいのですが、どうすればいいのでしょうか?尚、当方のブログ記事とスタイルシートは以下のとおりです *****ブログ記事*********************************** <ul><li>テスト1</li><!-- --><li>テスト2</li><!-- --><li>テスト3</li><!-- --><li>テスト4</li></ul> *****スタイルシート******************************* *{ margin:0px; padding:0px; } html { scrollbar-track-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-darkshadow-color:#000000; scrollbar-3dlight-color:#000000; scrollbar-arrow-color:#000000; } body { margin :15px; background-color :#FFFFFF; text-align :center; color :#000000; font-size :10pt; } table{ font-size :10pt; } img { border :0px; } form { margin :0px; } textarea,input,select { background-color :#FFFFFF; font-size :10pt; color :#000000; border :1px #000000 solid; } /* リンクの設定 ------------------------------------------------------------ */ a { text-decoration:none; color : #CC0000; } a:hover { text-decoration:underline; color : #FF0000; } /* 本文部分の設定 ------------------------------------------------------------ */ div#primary-column { float : right; width : 440px;/* コンテンツ幅 */ } div.section{ margin-bottom :15px; width : 440px;/* コンテンツ幅 */ background-color :#FFFFFF; border : 1px #000000 solid; } div.entry-date{ padding :3px 5px; background-color :#000000; text-align : right; font-weight :bold; color :#FFFFFF; } div.entry-date a{ color :#FFFFFF; } h1 { padding :3px 5px; border-bottom : 1px #000000 dotted; font-weight :bold; font-size :10pt; } .entry-body { padding :10px; line-height:1.3; } /* 追記部分 */ .entry-more{ margin :15px 0; } /* 拍手部分 */ .fc2_footer{ margin :10px 0; } /*タグ部分 */ div.tag_lnk{ margin :10px 0; } /* フッター部分 */ ul.entry-footer { list-style-position : inside; text-align:right; font-size :8pt; } ul.entry-footer li { display : inline; list-style-type : none; } (スタイルシートCSSから一部抜粋)

  • スタイルシートでの文字位置の指定

    正方形の中心に文字があるようなデザインにしたくて 次のように記述したのですがうまくいきません。 .text{ height : 160px; width : 160px; color : #FFFFFF; padding: 0px; margin: 0px; background-color: #6C3C1F; font-size: 15pt; text-align: center; vertical-align: middle; font-weight: bold; } 横位置はきちんと中央揃えになりますが、 縦の位置は文字が正方形内で上揃えになってしまいます。 どうすれば希望のデザインにできるか教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSS:スタイルシートでテキストリンク

    教えてください!! 外部ファイルのスタイルシート(CSS)を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 IE6.0では問題なく起動していますが、NS7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか? ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のCSSの記述】 .menu { font-family: "MS Pゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

  • floatについて

    ■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか? 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか? <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>

    • ベストアンサー
    • HTML
  • ブログのTOP画像表示方法(悩んでます)

    どこをどう変えればTOPに画像をつけるコトが出来るのでしょうか?? ホントに悩んでます。 検索してもよくわからなくて・・・ body { font-family: Arial, Helvetica, sans-serif; background-color:#ffffff; background-image:url(http://269g.jp/img/bg/nail_style_1/bg.gif); background-repeat:repeat-y; margin:0px; padding:0px; text-align:center; } #container{ text-align:right; margin:0px auto 0px auto; width:906px; height:596px; background-image:url(http://269g.jp/img/bg/nail_style_1/top.jpg); background-repeat:no-repeat; background-position:center top; background-color:#ffffff; } h1 { text-align:left; margin:0px 0px 0px 0px; padding-top:225px; font-weight:bolder; font-family:sans-serif; font-size:19px; } h1 a{ color:#58B29A; text-decoration: none; font-family:sans-serif; font-weight:bolder; } h2 { padding: 0px; font-weight:bold; font-size:14px; text-align:left; font-family:arial, Helvetica; } h3 { padding: 5px 0px 10px 3px; font-size:14px; font-weight:bolder; font-family:arial, Helvetica; } H3 a{ text-decoration: none; }

  • IE7とIE8での表示の違いを無くすにはどうしたら良いか、お分かりにな

    IE7とIE8での表示の違いを無くすにはどうしたら良いか、お分かりになる方がいらっしゃれば、お教えくださいませ。 以下の様に、HTMLとCSSを記述したのですが、IE7は思う様に表示しますが、 IE8ですと、ヘッダー部分がやや縦長になってしまいます。 この差を無くすためにはどのように記述したら良いでしょうか? どうぞ宜しくお願い致します。 ※CSSの記述 --------------------------- /* コンテナ */ div#container {width: 760px; margin-left: auto; margin-right: auto; background-color: #ffffff;} /* ヘッダー */ div#header {background-color: #017acd; background-image: url(top001.png); padding: 10px 10px 25px 0px; } div#header h1 {margin-top: 20px; margin-left: 30px; font-size: 17px; text-align: left; font-weight:normal; text-decoration:none; color: #ffffff; font-family: "cataneo BT",normal; word-spacing: 0.05em;} div#header h2 {margin-top: 30px; font-size: 48px; text-align: center; color: #ffffff; font-family: "cataneo BT",normal;} ※HTMLの記述 ----------------------- <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1>Welcome to my pages!</h1> <h2>My HomePage</h2> </div> ~中略~ </div>

専門家に質問してみよう