今回はファビコン(favicon)の設定方法についてです。

mito

ファビコン(favicon)と言われてもなんだそれ？という感じではないですか？私も”ファビコン”という名称を知らずどうやって検索したら良いのか悩んだ過去があります。

momo

ファビコン(favicon)は、Webサイトをブラウザで開いた際のタブ部分の左に表示されるアイコンのことだよ！

それではいってみましょう〜！

タブに表示される画像（アイコン）とは何か？

chromeで表示した場合は、以下の画像のように表示されます。

momo

小さいけれど存在感がある、サイトのトレードマークだね！

設定されているかいないかでサイトのイメージも変わります。

mito

設定していると、タブだけでサイトを認識(判別)してもらえるのでユーザーにも優しい作りだと思います。

momo

目印になって分かりやすいね！

前提条件の確認

今回は、PCのWebブラウザ(chrome)で表示されるように作成していきます。

mito

今回はこちらのサイトを具体例に作成していきます。

宮ノ杜健康院

画像の作成方法

元画像の作成

illustoratorを使い、作成していきます。（photoshopでもOKです）

https://realfavicongenerator.net/

サイズについては、以下ファビコンジェネレーターで260px×260pxを推奨しているのでそのサイズで作成していきます。

mito

今回はこちらの整体院のロゴマークでファビコンを作成していきます。

最後はpngで書き出します。

設定方法

htmlのheadタグのなかにコードを追加

pngのデータを使うので以下のようなコードをheadタグの中に追加します。

   <link rel="shortcut icon" type="image/png" href="images/fav-logo.png"/>

mito

今回、画像はimagesフォルダに配置しました。

確認方法

まず、ローカル環境できちんと表示されるか確認します。

momo

確認後、サーバーにアップするよ！

まとめ

表示自体はとても小さな画像ですが、設定するしないでサイトの印象が変わります。

mito

表示面積が小さいので目立ちやすい色や太い線を使うことをオススメします！

https://mito-lab.com/twitter-card/

twitterでブログやサイトをシェアする際にURLではなく画像が埋め込まれると思います。

momo

これは「OGP(Open Graph Protcol)」と言われるプロトコルだよ！

mito

URLが共有された際に、1枚のカードのようなものの中に画像やタイトル・説明文が表示されますね。

momo

これはWeb制作者が予めHTMLタグとしてコードの中に埋め込んでいるんだよ。

今回は、ご自身で作ったサイトについてtwitterでOGPを表示させる方法をみていきます。

momo

SNSでシェアする時に使われるもの全般をOGPと呼び、特にtwitterの場合はtwitterカードと呼ばれるよ！

OPG(twitterカード)のメリット

以下3点がメリットとして上げられるかと思います。

mito

私自身もユーザーの立場で、OGPを見た際、パッと記事の内容やブログの内容を見て遷移するかどうか考えている気がします。

momo

流入に関わる問題だから重要だね！

OGP(Twitterカード)とは

このように、1枚のカードのようなものの中に画像やタイトル・説明文が表示されるものです。

OGPの設定方法

mito

では早速HTMLの中にコードを書いていきます。

htmlファイルのheadタグの中にコードを追加

今回は、具体的な例としてこちらのポートフォリオサイトのOGP(twitterカード)を設定していきます。

https://mito-lab.com/portfolio/

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@mito_works" />
<meta property="og:url" content="https://mito-lab.com/portfolio/" />
<meta property="og:type" content="website">
<meta property="og:title" content="mito | Web Designer Portfolio" />
<meta property="og:description" content="Web Designer mito のポートフォリオサイトです。" />
<meta property="og:site_name" content="mito's portofolio" />
<meta property="og:image" content="https://mito-lab.com/portfolio/media/twiiter-card.png" />

サーバーにhtmlファイルをアップする

ローカルでは表示を確認できないので追加後、サーバーにアップします。

デバッグツールで表示内容を確認する

https://cards-dev.twitter.com/validator

momo

このツールにサイトのURLを入力すると、正しくTwitterが読み込めているか確認できるよ！

mito

実際に投稿し、表示を確認できればOKです

念のため、ログも確認し、成功していることを確かめましょう。

まとめ

momo

とても簡単に表示できるようになるのでぜひ設定してみてね！

https://mito-lab.com/favicon-setting/

今回は、ソースコードエディタのVSCode(Visual Studio Code)の便利なショートカットキーをまとめました。

mito

自分がよく使うな〜と思うものを中心にまとめているので随時更新していく予定です。

