1/14学んだこと。
リストの作り方
<ul>
<li>リストの項目1つ目</li>
<li>リストの項目2つ目</li>
<li>リストの項目3つ目</li>
<li>リストの項目4つ目</li>
<li>リストの項目5つ目</li>
</ul>
順番付きリスト
<ol>
<li>リストの項目1つ目</li>
<li>リストの項目2つ目</li>
<li>リストの項目3つ目</li>
<li>リストの項目4つ目</li>
<li>リストの項目5つ目</li>
</ol>
1/13学んだこと
パスを指定する方法
相対パス=目的のファイルなどの場所にあるかを指定する方法の事。
ファイル名とフォルダー名「/」と「..」を組み合わせて指定する。
<a href="ファイル名.html">テキストや画像</a>
<a href="../ファイル名.html">テキストや画像</a>
<a href="フォルダ名/ファイル名.html">テキストや画像</a>
<img src="ファイル名.jpg">
<img src="../ファイル名.jpg">
<img src="フォルダ名/ファイル名.jpg">
絶対パスによるリンク先の設定
絶対パス=「http://」または「https://」から始まるURLを記述する方法の事
<a href="http://×××××.html">テキストや画像</a>
<img src="http://×××××/ファイル名.jpg">
ページ内の特定箇所へのリンク設定
書式【目印】
<h2 id=id名″>テキスト<h2>
書式【特定箇所】
<a href="#id名">テキスト<h2>
<a href="ファイルまでのパス#id">テキストや画像</a>
12/11学んだこと
リンクの設定方法
a要素の書き方
→<a href=″リンク先のパスやファイル名・URL″>テキストや画像</a>
メールアドレスや電話番号へのリンクの書き方
<a href=″mailto:info@sample.com″>テキストや画像</a>
<a href=″tel:0301234567″>テキストや画像</a>
12/9 学んだこと。
画像の表示方法
画像を挿入する「img要素」
▶︎<img src=画像の場所・ファイル名″ alt=″画像の説明>
*<h1>見出しの文言</h1>
→imgは<img>のみで表示が可能。
画像ファイルを指定する「src属性」
→表示する画像が保存されている場所とファイル名を指定する。
画像をテキストで表す「alt属性」
→画像の代わりになる言葉や説明を指定する。
画像のサイズを指定するwidth属性・height属性
width属性→画像の横幅を指定
height属性→画像の高さを指定
12/3 学んだこと。
webサイトを構成するファイル管理
管理することで、のちの修正や仕様変更にも柔軟に対応できる。
半角英数字を使用する
▶︎全てのファイル名に半角英数字を利用する。
▶︎ページを表示出来なかったり、ファイル破損のおそれがあるため、ファイル名やファイルをまとめて格納したフォルダーにも半角英数字を使う。
*ハイフンとアンダースコアも利用可能
*ファイルは、種類事に格納必須
サイトマップを作成し、webページのファイル名を決める。
ディレクトリをページ名にする。
▶︎ページ量が多い場合は、こっち。
HTMLファイルをページにする。
▶︎ページ量が少なかったり、ランディングページのような1ページにコンテンツが集約されたものはこっち。
*ランディングページ=1種類の商品やサービスを売る為の内容が凝縮された1枚の長いwebページ。
- HTMLファイルとして扱うには、ファイル名に「.html」と拡張子が必須。
- webページは、文書構造の集合体で全ての情報は、必ず何かしらのタグが付いている。
12/2 学んだこと。
headの中に入る要素
日本語の場合 →UTF-8、Shift_JIS、EUC-JP
【特別な理由がない限りはUTF-8を採用されている】
- 書式=<meta charset=″UTF-8″>
かつては、Shift_JISが主流だった。
▶︎編集する際は、文字コードには注意!!
*文字コードの不一致で文字化けが起こる?
meta要素で指定した文字コードとファイルを保存する際の文字コードが一致しない場合、文字化けが起こる。
▶︎UTF-8を指定した場合は、コードもUTF-8にすること。
ページの概要を表すテキスト情報。
- ページ概要の指定方法
→<meta name=″description″ conten=ページの概要を表すテキスト情報″>
Internet Explorer(IE)を最適化する記述
- IE最適化の書き方
→<meta http-equiv=″X-UA-Compatible″ content=″IE=edge″>
スマートフォンに対応させる記述
- マルチデバイス対応の記述方法
→<meta name=″viewport″ content=″width=device-width, initial-scale=1″>
SNSと連携させる記述
- OGPの記述
<meta property=″og:url″ content=″ページのURL″>
<meta property=″og:title″content=″ページのタイトル″>
<meta property=″og:description″content=″ページの要約文>
<meta property=″og:image″content=サムネイル画像のURL″″>
title要素でページのタイトル指定する
- title要素の書き方
<title>ページのタイトル</title>
link要素で外部ファイルを参照する
- 外部のCSSファイルの参照の書き方
<link rel=″styleseet″ href=″ファイルの場所・ファイル名″>
style要素でCSSを直接設定する
- style要素の書き方
<style>
p{ color:#ff000;}
</style>
- script要素の書き方
<script>
jQuery(document).ready(function(){});
</script>
- 外部JavaScriptファイル参照の書き方
<script src=″ファイルの場所・ファイル名″></script>