【CSS】HTML直書き→外部ファイルにしたい

締切済

質問者：question_xxx
質問日時：2013/08/01 17:42
回答数：6件

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

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

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

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

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

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

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

通報する

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

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.1

回答者： play_with_you
回答日時：2013/08/01 18:17

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

タグ名、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やクラスはいけない」ということは一応覚えておきましょう。
別にブラウザはそんなとこまで判別できないのでちゃんと表示してくれますが、原理主義の人がうるさくなるので知識としては知っていてください。

- 0
- 件

通報する

No.2

回答者： nolen22
回答日時：2013/08/01 18:20

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

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

- 0
- 件

通報する

No.3

回答者： naokita
回答日時：2013/08/01 22:36

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

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

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

セレクタやプロパティを理解しているのなら、
　　１、CSSファイルを作って
　　２、CSS書いて
　　３、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）と云う。

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2013/08/01 23:44

　そのまえに、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">

</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 … )

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

- 0
- 件

通報する

No.5

回答者： play_with_you
回答日時：2013/08/02 10:07

横だけど。

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

- 0
- 件

通報する

No.6

回答者： ORUKA1951
回答日時：2013/08/02 16:47

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">

＿</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><div class="header">～</div><br>⇒<header>～</header></li>
＿＿＿<li><div class="section">～</div><br>⇒<section>～</section></li>
＿＿＿<li><div class="aside">～</div><br>⇒<aside>～</aside></li>
＿＿＿<li><div class="nav">～</div><br>⇒<nav>～</nav></li>
＿＿＿<li><div class="footer">～</div><br>⇒<footer>～</footer></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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>