まずは、VSCodeとはどんなエディタなのか？というところから書くので、どのエディタを使うか悩んでいる方もぜひ参考にしてください。

VSCodeとは

2015年にマイクロソフトからリリースされたエディタです。
Windowsのほかに、Mac OS、Linux上でも動作します。

VSCodeの特徴

シンタックスハイライト

ソースコードの構造を視覚的に区別できるようにする表示機能のことです。
テキストの一部（構文）をわかりやすい色で表示します。

マルチカーソル機能

エディタ上で複数選択し、同時編集ができる機能です。以下を参考にさせていただきました。

マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜

mito

⌘Dで選択か⌘⇧Lで選択して一気に修正できます。

標準でEmmetがついてる

EmmetとはHTML/CSSの超強力な入力補完プラグインです。

mito

このEmmetがすごく便利でコードを書くスピードを上げてくれるということで使いはじめました。

覚えておくと便利なEmmetのショートカットキー紹介

基本的な使い方はこちらがすごく参考になります。

「はじめて」でも簡単！Emmetの使い方とよく使うパターン集

以下には少しスペルが紛らわしく覚える必要があるなと思ったものを書いています。

CSS編

その他チートシートはこちらEmmetのチートシート

VScodeのショートカットキー

【Mac版】 VisualStudioCode キーボードショートカット

こちらから特によく使うものをご紹介します！

コードを書く時に先に書いてあるコードをコピーすることがよくあるのですごくよく使います。

例えばHTMLでdivの中身を先に書いて後からdivで囲む時に便利です。

2列表示の場合の切り替えに便利です。

選択している行が長い場合も上記のショートカットで上下にコードを追加できます。

カーソルで選択しているコードと同じコードをすぐに検索できます。

momo

使いこなせるとコードを書くのが楽しくなるね！

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。
30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

トライしていく中で調べて理解したことや大事だと思ったポイントを中心にまとめます。

DAY15.『BootstrapでビジネスLP制作』

DAY15、DAY16ではこちらのYoutube動画を使ってLPサイトを制作していきます。

• Build A Complete HTML & CSS Website with Bootstrap 4

https://twitter.com/showheyohtaki/status/1087273663152431104?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1087273663152431104&ref_url=https%3A%2F%2Fwww.engineer-step.com%2Fentry%2Fsite-seisaku-15

ボタン制御〜アクティブとホバー時の色指定〜

以下、上側でデフォルトの色指定を変更し、下側でアクティブの時、ホバー時の色を同時に指定しています。

.navbar-dark .navbar-nav .nav-link{
  color: white;
  padding-top: .8rem;
}

.navbar-dark .navbar-nav .nav-link.active, 
.navbar-dark .navbar-nav .nav-link:hover{
  color: #1ebba3;
}

Navbarの色指定などは以下に載っています。

border-widthでボタンの太さを指定

左側が何も指定しなかった場合、右側がborder-width: medium;を指定した場合です。

.btn-lg{
  border-width: medium;
  border-radius: 0;
  padding: .6rem 1.3rem;
  font-size: 1.1rem;
}

Font Awesome5のアイコンの拡大・縮小と場所指定

ここで使われているアイコンは、Font Awesome5のものです。
Font Awesome5を使うには独自の仕様があります。

<div class="row text-center">
		<div class="col-md-4">
			<div class="feature">
				<i class="fas fa-play-circle fa-4x" data-fa-transform="shrink-3 up-5"></i>
				<h3>CUSTOM ANIMATION</h3>
				<p>Animate.css and Waypoints.js allow for smooth animations scrolling down the site.</p>
			</div>
		</div>

		<div class="col-md-4">
			<div class="feature">
				<i class="fas fa-sliders-h fa-4x" data-fa-transform="shrink-4.5 up-4.5"></i>
				<h3>CONTENT SLIDER</h3>
				<p>Owl.Carousel.js makes navigating content sliders seamless with it's content carousel navigation.</p>
			</div>
		</div>
		
		<div class="col-md-4">
			<div class="feature">
				<i class="fab fa-wpforms fa-4x" data-fa-transform="shrink-4 up-5"></i>
				<h3>CONTACT FORM</h3>
				<p>The Bootstrap HTML form will send directly to your email address using PHPMailer.php.</p>
			</div>
		</div>
	</div><!-- End row -->

今回はshrinkを使い元の大きさから縮小。upを使い配置を上へ移動させています。

containerを使わず共通divで囲む

