htmlのコードについて

htmlプログラミング言語の書き方について質問です。画像の紙に書いてある形として完成させたいです。書き足すコードを教えてください。

まずは、htmlという言語のコードについてです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>takumiprofile</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="sset.js">
</head>

<body>
</body>
</html>

phper.k

2022/03/21 14:10

過去の質問放置しすぎじゃありません？回答してくれている人たちに、失礼だろ

退会済みユーザー

2022/03/21 16:29

phper.k 黙ってください。事情があるんです

m.ts10806

2022/03/22 00:48

指摘されてることに全く耳を貸さず、自分の要求だけしておいて「黙れ」とまで言う人にアドバイスしたい人はいないですよね。

退会済みユーザー

2022/03/22 02:37

消えてください邪魔

退会済みユーザー

2022/03/22 02:43

m.ts10806

2022/03/22 02:51

ただの自己主張です。通報したところで規約もルールも話も無視する人が取り合ってもらえるはずがない。

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:55

退会済みユーザー

2022/03/22 02:56

退会済みユーザー

2022/03/22 02:56

退会済みユーザー

2022/03/22 02:56

episteme

2022/03/22 02:56

なんだこの退会済みユーザーは。質問主じゃないなら誰だ?

退会済みユーザー

2022/03/22 02:56

そうやってレッテル持って勝手に悪者扱いするけどさ、あなたも人のこといえない指摘されてることを聞き、改善したが、誰も認めることはなかったおかしいと思う。あなたが消えたら？そんな聖人みたいな人いないのにみんな、自分さえ良ければいいんだから結局は自分が可愛いんだよ違うよと否定しても、信じてもらえない。だからおかしいと思った。自分の意見を押し付ける人は嫌いだ。だって、その意見を押し付けることで満足しているあなｔあも人のこといえない僕の話を信じてくれる人が好き僕の気持ちを理解しようとしてくれる人が好きだできれば僕の言葉を今後も信じて欲しい味方でいてほしいでも、そんな聖人いるわけがないよねあなたはただ揚げ足とりしかできないあなたの言葉なんて僕は信じない。嘘つきの言葉なんか聞きたくないあなたが消えればいいどうしてあなたみたいな人がいるのか分からない運営は僕を信じない。なんで僕ばかり悪く言われるの僕は根っからの悪人？そんな悪いことをした覚えはない僕は1利用者でしかないが、僕にも質問する権利があるその当然の権利を奪う人は運営に通報します。次やったら運営に通報します。そうやってレッテル持って勝手に悪者扱いするけどさ、あなたも人のこといえない指摘されてることを聞き、改善したが、誰も認めることはなかったおかしいと思う。あなたが消えたら？そんな聖人みたいな人いないのにみんな、自分さえ良ければいいんだから結局は自分が可愛いんだよ違うよと否定しても、信じてもらえない。だからおかしいと思った。自分の意見を押し付ける人は嫌いだ。だって、その意見を押し付けることで満足しているあなｔあも人のこといえない僕の話を信じてくれる人が好き僕の気持ちを理解しようとしてくれる人が好きだできれば僕の言葉を今後も信じて欲しい味方でいてほしいでも、そんな聖人いるわけがないよねあなたはただ揚げ足とりしかできないあなたの言葉なんて僕は信じない。嘘つきの言葉なんか聞きたくないあなたが消えればいいどうしてあなたみたいな人がいるのか分からない運営は僕を信じない。なんで僕ばかり悪く言われるの僕は根っからの悪人？そんな悪いことをした覚えはない僕は1利用者でしかないが、僕にも質問する権利があるその当然の権利を奪う人は運営に通報します。次やったら運営に通報します。そうやってレッテル持って勝手に悪者扱いするけどさ、あなたも人のこといえない指摘されてることを聞き、改善したが、誰も認めることはなかったおかしいと思う。あなたが消えたら？そんな聖人みたいな人いないのにみんな、自分さえ良ければいいんだから結局は自分が可愛いんだよ違うよと否定しても、信じてもらえない。だからおかしいと思った。自分の意見を押し付ける人は嫌いだ。だって、その意見を押し付けることで満足しているあなｔあも人のこといえない僕の話を信じてくれる人が好き僕の気持ちを理解しようとしてくれる人が好きだできれば僕の言葉を今後も信じて欲しい味方でいてほしいでも、そんな聖人いるわけがないよねあなたはただ揚げ足とりしかできないあなたの言葉なんて僕は信じない。嘘つきの言葉なんか聞きたくないあなたが消えればいいどうしてあなたみたいな人がいるのか分からない運営は僕を信じない。なんで僕ばかり悪く言われるの僕は根っからの悪人？そんな悪いことをした覚えはない僕は1利用者でしかないが、僕にも質問する権利があるその当然の権利を奪う人は運営に通報します。次やったら運営に通報します。そうやってレッテル持って勝手に悪者扱いするけどさ、あなたも人のこといえない指摘されてることを聞き、改善したが、誰も認めることはなかったおかしいと思う。あなたが消えたら？そんな聖人みたいな人いないのにみんな、自分さえ良ければいいんだから結局は自分が可愛いんだよ違うよと否定しても、信じてもらえない。だからおかしいと思った。自分の意見を押し付ける人は嫌いだ。だって、その意見を押し付けることで満足しているあなｔあも人のこといえない僕の話を信じてくれる人が好き僕の気持ちを理解しようとしてくれる人が好きだできれば僕の言葉を今後も信じて欲しい味方でいてほしいでも、そんな聖人いるわけがないよねあなたはただ揚げ足とりしかできないあなたの言葉なんて僕は信じない。嘘つきの言葉なんか聞きたくないあなたが消えればいいどうしてあなたみたいな人がいるのか分からない運営は僕を信じない。なんで僕ばかり悪く言われるの僕は根っからの悪人？そんな悪いことをした覚えはない僕は1利用者でしかないが、僕にも質問する権利があるその当然の権利を奪う人は運営に通報します。次やったら運営に通報します。

