HTML/CSSの内容がGoogle Doumentに反映されない

前提・実現したいこと

Google Document内で内容を反映したい。

発生している問題・エラーメッセージ

Google ChromeのHTML DocumentでHTML/CSSのコードを書いていますが、内容が上手く反映されていません。
PCはThinkPad X390でバージョンはWindows 10です。

該当のソースコード

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5	<body>
6
7	<div id="container">
8		<div id="div1">1</div>
9		<div id="div2">2</div>
10		<div id="div3">3</div>
11		<div id="div4">4</div>
12		<div id="div5">5</div>
13		<div id="div6">6</div>
14		<div id="div7">7</div>
15		<div id="div9">8</div>
16		<div id="div10">10</div>
17	</div>
18</body>
19
20
21```CSS
22#div1{}
23#div2{}
24#div3{}
25#div4{}
26#div5{}
27#div6{}
28#div7{}
29#div8{}
30#div9{}
31#div10{}
32#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9,#div10{
33	width: 100px;
34	height: 100px;
35	font-size: 400%;
36}
37#container{
38	width: 98%;
39	height: 400px;
40	background-color: papayawhip;
41	display: flex;
42	flex-direction: row-reverse;
43}
44
45### 画像の内容
46
47画像を添付しました。
48自作と見本があります。
49ご確認していただけると助かります。
50
51自分でつくったもの
52![自分で作ったもの](a248e3a0e528c4e2a0bddc79210d9105.jpeg)
53見本
54![見本](983f341912ee3c3f0309aaee1e280228.jpeg)

m.ts10806

2020/08/10 21:17 編集

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 ※CSSがそのまま提示されているため　マークダウンの見出し機能が有効になっており、見づらい状態です。質問投稿画面はPCであれば右側にプレビューが出ているはずなので確認して調整してください。提示HTMLにはどこにもCSSを読み込ませている箇所はないようですが、どういう状態でしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

記載いただいているHTMLの中にCSSの指定がないため、CSSが適用されていないようです。
まずは<head></head>の間にCSSを入れてみてください。

<style>ここにCSS</style>

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <style>
5        #div1{}
6        #div2{}
7        #div3{}
8        #div4{}
9        #div5{}
10        #div6{}
11        #div7{}
12        #div8{}
13        #div9{}
14        #div10{}
15        
16        #div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9,#div10{
17            width: 100px;
18            height: 100px;
19            font-size: 400%;
20        }
21        
22        #container{
23            width: 98%;
24            height: 400px;
25            background-color: papayawhip;
26            display: flex;
27            flex-direction: row-reverse;
28        }
29    </style>
30  </head>
31  <body>
32    <div id="container">
33      <div id="div1">1</div>
34      <div id="div2">2</div>
35      <div id="div3">3</div>
36      <div id="div4">4</div>
37      <div id="div5">5</div>
38      <div id="div6">6</div>
39      <div id="div7">7</div>
40      <div id="div9">8</div>
41      <div id="div10">10</div>
42    </div>
43  </body>
44</html>

投稿2020/08/11 00:17

YuichiSato

総合スコア157

zakimaru

2020/08/11 11:25

ご回答いただき、ありがとうございます！スタイルcssのように分けて書く方法はありますか？ sublime textを使用していて、別のシートに分けて書きたいです。

YuichiSato

2020/08/11 13:52

htmlと同階層にcssファイルをおくのであれば <head> <link rel="stylesheet" href="style.css"> </head> のようにすればファイルを分けて読み込むことができます。（style.cssというファイル名でCSSファイルを作成した場合) https://techacademy.jp/magazine/9647 この辺りのサイトが参考になるかと思います！

zakimaru

2020/08/11 14:10

ありがとうございます！早速見てみます。

行動規範の内容に同意します