iSARAのサイトを模写していますが、iSARAのロゴとタイトルを横並びにしたくてもできません。

お世話になります。

iSARAさんというプログラミングスクールのサイトを模写してますが、iSARAのロゴとpタグで囲った「バンコクのノマドエンジニア講座」というテキストを横並びにできません。「バンコクのノマドエンジニア講座」というテキストをiSARAさんのロゴの右隣にもって来たいのですが、どうすればいいのでしょうか？

html5
1<DOCTYPE! <!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>Page Title</title>
6    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
7    <script src="main.js"></script>
8
9    <head>
10            <div class="header-in">
11                <div class="title">
12                    <div class="logo">
13                        <img src="file:///home/yusuke/Desktop/iSara_mosha/iSARA/isaralogo.png" alt="iSARAのロゴ">
14                    </div>
15                    <div class="subtitle-texts">
16                        <p>バンコクのノマドエンジニア講座</p>
17                    </div>
18                </div>
19    
20            </div>
21        </head>
22</head>
23<body>
24
25    
26</body>
27</html>

CSS3
1body {
2    font-family: "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
3}
4
5
6.header-in {
7    color: #333333
8}
9
10.title {
11    color: #333333;
12    font-size: 14px;
13    margin: 0px 10px;
14    padding: 20px 0px
15}
16
17.logo img {
18    float: left;
19    width: 128px;
20    height: auto;
21}
22
23.subtitle-texts {
24    float: left;
25    font: 12px;
26    font-weight: 600;
27}

dit.

2019/04/04 05:44

どのような経緯でこうなっているのかわからないのですが、もう一度質問に提示のコードを上からしっかり、全部、1つずつ、きちんと確認してください。レイアウト云々の前に直さなければいけないところがたくさんあります。

退会済みユーザー

2019/04/04 05:53

承知しました。アドバイスありがとうございます。初めてのサイト模写なので、わからないところだらけです。

dit.

2019/04/04 06:15

以前の質問を軽く見ましたが、HTMLやCSSの基礎は学習されていることと思います。コピーの仕方を間違ったとか、teratailの不具合でなければ質問に提示されているコード１行目は<DOCTYPE! <!DOCTYPE html>です。他にも<head>が重複していたりとか、<body>内に入れるべきコンテンツが<head>内に入っています。試しに現在のコードをチェックしてみてください。http://www.htmllint.net/html-lint/htmllint.html floatが適切かは置いておいて、現在のコードを正しく書き直すだけでも一応横並びにはなります。

退会済みユーザー

2019/04/04 06:22

ありがとうございます。解決できました、ありがとうございました！

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

回答1件

ベストアンサー

ありがとうございました。解決できました。

以下、正しく書き直したコードです。

html5
1            <div class="header-in">
2                <div class="title">
3                    <div class="logo">
4                        <img src="file:///home/yusuke/Desktop/iSara_mosha/iSARA/isaralogo.png" alt="iSARAのロゴ">
5                    </div>
6                    <div class="subtitle-texts">
7                        <p>バンコクのノマドエンジニア講座</p>
8                    </div>
9                </div>
10            </div>

CSS
1body {
2    font-family: "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
3}
4
5
6.header-in {
7    color: #333333
8}
9
10.title {
11    color: #333333;
12    font-size: 14px;
13    margin: 0px 10px;
14    padding: 20px 0px
15}
16
17.logo img {
18    float: left;
19    width: 128px;
20    height: auto;
21}
22
23.subtitle-texts {
24    float: left;
25    font: 12px;
26    font-weight: 600;
27}
28