退会済みユーザー

2022/03/22 02:56

tokipon

2022/03/26 04:34

よくこんな打てましたね。めっちゃありますよ。

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

回答2件

ベストアンサー

html
1
2<!DOCTYPE html>
3<html>
4<head>
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1">
7	<title>takumiprofile</title>
8	<link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11    <!--右側の画像用ボックス-->
12    <div id="right_box">
13        <img src="https://raw.githubusercontent.com/sugoruru/site-material/main/favicon/Pg-v.png" width="300" height="300">
14    </div>
15    <!--左側のテキスト用ボックス-->
16    <div id="left_box">
17        <!--プロフィール見出し-->
18        <h1>Profile</h1>
19        <!--大きさ５の線-->
20        <hr size="5" style="background-color: black;">
21        <!--p要素で文章の作成・br要素で改行-->
22        <p>名前<br>出身<br>現住所<br>学歴</p>
23        <!--スキル見出し-->
24        <h1>Skill</h1>
25        <!--大きさ５の線-->
26        <hr size="5" style="background-color: black;">
27        <!--ここからスキルボックス-->
28        <div id="Skill_box">HTML</div>
29        <div id="Skill_box">CSS</div>
30        <div id="Skill_box">JS</div>
31        <div id="Skill_box">Python</div>
32        <div id="Skill_box">Word</div>
33        <div id="Skill_box">Excel</div>
34        <div id="Skill_box_small">Power<br>Point</div>
35        <!--Myサイト見出し-->
36        <h1>MySite</h1>
37        <!--大きさ５の線-->
38        <hr size="5" style="background-color: black;">
39        <!--ボタン(aタグの中のhrefにURLを入れてください)-->
40        <a target="_back" href="https://www.facebook.com/"><input type="button" value="Facebook"></a>
41        <a target="_back" href="https://www.instagram.com/"><input type="button" value="Instagram"></a>
42    </div>
43</body>
44</html>

css
1/*
2cssはいろいろとごちゃごちゃしているので
3好きにコピペして使ってください。
4*/
5#right_box{
6    display: inline-block;
7    position: fixed;
8    width:50%;
9    height: 100%;
10    margin:0;
11    padding: 0;
12    background-color:white;
13}
14#left_box{
15    display: inline-block;
16    position:fixed;
17    left: 50%;
18    top:0%;
19    width:50%;
20    height: 100%;
21    margin:0;
22    padding: 0;
23    background-color:white;
24}
25html{
26    height: 100%;
27    margin: 0;
28    padding: 0;
29}
30body{
31    margin: 0;
32    padding: 0;
33    height: 100%;
34}
35img{
36    display:block;
37    margin-left: auto;
38    margin-right: auto;
39    position:absolute;
40    top:50%;
41    left:50%;
42    transform: translate(-50%,-50%);
43}
44#Skill_box{
45    border-radius: 10px;
46    padding:5px;
47    font-size:20px;
48    display:inline-block;
49    background-color:#cccccc;
50}
51#Skill_box_small{
52    border-radius: 10px;
53    padding:3px;
54    font-size:12px;
55    position:relative;
56    top:5px;
57    display:inline-block;
58    background-color:#cccccc;
59}
60input{
61    border-radius: 30px;
62    background-color:white;
63    font-size:50px;
64}

