1/15学んだこと

見出しリスト

<dl> 

      <dt>見出しの項目</dt>

      <dd>内容の項目</dd>

</dl>

 

リストのナビゲーション

<nav>

         <ul>

                <li><a href>内容</a></li>

        </ul>

</nav>

パンくずリスト=見ているところが分かるようにする

 

<ol>~</ol>で囲み、<a>で囲まないようにする。

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-8Shift_JISEUC-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>

<script src=″ファイルの場所・ファイル名″></script>