忍者ブログ

からすまる日誌 css

授業noteからcss部分を抜粋

序章(1) 初期設定

×

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

序章(1) 初期設定

デフォルトのブラウザをクロームにする
(エッジの人はクロームにしましょう)
 
左下のWindowsアイコン
→左の歯車アイコン
→windowsの設定
→アプリ
→既定のアプリ
→下のほうの「Webブラウザ」
→Google Chromeに設定
 

エクスプローラー、second.htmlの上で右クリック
→プログラムから開く
→サクラエディタを選択
 
既定のブラウザ以外で開くときも同様
エクスプローラー、second.htmlの上で右クリック
→プログラムから開く
→Microsoft Edgeを選択


UTF-8(ユーティーエフはち、ユーティーエフエイト)
<meta charset="UTF-8">
 
文字コードをUTF-8にしてねという記述
(マルチバイト文字も使うという宣言)
これを設定しないと
シングルバイトしか正確に表示されず、
文字化けする。

ざっくりいうと、半角英数字記号がシングルバイト。
それ以外がマルチバイト文字
(半角カタカナもマルチバイトになるとか)
 

<html lang="ja">
ラング イコール ジェイエーと読む
日本語ですよという記述
このサイトはどの言語かというのを説明
 
「このサイトを翻訳しますか」と出てきたりするのは、
このラングが英語(EN)だったりしたとき
 

さっきグーグルクロームでは文字化けしないのに
エッジでバグって表示された人がいたのはなぜか
クロームが気を聞かせて「これはUTF-8を入れ忘れたんだな」と考えた
エッジはそういうことをしなかった
 

<h1>見出しです</h1>

一番目の見出しですよというマークアップ
じゃこの終了タグだけを</h2>にしたらどうなるか?
これを確かめる手順:
1.サクラエディタで書き換える
2.ファイルを保存
3.ブラウザを「更新」すれば反映
(サクラエディタがブラウザを立ち上げるというアイコンはないらしい)
 
→実際書き換えてもエラーはでない
→なぜか
ちょっとした間違いであれば
ブラウザが勝手に解釈して表示してくれる
(chrome「間違っていてほんとは</h1>のつもりだろう」)

だから逆にエラーがでないので、
どこが間違っているか自分で突き止めないといけなくなるという、
ちょっとありがた迷惑の側面もあり
 
自分でもHTMLを変えてみて、どう挙動が変わるのかやってみると良い

<!DOCTYPE html>

ここから書いていくものは全部HTMLですよという宣言
ここ以下、タグが使えるようになる

グーグルクロームとエッジでみると字が違ってみえる。
ブラウザのデフォルトで決まっているフォントが違うから。
 
クローム:ゴシック体で表示
エッジ:明朝体で表示
 
CSSのほうで「どのブラウザにしてもゴシックにしてね」ということができる
これ(フォント)は『見た目』の領域なので、CSSで設定する
 

インデント
ソースコードを見やすくするために字下げすること
ブラウザからしたらこれがあろうがなかろうが関係ない
表示は一緒になる
 
タブキーでインデントするひとと、
半角スペースキーでインデントする人がいる
適当な場所で字下げをできて
見やすくできるのもプログラミングの勉強の一部
  

<!DOCTYPE html>
html5の書き方。別のバージョンのHTMLならここの文章がまた変わる
  
これはいわゆる「タグ」ではなく、
ここから先HTMLですよという宣言なので、閉じタグというのはない
 
<meta charset="UTF-8">にも終了タグはない
範囲を指定する必要がないタグはこういうことがある
PR

コメント

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