containerクラスを使わず、メインビジュアル以下全てoffsetというclassで囲んでいます。

そして、offsetには以下のような指定をしています。

.offset:before{
  display: block;
  content: "";
  height: 4rem;
  margin-top: -4rem;
}

こうすることで、コンテンツの区切りごとに高さ4remの空白ができます。

momo

rem指定なので、レスポンシブ対応不要で便利だね。

列を水平方向に中央ぞろえ

<div id="contact" class="offset">
<footer>
	<div class="row justify-content-center">
		<div class="col-md-5 text-center">
			<img src="img/nuno.png" alt="">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis optio earum fugit harum consequuntur, nulla voluptatem totam numquam quod alias?</p>
			<strong>Contact Info</strong>
			<p>(888) 888-888<br> ito@gmail.com</p>
			<a href="" target="_blank"><i class="fab fa-facebook-square"></i></a>
			<a href="" target="_blank"><i class="fab fa-twitter-square"></i></a>
			<a href="" target="_blank"><i class="fab fa-instagram"></i></a>
		</div>

		<hr class="socket">
		&copy; Nuno Theme;
	</div>
</footer>
</div>

その他、便利だと思ったTips

英文を全て大文字に変えたい時の指定

cssに以下のように書くと英文（ローマ字）を全て大文字に変更してくれます。

text-transform: uppercase; 

はみ出た要素の左右の表示方法を指定する

body要素のcssに以下のように記述すると、内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない、という意味になります。

overflow-x: hidden;

コーディング効率化のために</div>にコメントをつける

divの終わり</div>に例えば以下のようにコメントをつけていました。

<div class="Features">
<div class="Jumbotorn">
<div class="narrow">

</div><!--  End narrow  -->
</div><!--   End Jumbotorn  -->
</div><!-- End Features Section -->

mito

中身のコードが長くなると閉じタグを見失いがちになるのでこの記述があるとエラーチェックのスピードが上がるなと思いました。

positionの理解

いつも、relativeだっけ？absoluteだっけ？とこんがらがっていたのでとても参考になりました。

なくそう！positionわけわからん！の壁！

html,css初心者泣かせ（自分も泣いた）のpositionについて図解しました。#30DAYSトライアル pic.twitter.com/LG1pzOxU7N

— ちづみ (@098ra0209) January 22, 2019

まとめ

コーディングが終わった後に、手書きで要素をパーツ分けするとさらに構造の理解が深まりました。オススメの方法です！

#30DAYSトライアル
DAY15,DAY16

コードを書いている最中は「なんか複雑＞＜！！」って思っていたけど、
最後に手書きで構造を書き出してみたらかなり理解が深まった気がします！ pic.twitter.com/hbuFLSUhCl

— mito@ひよっこwebデザイナー (@mito_works) August 30, 2019



今回は、サイトにお問い合わせフォームを設置する簡単な方法をまとめます。
お店やサービスサイトを作る際にお問い合わせフォームが必要なもの、多いと思います。

初めてお問い合わせフォームを設置したことを振り返るとそれほど難しくない、むしろ簡単だったのですが、初学者ならではの躓きポイントがありました。

mito

私が実際につまずいたところを中心にまとめます。

使用したお問い合わせフォーム

今回は、Perlで書かれたアンケートフォームや応募フォームとして無料で利用できるメールフォーム（エントリーフォーム）のCGIを使いました。

momo

レスポンシブ対応もされているよ！

設定1 : ダウンロード

コード一式、このページのダウンロードボタンよりダウンロードします。

設定2 : 設置したい場所にフィルダを作成し、ファイルをアップロードする

設置マニュアルに沿って設定していきます。

まずは、設置したい場所にフォルダを作成。
mailformというフォルダの配下に以下3つのフォルダとフォルダの中身を配置しました。

• iplogs
• mailformpro
• mfp.statics

設定3 : パーミッション（ファイル属性を設置する）

パーミッションとは？
ファイルごとに定義された、読み出し・書込みなどのアクセスに対する許可情報。
通常は、ファイルシステム内のファイルごとに、特定のユーザーやグループに対してアクセス権を設定しています。これによって、ユーザーごとのファイルシステムの見え方に影響を与え、ファイルシステムに対する変更を制限することができるものです。

mito

セキュリティの面から重要な設定なんですね。

momo

レンタルサーバーごとに異なるけれど、レンタルサーバーのコントロールパネルから設定するよ！

インフォパネルのご契約一覧を表示

