忍者ブログ

からすまる日誌 JavaScript

前提(1) html,css タグやショートカット

×

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

前提(1) html,css タグやショートカット

test1.html
 
<title>タグを入れてみましょう
<title>JavaScript</title>
 

たとえば、<meta>タグには終了タグがない。
 
方法1:開始タグだけにする
方法2:
<meta charset="UTF-8" />
 
と、自分の中に終了を記述する方法がある。
これは、HTML4の後にちょっと流行ったXMLのルールの名残り。
そういう風に記述する人もいる。どちらでもいい。
 

普通の要素は終了タグがある。
メタやイメージや改行タグなどは、例外的に終了がない。
 
<br>
改行タグ。これは終了タグのない代表的なタグ。
<br />と書いてもいい。
 
ソースとして改行してもブラウザでは改行されない。
 

CTRL+Z:
元に戻す。Windows共通のショートカット。
 
CTRL+S:
上書き保存
  
サクラエディタのファイル名が表示されているところが、
test1.html(更新)
となっていたら、保存されていないからちゃんと保存すること。
 
F5:
再読み込み。アイコンを押す人も多いけど、ブラウザが面倒くさがってキャッシュを優先しちゃうことがある(特にChrome)。つまり、変更して保存して再読み込みしたつもりなのに、反映されないことがある。大きなものや複雑なファイルほどそうなりやすい。
 
なので、F5を押す癖をつけるように。
 
あるいは、
CTRL+F5
を連打する。
これでたいていはうまく反映される。
 
それでも反映されなかったら、履歴を消す必要がある時もある。
Chrome
→右上の点3つアイコン
→履歴
→閲覧履歴データの削除
 

テキストエディタでみる:設計図を見ている
ブラウザで見る:完成品、観客席でみている
 
変更を加えた
→保存して
→ブラウザで確認
 
こういう手順でプログラムを組んでいく。
 

<link>要素 これも終了タグのないタグ。
href(エイチ・レフ)と読む
ハイパーリファレンス(hypertext reference)
 
書き加えて保存しましょう。
<link rel="stylesheet" href="style.css">
 

chrome
→何もないところで右クリック
→検証
→Consoleを選択
→エラーが出てますね ERR_FILE_NOT_FOUND
 
なぜか→まだ読み込むCSSファイルを作ってないから。
 

Elements:画面のデザインや配置の調査。
Console:プログラムのデバックをしたりする。そもそもコンソールはJavaScriptの命令のひとつだったりする。
 

Failed to load resource: 
材料を読み込むのに失敗した
 
右側にstyle.css:1
これがないですよと言っている。
 

じゃあそれを作りましょう。
 
サクラエディタ
→新規ファイル
→名前を付けて保存
→test1.htmlがある同じところに
style.css
で保存。(中身はまだ空)
→chromeでF5を押す
→エラーが消えた。
  

CSS:カスケーディング(直列の意味)スタイルシート
デザインを決めるひと(主体)はたくさんあって、
その当事者は3人。

1. スタイルシートを定義するデザイナー
2. 利用者(ユーザー)
 つまり視覚弱者とかが、デザイナーがきれいに整えたサイトでも、うんと大きなフォントサイズやら明度差を大きくした個人用のスタイルシートを適用されたりする。
WEBでは、紙媒体のものとは違って、見る人によって形がちがうのが当たり前!
3. デザイナーもユーザーも指定しなかったもの。それはブラウザがはじめからもってるデフォルトのスタイルが適用される。
 

リキッドレイアウト:
流体的な
画像など、横幅によってサイズが自由自在にデバイスの形によってきまる。
そういう指示はスタイルシート上でできる。
 
レスポンシブレイアウトは、
受け取ってから、デバイスに合わせて変化するイメージ。 
 
PR

コメント

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

ブログ内検索

P R