cssで正方形を出力したい

教材を見ながら勉強しているのですが、教材にはこのように書けば正方形の枠が表示されると書いているのですが赤い縦線しか表示されません。何故だかわからないでしょうか？

css
1#mainCanvas{
2  width:400px;
3  height:400px;
4  border:solid 1px red;
5}

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title></title>
6    <link rel="stylesheet" type="text/css" href="css/main.css">
7</head>
8<body>
9  <canves id="mainCanvas"></canvas>
10   <script type="text/javascript" src="js/main.js"></script>
11</body>
12</html>
13

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

回答2件

ベストアンサー

投稿2020/04/24 08:21

Yorrie

総合スコア354

Yorrie

2020/04/24 08:24

誤植には気をつけよう！！！！！！！！！！

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

自分はHTMLとCSSの初心者なので
参考程度に聞いて頂ければと思うのですが…
##以下のタグはheadタグ内にいれる

HTML
1<script type="text/javascript" src="js/main.js"></script>

canvasタグはjavaScriptで図形を描画するものなので、
javaScriptのコードも表記したほうがよいかもしれません…

以下URL参考にどうぞ！
知っておきたいHTMLのCanvasとは？何ができるのかを解説
##単純に正方形を作りたいのであれば(JavaScriptを使わずに)
canvasタグをdivタグに変更すれば正方形は表示されます！
body内を以下のようにすれば赤い線の正方形は表示されます。

HTML
1<body>
2  <div id="mainCanvas"></div>
3</body>

CSSで作成する場合はこちらを参照！
CSSで正方形の背景を作るサンプル

投稿2020/04/24 09:59

Risney

総合スコア148

Yorrie

2020/04/24 10:27

borderはcanvasにも付与できますね。JSでcanvas内に何か出力はするけど、それはそれとしてただborderをつけたいって感じじゃないでしょうか。あと、scriptタグの記述場所はhead内でもbody内でもどこでもいいです！というか、HTML読み込む前の処理じゃなければbodyの閉じタグの直前に書くのが最近じゃ鉄板かも。 …で、こういうことを伝えずに無言で低評価をつける方がいるのはちょっと不親切かなと思います。誰かは知りませんが。

Risney

2020/04/24 10:36

自分の返答にまで回答ありがとうございます！そうなんですね！scriptは自分が見ていたのものではheadにあったイメージでした！ご親切にありがとうございます。だからちゃんと前置きとして「初心者なので参考に」とつけたのですが、その意味を理解できないならしょうがないですね…

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

あなたの回答