ファイル管理を押し、ファイル一覧を表示します。

パーミッションの設定

マニュアルP27の以下を参照しながらパーミッションを設定します。

例えばmailformproのフォルダにパーミッション755をつける場合は以下です。

mailformproのファイル名右のチェックボックスにチェックを入れる

ファイル操作のパーミッション変更ボタンを押す

パーミッションを755へ変更し、パーミッション変更ボタンを押す

サーバによってはパーミッションの反映に半日以上かかることもあるので気長に待ちましょう！

設定4 : example.htmlにアクセス

正常に動作していますという旨のメッセージが出ればOKです。

設定5 : config.cgiの編集

必要な内容に合わせて編集します。

設定の注意点

基本的に説明書に忠実に進めると間違い無いのですが、途中エラーも出ないけれど動かなくて困ったのは以下の2つが原因でした。

mito

特にthanks.htmlは反応が遅く変更の反映に半日かかりました。

皆さんもぜひ設定してみてください！

今回は、PCとスマホでHTMLの内容を切り替える方法について書きます。

momo

簡単にいうと、HTMLはサイトの枠組み、CSSは装飾を制御しているよ。今回は枠組みそのものを変えたいということだね。

mito

そうです！PCでは改行させたいけれど、スマホではさせたくないなどです。

はじめに

レスポンシブ対応で、レイアウトを変えざるを得ない時、以下の2つの方法で解決しました。

PCで改行、スマホでは改行させない方法

HTMLでの記載

<p>こんにちは。<br class="br-sp">みなさま・・・
</p>

CSSでの記載

@media screen and (max-width: 640px) {
.br-sp { 
 display:none;
 }
}

mito

brタグにクラスを付与して制御すればいいだけだから簡単！

momo

ただbrタグはそこで必ず改行されてしまうので、左右、中央寄せ表示などレイアウトに変更が入る可能性がある場合はあまり多用しない方がいいよ。

mito

確かに、右寄せにして<br>を入れていたんだけど、中央寄せに変更になりレイアウトが崩れて修正に一手間かかりました。(できるのであれば)text-alignで指定してあげる方がシンプルです。

PCとスマホで表示内容を変える方法

テーブルデータにおいて、PCでは時間を縦表示にし、スマホでは横表示にするということをしました。

PC版

SP版

HTMLの記載

<table class="program_table">
 <tr>
  <th class="aisatsu_pc_area">12:30<br>|<br>12:35</th>
  <th class="aisatsu_phone_area">12:30~12:35</th>
  <td class="aisatsu2 pad5">開会のご挨拶</td>
 </tr>
</table>

mito

PC表示用、SP表示用の両方を記載し、CSSの制御で出し分けます。

CSSの記載

PCでの表示

th.aisatsu_pc_area{
	background-color: #fdebd3;
}
th.aisatsu_phone_area{
	display:none;
	background-color: #fdebd3;
	text-align: center;
	vertical-align: middle;
}

スマホでの表示

@media screen and (max-width:640px){
th.aisatsu_phone_area{
	display:block;
}
th.aisatsu_pc_area{
	display: none;
}
}

ーEndー

今回は、jQueryとCSSだけでハンバーガーメニューを作りたいと思います。

HTMLでの記載

<header>
 <div id=“navToggle”>
  <div>
   <span></span> <span></span> <span></span>
  </div>
 </div>

 <nav id=“menu”>
  <ul>
   <li><a href=“#”>HOME</a></li>
   <li><a href=“#taitle-gaiyou”>開催概要</a></li>
   <li><a href=“#taitle-program”>プログラム</a></li>
   <li><a href=“#taitle-contact”>お問合わせ</a></li>
  </ul>
 </nav>
</header>

CSSでの記載

ハンバーガーメニュー表示の制御です。

#navToggle {
 display:none;
 position:absolute; /*bodyに対しての絶対位置指定*/
 right:13px;
 top:13px;
 width:30px;
 height:25px;
 cursor:pointer;
 padding: 12px 0;
}
#navToggle div {
 position:relative;
}
#navToggle span {
 display:block;
 position:absolute; /*#navToggle div に対して*/
 width:100%;
 border-bottom:solid 3px #fff;
 -webkit-transition: .35s ease-in-out;
 -moz-transition: .35s ease-in-out;
 transition: .35s ease-in-out;
}
#navToggle span:nth-child(1) {
 top:0;
}
#navToggle span:nth-child(2) {
 top:11px;
}
#navToggle span:nth-child(3) {
top:22px;
}
header nav {
 position: absolute;
 right:0;
 top: -800px;
 background-color: #fff;
 width:50%;
 padding:0 10px;
 -webkit-transition:.5s ease-in-out;
 -moz-transition:.5s ease-in-out;
 transition:.5s ease-in-out;
 text-align:left;
}

