忍者ブログ

からすまる日誌 css

授業noteからcss部分を抜粋

序章(2) サクラエディタ

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

序章(2) サクラエディタ

サクラエディタで新規ファイルを作成
 
ファイル→新規作成
またはショートカット(CTRL+N)

ファイルを新規作成したら最初に保存する
ファイル→
名前を付けて保存(CTRL+Shift+Sでもいい)
(フロッピーディスクアイコンのクリックでもいい)
 
デスクトップ上に新しくフォルダを作ってそこに入れていく
名前を付けて保存
→デスクトップ
→新しいフォルダアイコンクリック
→名前は「20191023」
→そこに保存
「index.html」
しっかり拡張子までかく
→保存ボタンをクリック
 

1行目に入力
<!DOCTYPE html>
ドキュメントタイプの設定
HTMLのバージョンを指定している
小文字で書いても別に構わないが普通大文字で書くらしい

2行目からhtmlのタグを書いていく
 
<html>タグで全体を囲う
 
<html>
</html>
<html>に付け足す。
 
<html lang="ja">
日本語のサイトですよという宣言
htmlの後は半角あける
タグ名(要素名):html
属性:lang
langというのが「属性」になる
属性の後に、イコールでつなげてダブルコーテーションで入っているのが「値」
(ここでいうja)
 
<要素名(半角スペース)属性="値">

これが基本の記述の形
属性の前には半角スペースが入り、値は""で囲む

<head>タグ
開始と終了が存在する
<head>
</head>

<body>タグ
同上
通常小文字で書く

<meta charset="UTF-8">
UTFは大文字でも小文字でもどっちでもいい
大文字で書かれることもよくある
 
<title>ページタイトル</title>
タイトルタグ
 
基本的にタイトルタグは表示されない
ブラウザで見たときにタグ部分に表示される
また、検索結果ではページタイトルが表示される
 
head内には、最低限このmetaタグとtitleタグを入れる

index.htmlというのは特別なファイル
一番最初に開かれる
たとえば〇〇ドットコムとかいうページを開くとき、
なんの指定もなかったらindex.htmlが勝手に開く

ではこのindex.htmlを、自己紹介のページにしていきましょう
 
<title>だれそれの自己紹介</title>
<body>
 だれそれ
 趣味
 趣味1
 趣味2
</body>
 

ブラウザで見ると横に並んじゃってる
HTMLにとっては改行は改行じゃない
ソースコードで改行しても、
ブラウザ上では改行されない(半角スペースになる
 
なので、見出しのマークアップをしましょう
 
<body>
 <h1>だれそれ</h1>
 <h2>趣味</h2>
 趣味1
 趣味2
</body>
 

箇条書きにしたいときは、
1.<ul>タグで囲う
2.こいつは項目ですよということで、項目別に<li>で囲う
<body>
 <h1>だれそれ</h1>
 <h2>趣味</h2>
 <ul>
  <li>趣味1</li>
  <li>趣味2</li>
 </ul>
</body>
<ul>タグの中には、必ず子要素の
<li>タグが入るというのがお約束になっている
 
ul(Unordered List)
番号がないリスト。箇条書きリスト
 
li(list item)
ol(Ordered List)というのもあって、これは番号があるリスト
 

じゃ箇条書きの中(<ul>のなか)に
<h2>とかを入れてもいいのか?
→だめです。
<ul>の子供は<li>だけというルールがある
ブラウザで一応表示はされるけどよくない
 
そういうルールを破ると点数が下がる
グーグルで検索結果を出す順番は、お金を出して広告だとかいろいろあるけど、
「減点方式」であり、htmlのルールが守られていないと検索結果順が下がる
 
PR

コメント

ただいまコメントを受けつけておりません。