外出自粛中でも楽しく過ごす!QAまとめ>>

HTMLにCSSを適応する方法としていくつかあると思いますが、
こんな風に↓

<div style="height:90px; width:300px; text-align:center; float:left;">

HTMLソース内に『直書き』してあるものを外部CSSに書き直すには
どうしたらいいですか?

当方、他の外部CSSをちょこっといじって変更したり
HTMLの簡単な更新経験程度の知識しかありません。

タグ名{プロパティ:値}みたいなルールは分かるのですが、
すべてを最初から書くのが初めてで、何から手を付けていいのか
分かりません。

こうしてみたら?とか、私ならこうする、という
アドバイスを頂けると助かります。

お詳しい方、回答よろしくお願いします!

このQ&Aに関連する最新のQ&A

A 回答 (6件)

No.4です。


 実際の例を見るのが最も分かりやすいでしょう。いつも、こういう時に使っている簡単なサンプルをあげておきます。

★タブは_に置換してあるので戻す。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★Another HTML-lint 5( http://www.htmllint.net/ )
 のDATA入力(右上)でチェック済み
★外部に持ちだせば、同じ文書構造のHTMLには一つのスタイルシートだけでHTMLを一切触らずにデザインを変更できます。
 [例]
 ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
 でchrome以外のブラウザで[表示メニュー]→[スタイル)シート)]で、スタイルシートを変えるだけでデザインが変えられることが実感できるでしょう。
★プロパティはすでに御存知ですから、カスケーディングの仕組みを身につければよいです。CSSと言うくらいカスケーディングはCSSの肝です。実はコレを知らずにスタイルシートを使うのは早すぎる・・と言われるくらい。
 その意味でもHTMLのstyle属性での指定はまずいのです。詳細度が[1,0,0,0]になりますから、外部スタイルシートではデザインを変更できません。

【サンプルの見方】
/* ここから、ひとつの宣言ずつ追加してみる。(行頭の/* をひとつずつ消していく */
以降の/* を一行ずつ消していく。
 先に紹介した仕様書と照らし合わせながら・・

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
/* 分かりやすいように着色 */
body{background-color:gray;}
div.header{background-color:yellow;}
div.section{background-color:white;}
div.aside{background-color:lime;}
div.nav{background-color:aqua;}
div.footer{background-color:fuchsia;}