以下のようなハンバーガーメニューを作りました。

momo

header navのところで、top -800pxとしているので、このままでは実際には見えない状態だよ。

jQueryでの記載

mito

jQueryではハンバーガーメニューの三本線をクリック時に×に変形させたいので、指定した要素にアクションと連動させて名前を付けたり消したりする処理を書いています。

.toggleClassメソッド

指定した要素に指定したクラス名を付けたり消したりできる。
clickファンクションで使うと、クリックするたびにクラス名を付けたり消したりできる。

   $('#navToggle').click(function(){
           $('header').toggleClass('openNav');
   });

momo

今回はクリックに連動させて、headerに .openNav を付加・削除しているよ！

再びCSSの記載（メディアクエリの設定）

画面横幅が768px以下の場合の設置を記載します。

1. ハンバーガーメニューのメニュー内容の表示制御
2. クリック時に横棒を45度傾け×にする処理
3. ハンバーガーメニューが表示されるようにする
4. ハンバーガーメニューのメニュー内容が表示されるようにする

header ul {
	margin:0;
}
header ul li {
    display:block;
 	margin-left:3px;
    border-bottom:dotted 1px #2c9caf;
    line-height:3;
}
header ul li a {
	display:block;
	color:inherit;
	padding-left: 3px;
}
header ul li::after {
	content:'';
}
header ul li:last-child {
	border-bottom:none;
}
/*レスポンシブのメニューのお申し込みのみ背景色をかえる*/
header nav .nav-buy{
	background-color: #cc2e4c;
	margin-top: 4px;
	color: #fff;
}
#navToggle {
	display: block;
}
.openNav #navToggle span:nth-child(1) {
    top: 11px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
	top: 11px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}

/*header menu*/
.openNav nav {
    -moz-transform: translateY(876px);
    -webkit-transform: translateY(876px);
    transform: translateY(876px);
}

ハンバーガーメニューが表示され、クリックするとメニュー内容が表示されます。

こちらを参考にさせていただきました。

ーEndー

今回は、モーダルウィンドウの作り方と、モーダルウィンドウ表示時に親画面がページ上部に戻ってしまうときの対処法について書きます。

全体的な動き

以下の3ステップを実装していきます。

1. リンクもしくはボタンを押す
2. モーダルウィンドウが表示される
3. 閉じるもしくは×を押すと閉じる

HTMLでの記載

モーダルウィンドウを作る。

<div class="modal-wrapper" id="map-modal">
<!-- モーダル全体の枠　-->
　<div class="modal">
<!-- 右上に配置する×ボタン　-->
　　<div class="close-modal">
　　　<i class="fa fa-2x fa-times"></i>
   </div>
　　<div class="modal-main">
　　　<div class="picture">
　　　　<img src="images/map.jpg">
　　　</div>
　　　<div>
　　　　<p class="map-detail">詳しい地図の内容を記載する</p>
　　　</div>
　　</div>
<!-- 閉じるボタン　-->
　　<div class="closebutton">
　　　<button class="close">閉じる</button>
　　</div>
　</div>
</div>

モーダルウィンドウへの遷移元を作る。

<div>													 
 <p class="mapinfo" href="">												 
   <a class="mapinfo-show1">詳しい地図はこちら</a>												 
 </p>
</div>

CSSでの記載

モーダルウィンドウの装飾部分を記載する。

.modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}
.modal {
  position: absolute;
  top: 20%;
  left: 24%;
  background-color: #e6ecf0;
  padding: 20px 20px 20px;
  border-radius: 10px;
  width: 650px;
  height: auto;
}
.fa-times {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(128, 128, 128, 0.46);
  cursor: pointer;
}

.closebutton{
	text-align:center;
	margin-top:10px;
}

.close {
  display: inline-block;
  padding: 10px 140px;
  background-color: #0091a7;
  border: none;
  border-radius: 3px;
  color: white;
  margin: 10px auto;
  cursor: pointer;
}

JavaScriptでの記載

モーダルウィンドウを開くときの制御を作る。

モーダルウィンドウを開いたときの親画面の位置を記憶しておく。

//グローバル変数
var sX_syncerModal = 0 ;
var sY_syncerModal = 0 ;