追記の話

この、<link rel="stylesheet">というのはcssを読み込むだけのタグです。
もしjavascriptを読み込むのなら、

投稿2022/03/22 06:18

sgru_

総合スコア133

Strawberry-milk

2022/03/22 06:54

ありがとうございます。こういう完成したコードをいただく場合に、早く正確なコードをもらうためにはどのような手段を使うことがオススメされているのでしょうか？ちなみに分からなくなったコードのことについて数点の質問を致します。 `````````````` <div id="right_box"> <hr size="5" style="background-color: black;"> `````````````` idとはどんな形で使うものでしょうか？ <hr>とは、どんな形で使うのでしょうか？あと、すみません、sgru_さんのslackのボードをどれか私も参加できそうにありますか？あの、まだ初心者で分からない事が多過ぎてslackにてどなたかを頼りたいです。

sgru_

2022/03/22 07:34

idについて idはＣＳＳやJavaScriptのセレクターに使用するものです例えば、id=aのテキスト色を赤にするこのような場合に使用します cssを見てもらったら、はじめに「#」がついています。これが、idを指定するものです。そのほかにも、javascriptでcssを制御したりもできます。 hrについて hrはhtmlのタグで、平行線を引くために使われます。 sizeで大きさを指定できて、 cssのbackground-colorで黒色の背景色にセットしています。 Skill_boxについて <div id="Skill_box">テキスト</div>とかくと灰色のタグのようなボックスをつくることができます。 CSSのオブジェクトを調べてもらったほうがわかりやすいかもです。 slackについて windowsのVScodeを使用していて、あまりほかの人とは共同開発をしていません。今回はパスということでほかの人とで頑張ってください。

Strawberry-milk

2022/03/22 08:04

ご回答ありがとうございます。現状のhtmlはこのような形です。 ````````````````````` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>takumiprofile</title> <link rel="stylesheet" href="css/style.css"> </head> <body>  <div id="right_box"> <img src="Profilepicture.jpg" width="300" height="300"> </div>  <div id="left_box">  <h1>Profile</h1>  <hr size="5" style="background-color: black;">  <p>名前<br>出身<br>現住所<br>学歴</p>  <h1>Skill</h1>  <hr size="5" style="background-color: black;">  <div id="Skill_box">HTML</div> <div id="Skill_box">CSS</div> <div id="Skill_box">JS</div> <div id="Skill_box">Python</div> <div id="Skill_box">Word</div> <div id="Skill_box">Excel</div> <div id="Skill_box_small">Power<br>Point</div>  <h1>MySite</h1>  <hr size="5" style="background-color: black;">  <a target="_back" href="https://www.facebook.com/"><input type="button" value="Facebook"></a> <a target="_back" href="https://www.instagram.com/"><input type="button" value="Instagram"></a> </div> </body> </html> ```````````````````````` また、cssは ```````````````````````` style.css html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; padding: 0; } body { font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; } li { list-style: none; } .pic { background-color: rgba; float: left; height: 100vh; width: 100%; /*min-width: 500px;*/ background-size: cover; background: no-repeat top center; display: flex; } img Profilepicture.jpg { width:auto; 　 height:auto; max-width: 150px; 　 max-height: 400px; vertical-align: top; margin-top: 100px; } #right_box{ display: inline-block; position: fixed; width:50%; height: 100%; margin:0; padding: 0; background-color: white; } #left_box{ display: inline-block; position: fixed; left: 50%; top: 0%; width: 50%; height: 100%; margin: 0; padding: 0; background-color: white; } html{ height: 100%; margin: 0; padding: 0; } body{ margin: 0; padding: 0; height: 100%; } img{ display:block; margin-left: auto; margin-right: auto; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } #Skill_box{ border-radius: 10px; padding: 5px; font-size: 20px; display: inline-block; background-color: #cccccc; } #Skill_box_small{ border-radius: 10px; padding: 3px; font-size: 12px; position: relative; top: 5px; display: inline-block; background-color: #cccccc; } input{ border-radius: 30px; background-color: white; font-size: 50px; } ``````````````````````` このような状況です。 cssは ```````````````````````` style.css html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; padding: 0; } body { font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; } li { list-style: none; } .pic { background-color: rgba; float: left; height: 100vh; width: 100%; /*min-width: 500px;*/ background-size: cover; background: no-repeat top center; display: flex; } img Profilepicture.jpg { width:auto; 　 height:auto; max-width: 150px; 　 max-height: 400px; vertical-align: top; margin-top: 100px; } #right_box{ display: inline-block; position: fixed; width:50%; height: 100%; margin:0; padding: 0; background-color: white; } #left_box{ display: inline-block; position: fixed; left: 50%; top: 0%; width: 50%; height: 100%; margin: 0; padding: 0; background-color: white; } html{ height: 100%; margin: 0; padding: 0; } body{ margin: 0; padding: 0; height: 100%; } img{ display:block; margin-left: auto; margin-right: auto; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } #Skill_box{ border-radius: 10px; padding: 5px; font-size: 20px; display: inline-block; background-color: #cccccc; } #Skill_box_small{ border-radius: 10px; padding: 3px; font-size: 12px; position: relative; top: 5px; display: inline-block; background-color: #cccccc; } input{ border-radius: 30px; background-color: white; font-size: 50px; } ````````````````````` この状況です。画像の設計通りの形、位置、大きさにしたいです、どうしたら良いでしょうか？ Facebookとinstagramのボタンには私のアカウントを設置しようかと思います。