/* ここから、ひとつの宣言ずつ追加してみる。(行頭の/* をひとつずつ消していく */
html,body{
/* margin:0;
/* padding:0;
}
p{
/* margin:0;
/* line-height:1.6em;
/* text-indent:1em;
}
div.header,div.section,div.footer{
/* width:80%;min-width:640px;
/* padding:5px 10px;
/* margin:0 auto;
/* position:relative;
}
div.section div.nav,
div.section div.aside{
/* font-size:0.9em;
/* width:180px;
/* padding:5px;
/* position:absolute;
/* top:0;
/* height:100%;
}
div.section h2,div.section p,div.section ul{
/* margin:0 200px;
}
div.section div.nav{
/* left:0;
}
div.section div.aside{
/* right:0;
}
div.section div.nav p,
div.section div.aside p{
/* margin:0;
}
div.section p:first-letter{
/* font-weight:bold;
/* font-size:1.5em;
}

-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>ここに本文記事を書く</p>
__<p>HTMLには、デザインに関することは書かず文書構造だけ書くようにすると、後々のメンテナンスも楽になります。ほかじゃない、一番助かるのは自分ですね。</p>
__<p>HTML5の場合は、これらのclass名がそのまま要素になります。</p>
__<ul>
___<li>&lt;div class="header"&gt;~&lt;/div&gt;<br>⇒&lt;header&gt;~&lt;/header&gt;</li>
___<li>&lt;div class="section"&gt;~&lt;/div&gt;<br>⇒&lt;section&gt;~&lt;/section&gt;</li>
___<li>&lt;div class="aside"&gt;~&lt;/div&gt;<br>⇒&lt;aside&gt;~&lt;/aside&gt;</li>
___<li>&lt;div class="nav"&gt;~&lt;/div&gt;<br>⇒&lt;nav&gt;~&lt;/nav&gt;</li>
___<li>&lt;div class="footer"&gt;~&lt;/div&gt;<br>⇒&lt;footer&gt;~&lt;/footer&gt;</li>
__</ul>
__<div class="aside">
___<h3>本文とは直接関係しないasideな記事</h3>
___<p>ここには参考サイトなど直接本文と関係ないが、あると良い情報など。</p>
__</div>
__<div class="nav" id="siteMap">
___<h3>ナビゲーション</h3>
___<ol>
____<li><a href="/">Top</a></li>
____<li><a href="/products">Products</a></li>
____<li><a href="/manual">Manual</a></li>
____<li><a href="/profile">Profile</a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2013-08-02 12:00:00 (JST)</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
    • good
    • 0

横だけど。



>HTMLにカスケード(連結)させるので
これは嘘なので真に受けないように。
Cascadeの意味は「滝」だし、「滝が流れ落ちるように効果を上から重ね合わせていける」から「カスケーディングスタイルシート」ですから。
    • good
    • 0

 そのまえに、HTML自体を復習しておくほうが良いでしょう。

すでに、ある程度HTMLを理解されているなら、ここいらで一度復習して抑えておくと良いです。
 そこで、
 ⇒HTML 4.01仕様書(邦訳) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 を「通し」で、読んでおかれると良いです。なぜ、『HTMLソース内に『直書き』してあるものを外部CSSに書き直す』のか?を理解して、目的をもたれたほうが上達が早いです。

 実際に、スタイルシートに関しては
・構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 「広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」
・14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 『著者はひとまとまりの文書には共通のスタイルシートを利用する。 この場合、スタイルルールを文書内部に分配することは、1つの外部スタイルシートにリンクすることよりも実際に効率が低下する。なぜなら外部スタイルシートにリンクした場合、大部分の文書にとっては、ローカルのキャッシュにスタイルシートが既に存在するからである。優れたスタイルシートが公有されることで、この効果は増大するだろう。 』
・14.3 外部スタイルシート( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
『・著者及びWebサイト管理者が、複数文書間(及び複数サイト間)でスタイルシートを共有できる。
 ・著者が、文書に変更を加えることなくスタイルシートを変えられる。
 ・ユーザエージェントが、メディア記述子に基づき、スタイルシートを選択的に読み込める。』

 などが目的です。

 外部に置く方法は、引き続いて
外部スタイルシート
  優先スタイルシートと代替スタイルシート
  外部スタイルシートの指定
カスケードするスタイルシート
  メディア依存のカスケード
  継承とカスケード
に詳しく書かれています。

★とりあえず、簡単な練習として、HTMLの<head></head>内に記述する練習をされると良いでしょう。
 上の説明で言うと
・著者が、文書に変更を加えることなくスタイルシートを変えられる。
・ユーザエージェントが、スタイルシートを選択的に読み込める。
 ますから、
<head></head>内に
<style type="text/css" media="screen">
<!--
h1{ color: red }
p{ color: blue}
-->
</style>
 のように書きます。

h1やpはセレクタ(選択子/識別子)と呼ばれるもので、このセレクタによって、HTML内のどの要素にスタイルを適用するかを指定します。
[例]
div.section p{
font-size:0.9em;
}
は、ブラウザのみ!!classにsectionをもつdiv内のp要素について、10%小さな文字を指定しています。印刷には適用されません。

 一番のポイントは、このセレクタの書き方です。
・REC-CSS2 邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 の
 ⇒5.セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 ⇒6.値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

 このセレクタの書き方を覚えることが「文書構造とプレゼンテーションを切り離す」ポイントになります。

 
    • good
    • 0

参考書を一冊買った方が良いよ。


そのまま各種独自にすすめると痛い目に合うから・・・というか無駄な失敗を繰り返すよ。

CSSには、貴方の方法のstyle属性(インラインCSS)という方法以外に、
link要素
style要素
の3種類の方法があって、貴方のいう外部CSSは、link要素を利用する方法。

セレクタやプロパティを理解しているのなら、
  1、CSSファイルを作って
  2、CSS書いて
  3、linkさせる
これだけ。


その場合、順不同だけど、
htmlファイルのhead内に、外部CSSを参照するlinkを指定する。
<link href="import.css" media="screen" rel="stylesheet" type="text/css">
     ↑↑↑↑↑ 参照パス/ファイル名を指定

で、
メモ帳にでも、そのCSSの記述を書いて、
例、body{ background: yellow;}
その同じ名前(上記例:import.css)で、CSSとして保存

HTMLにカスケード(連結)させるので、カスケーディングスタイルシート(CSS)と云う。
    • good
    • 0

CSSの書き方がわからないのであれば、CSSを解説しているサイトを参考にしてみてはいかがでしょうか?


ちなみに、私が参考にしているサイト→http://www.htmq.com/
CSSの基本や法則を知っておけば、あとはプロパティなどを調べるだけでなんとかなると思います(笑)
他にもたくさんのサイトがあるので、自分に合ったサイトを探してみてください(^^)
    • good
    • 0

インラインから外部ファイルへ移行するのにあたり、「どうしたら」という方法はありません。


タグ名、ID、クラスを利用し、その要素を識別できるような状態にしてからCSSを書くしかありません。

<div style="height:90px; width:300px; text-align:center; float:left;">
これが

●● {
height:90px;
width:300px;
text-align:center;
float:left;
}

となるのは分かりますね?
●●の部分は、この<div>の部分(以下「A」)を識別できるような何かを自分で組みます。
タグ名に限らずIDやクラス、またはその組み合わせを記載します。
どちらにせよ、つまりはあなたのサイト構造がわからないとこれ以上いえません。

とりあえず例として

#wrapper div{}
「A」の外にID="wrapper"が付いたブロックがあり、wrapperの直下の要素は「A」だけである場合。
#contents{}
「A」にID=""contents"を振る場合。
などがあります。

ちなみに、先々のことを考えて、「CSSのためのIDやクラスはいけない」ということは一応覚えておきましょう。
別にブラウザはそんなとこまで判別できないのでちゃんと表示してくれますが、原理主義の人がうるさくなるので知識としては知っていてください。
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qaタグに直接style=""で:hoverをしたいしたい

お世話になります。
下記のaタグのCSS記述部分を直接<a href="" style="..."として記述するには
どのようにすればよいのでしょうか
hoverをaタグ内に直接指定しようとしていろいろ調べたのですが、解説しているサイトを見つけられなくて、質問させてもらってます。
A:link.menu {
text-decoration:none;
FONT-SIZE: 12px;
COLOR: #0000ff;
}
A:visited.menu {
text-decoration:none;
FONT-SIZE: 12px;
COLOR: #0000ff;
}
A:hover.menu {
FONT-SIZE: 12px;
color:#0000ff;
background-color:#66bce2;
}
A:active.menu {
FONT-SIZE: 12px;
COLOR: #0000ff;
}

お手数お掛けしますが、どなた様かご教授いただけますようお願い致します。

Aベストアンサー

<a href="http://www.yahoo.co.jp" style="text-decoration:none;FONT-SIZE:12px;COLOR: #0000ff;"
onmouseover="this.style.backgroundColor='66bce2'"
onmouseout="this.style.backgroundColor=''">やふう</a>

QリダイレクトでPOST

教えてください。

リダイレクトの際、POSTで次のページにデータを渡すことは可能でしょうか?

GETだと
header("Location: "a.php?no=".$no);
と、問題なくできるのですが、
できれば、パラメータを隠したいと思います。

以上ですが、よろしくお願いします。

Aベストアンサー

多分できないです。
それに、結局クライアント側に情報を送信しているのだから、POSTにしたところでパラメータを隠した事にはならないですし。
本当に隠すならサーバ側でセッション情報を引き継ぐような形にしないとダメでしょう。

AJAXのかたちにして、ページ遷移を見えなくするというのが手っ取り早いかも。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qセレクトメニューを選択不可にしつつvalueの値を生かす方法

いつもこのサイトを利用させていただいています。
セレクトメニューの選択不可はdisabledを使えばできることがわかったのですが、それだとvalueの値が保持されませんよね。
選択不可なんだけど、value=""の値を持たせたいのですが、どのようにすればよいでしょうか?
ご教授よろしくお願いします。

Aベストアンサー

disabledされるであろう項目名と同じ項目名について、
HIDDENで定義します。名前は、_h を付けるとか。
初期値では、disabledで無効化して置き、

if (fOBJ["data_kit"][1].checked) {
fOBJ["pc_os"].disabled = false;
fOBJ["pc_os_h"].disabled = true;
}
else {
fOBJ["pc_os"].disabled = true;
fOBJ["pc_os_h"].disabled = false;
}

なんてコードで有効にしてしまう。
なんてアイディアではどうでしょうか?

もちろん。受け側でも、_h 付きに付いてもチェックして頂く必要があるのですけど。

# 試してないので分かりませんが、_h なしでも動く様な気もすこし。。。

Q

現在、CSSでホームページを作っているのですが、IEではうまくセンター表示できるのですが、firefoxなどでは左によってしまいます。

bodyに<div align="center">を記載せずにCSSだけでセンターに表示させることは出来ないものでしょうか?ちなみにIEでセンターによってしまうのはバグだと聞いたことがあるのですが、本当でしょうか?

よろしくお願いします。

Aベストアンサー

まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
今回の件は具体的にどんなんだかわからないので分かりません。

で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

例えば、
<div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされます。

ブロック要素の中のテキストやインライン要素をセンタリングするにはtext-alignを使います。
<div style="width:100px; text-align:center;">まんなかです</div>

それと、注意したいのは、一行目の文頭に<!DOCTYPE~>を書かないとIEは互換モードでレンダリングしだしますので、CSS解釈も(ますます)変になりますのでご注意を。

こんな感じで。

No.1の方のサイト、参考になりますよ。私も昔これ見て勉強しました(笑)。

まぁ、MozillaとIEで表示が違えば大抵IEのバグですが、IEが正解でMozillaが違ってる場合もあります。
今回の件は具体的にどんなんだかわからないので分かりません。

で、基本的なCSSでのセンタリングですが、例えばブロック要素を真ん中に持ってくる場合は、その真ん中に持ってきたいブロック要素自身のマージンでセンタリングします。

例えば、
<div style="width:100px; margin:0 auto 0 auto;">まんなかです</div>
とすると、こいつは親要素に対して左右均等のマージンを取る。つまりセンタリングされ...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qsubmitボタン押下時にPOSTされるデータを追加

<form name="myForm" method="post" action="a.php">
<input type="submit" name="del" value="削除">
</form>

上記の削除ボタンを押した場合、
[del]=>'削除'
というデータがa.phpに渡ると思うのですが、

[del]=>'削除'
[no]=>'1'

というデータが渡るようにしたいと考えています。
諸事情でhiddenを使ったり、テキストボックス等を用意してそこから値を渡したりができません。
JavaScriptでsubmit時にパラメータを追加することはできるでしょうか?

希望としては
<input type="submit" name="del" value="削除" onclick="****">
の形式がベストです。

※コピペではないのでタイポがあるかもしれません。

Aベストアンサー

<html><body>
<form name="myForm" method="post" action="a.php">
<input type="text" name="abc">
<input type="submit" value="del" onClick="add()">
ちなみにdelには'削除'は渡されなひ。
</form>
<script>
function add(){
o=document.createElement('input');
o.name ='no';
o.value=1;
document.myForm.appendChild(o);
o=document.createElement('input');
o.name ='del';
o.value='削除';
document.myForm.appendChild(o);
}
</script>

Q~ の中に