function scrollposition(){
	//スクロール位置を記録する
	var dElm = document.documentElement , dBody = document.body;
	sX_syncerModal = dElm.scrollLeft || dBody.scrollLeft;	//現在位置のX座標
	sY_syncerModal = dElm.scrollTop || dBody.scrollTop;	//現在位置のY座標
}

momo

この記載をして、位置をずらさないように制御しないと、モーダルウィンドウを閉じる時に親画面のトップに戻ってしまうよ。

モーダルウィンドウを表示するためにクリックされた時の制御を作る

$(function() {
 	// モーダル表示を行うclickイベント
 	$('.mapinfo-show1').click(function(){ 
 		scrollposition();
		$('#map-modal').fadeIn();
	});
});

モーダルウィンドウを閉じる時の制御を作る

//「Close」ボタンクリックした際に閉じる処理
$('.close').on('click', function() {
 //スクロール位置を戻す
 window.scrollTo( sX_syncerModal , sY_syncerModal );
 $('#map-modal').fadeOut();
});

//×ボタンをクリックした際に閉じる処理
$('.close-modal').click(function(){ 
　window.scrollTo( sX_syncerModal , sY_syncerModal );
　$('#map-modal').fadeOut();
});

mito

これでモーダルウィンドウを閉じると親画面の元の位置に戻ります。

まとめ

mito

href=””を残していて、モーダルウィンドウへ遷移した際にページ上部に戻ってしまい、悩みました。

momo

hrefを消してしまうと、デフォルト設定のカーソルや下線などはなくなるのでCSSで設定する必要があるよ。

a.mapinfo-show1{
　color: #0091a7;	
　text-decoration: underline;	
　cursor: pointer;
}

ーEndー

今回は、メニューヘッダーを固定して、メニューのリンクからページ内の他の場所へ移動するにはどう実装するか？書きます。

mito

position:fixedを使ってヘッダーを固定した場合、ページ内リンクの位置がヘッダーの高さ分ずれてしまったので、JavaScriptを使ってズレを調整しました。

momo

JavaScriptで実装するとリンク先への移動にアニメーションをつけることが可能になるよ！

HTMLでの記載

<!--ヘッダー部分 -->
<header>
 <div class="header">
  <a href="#taitle-program" >プログラム</a>
 </div>
</header>

<!--ページの途中のタイトル部分 -->
<div class="program">
 <h3 class="title-about" id="taitle-program">プログラム</h3>
</div>

<a>タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできる。

1. リンクの飛び先にidを指定
2. <a>タグのhref属性に”#id名”

momo

<a>タグをクリックすると、そのidの要素が表示されている場所まで移動するという動きになるよ！

CSSでの記載

ヘッダーの高さは90pxで固定しています。

header {
  height: 90px;
  width: 100%;
  background-color: rgba(0, 145, 167, 0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

JavaScriptで調整する

//ナビゲーションからのページ内移動
//固定したヘッダ分だけ下げて表示
$('header a').click(function(){
　headerHight = 90;
　var id = $(this).attr('href');
　var position = $(id).offset().top;
　$('html, body').animate({'scrollTop': position-headerHight }, 500);
});

scrollTopメソッド

$(‘html, body’).scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができる。

momo

scrollTopは通常$(‘html, body’)に対して用いるので、セットで覚えておくとよいよ！

animateメソッド

CSSの値だけでなく、scrollTopなどの値も変更できる。
$(‘html, body’).animate({‘scrollTop’: 0}, 時間); のように指定する。

momo

変更するプロパティ、値、アニメーションの速さの順で、animateの引数を書くよ！

offsetメソッド

要素の表示位置を取得することができます。offsetメソッドは、ページの上端からの距離とページの左端からの距離が連想配列の形で返ってくる。
offset().topとすると、ページの上端からの距離が取得できる。

HTMLで記載しているh1のプログラムの位置が知りたい場合
$(‘h1’).offset();とすると　{top:50,left:100}という連想配列が返ってくる。$(‘h1’).offset.top();とすると、ページ上端からの距離のみなので50という値が返ってくる。

attrメソッド

href属性の値を取得し、offsetメソッドでその要素の位置を取得することでページ内リンクを実装できる。

var id = $(this).attr('href');
var position = $(id).offset().top;

1. idにクイックしたボタンの飛び先を取得
2. 飛び先の最上部からの距離を取得

今回はヘッダーの高さ分引き算をしています。