sgru_

2022/03/22 08:10

インデントについてまず、インデントは調整したほうがいいと思います。 HTMLのbody内のタグはタブキー等で半角４マス開けなどしたほうがいいと思います。画像位置について cssのimgのtop:〇・left:〇の値を変えていただけれたらと思います大きさについて HTMLのimgタグの中のwidth・heightの値を変えていただいたらと思います。形についてどのような形にしたいかを具体的に言っていただけたらと思います。

Strawberry-milk

2022/03/22 16:02

idについて idはＣＳＳやJavaScriptのセレクターに使用するものです例えば、id=aのテキスト色を赤にする👉このことについて質問します。classとはどのように違うのでしょうか？ Skill_boxについて <div id="Skill_box">テキスト</div>とかくと灰色のタグのようなボックスをつくることができます。👉<div id="skill_box">テキスト</div>と書くと自然と灰色のタグのようなボックスが出来上がるのでしょうか？ idは#を使うためにあると聞きました。『#』はどのような場合に使うのでしょうか？

Strawberry-milk

2022/03/22 16:38

・一番初めに画像として提示した設計通りにしたいです。・左枠にある画像においては履歴書に貼る写真くらいのサイズの画像として貼りたいです。

sgru_

2022/03/22 22:13

idとclassについて classはなんどでも要素につけることができます idは1回しかつけることができませんなにかのボックスを1つしかつくらないのなら id、テキストの装飾など何度も使う場合は classにしたらいいと思います id=skill_boxについてあっているのですが大文字と小文字の区別があるので Skill_boxです大きさについておおきさはwidthとheightを色々といじってください画像についてサイズはHTMLのimgタグの大きさ設定を変えてください

Strawberry-milk

2022/03/23 07:22

はい、分かりました。ありがとうございます。

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

DEMOをつくってみましたのでこちらをどうぞ(小６クォリティーですが...)
https://sugoruru.github.io/HTML1/
---追記---
あともう一つ、HTMLのみで作れますので、JavaScriptは使用しません
そしてJavaScriptの使用方法は

HTML
1<script src="jsまでのパス"></script>

です！

投稿2022/03/22 01:47

sgru_

総合スコア133

Lhankor_Mhy

2022/03/22 03:32

低評価した方、参考までに理由を教えていただけますか？

sgru_

2022/03/22 04:17

質問主さんは一回も出てきてませんね

Strawberry-milk

2022/03/22 06:06

ありがとうございます。sgruさんが書いたhtmlとcssのコードをコピペしたいです。載せていただくことは可能でしょうか？あと、 `````````````` <script src="jsまでのパス"></script> `````````````` このコードですが、どういうことでしょうか？ JavaScriptも追加で書き出す場合に書くコードということでしょうか？

Strawberry-milk

2022/03/22 07:00

```````````````` <div id="Skill_box">HTML</div> <div id="Skill_box">CSS</div> ```````````````` ここにある『skill_box』とはどんな場合に使うものでしょうか？

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

あなたの回答