ワンコ大好き(PC版)

cocohp

7年前

サンプル通りに実装してみてください。多少の記述の差異は、問題ありません。主要であるブラウザで問題なくレイアウトが整っていることが到達点です。

● データダウンロード素材一式.zip
[code]
<!–header –>
<!–side –>
<ul>
<li><a href="#chiawawa">チワワ</a></li>
<li><a href="#dax">ダックスフンド</a></li>
<li><a href="#dal">ダルメシアン</a></li>
<li><a href="#papy">パピヨン</a></li>
</ul>
<!–右サイド –>
<p>かわいいワンちゃんに会いに行こう！</p>
<p>Webdogでは、人気のペットの紹介をしています。</p>
<h2>チワワ</h2>
<p>無邪気で遊び好きな反面、怖がりで用心深く繊細な面が同居しているデリケートな犬です。猫っぽい面が強く、常にマイペースで、甘えたい時にはベタベタしてきますが、気がすむと淡泊でそっけない態度をとります。</p>
<p>嫌がるのに無理やり抱き上げると、露骨に迷惑な表情をして、機嫌が悪いと主人にでも噛み付いてくることもあります。</p>
<h2>ダックスフンド</h2>
<p>陽気で活発に動き回る、とても人なつこい犬です。好奇心旺盛でいつも元気に動き回って楽しい遊びを見つけ出す天才です。家族をとても愛し、気持ちを理解しようと細心の注意を払います。観察力の鋭い犬ですから、一緒に暮らして繰り返し経験を積んでいくうちに、どんどん言葉や行動パターンを理解していきます。</p>
<p>体格でスタンダード、ミニチュア、カニヘンに分類されます。１８６０年代にアナグマ狩りのために作り出されたスタンダードがベースで、その後20世紀前半にウサギ狩り用に小型化されたのがミニチュア、そして20世紀後半にそれを更に小型化したカニヘンが誕生しました。</p>
<p><a href="">このページのトップに戻る</a></p>
<h2>ダルメシアン</h2>
<p>好奇心旺盛で、興味を持ったら納得がいくまでとことん追究します。かなり運動が必要なので、散歩の時はとことん付き合ってあげましょう。</p>
<p>活発に動き回る反面、若干神経質な面もあり、ささいな事でもストレスを溜め込んで、攻撃的になることがあります。この犬にとってストレス発散は走り回ることなので、ドッグランなどでノンリードの運動を頻繁にしてあげましょう。</p>
<p><a href="">このページのトップに戻る</a></p>
<h2>パピヨン</h2>
<p>フランス語の蝶（パピヨン）の名の通り、大きくて美しい飾り毛がついた耳は、羽を広げた蝶のように優雅で物静かな印象を与えます。しかし実際は、活発にはしゃぎ回る騒々しいくらい元気な犬です。大変賢く精神的にナイーブで、それが魅力のひとつです。</p>
<p>反面とても向こうっ気が強く、甘やかして育ててしまうと、わがままでやたら攻撃的になることもありますから注意が必要です。 </p>
<p><a href="">このページのトップに戻る</a></p>
<!–footer –>
Copyright (C) 2016 WebDig! All Rights Reserved.
[/code]

補足：同ページ内でリンクする

到達したいセクションの先頭に「id」を付けます。例えば、ダルメシアンのセクションに到達したい場合、「ダルメシアン」のh2見出しに「#dal」を付けます。
[code]<h2 id="dal">ダルメシアン</h2>[/code]と記述します。そうすることで、ダルメシアンのセクション先頭に名前が付いたことになります。命名された#dalへは、「a href=”#dal”」が有効になり、クリックするとダルメシアンのセクションへジャンプする仕組みになります。id名は「#(ハッシュ)」、クラス名は「.(ドット)」なので、覚えておきましょう。

補足：jQuery.smoothScroll

完成サンプルを見ると、ページ内をスルスルーっとスクロールしていきます。この動きを、「スルスルー」とか「ヌルヌルー」などと表現し多くのWebサイトで実用化されています。スマホでも、有効なプラグインですのでこれからWeb制作する際には、必ずと言っていいほど導入するべきプラグインでしょう。jQueryの解説は、別ページで解説したいと思いますので、必要なコードと素材のみ参考にしてください。

jQueryが苦手！わからない！そんなあなたに補足メモ

jQueryプラグインを動かすために必要な要素は基本的に「3つ」です。
(例外もあります※専用のCSSも必要だったりします)

基本プラグイン:クルマで例えると、ガソリンのような役目をします。CDNが便利です。
[code]
<!–たまにバージョンの違いに注意 –>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!–CDNは、Googleからも直配布。どれを使用しても基本問題ない –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
[/code]
本体となるプラグイン:クルマで例えると、車両本体そのものになります。
基本的に無料配布されており、豊富な種類があります。
ファンクション指令:クルマで例えると、アクセルを踏むなどの動かすための命令文
$(function()から始まっていることが多い。

[code]
<!– スムーズスクロール部分の記述 –>
<script>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$(‘a[href^=#]’).click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? ‘html’ : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$(‘body,html’).animate({scrollTop:position}, speed, ‘swing’);
return false;
});
});
</script>
[/code]
【参考サイト】
http://coliss.com/articles/build-websites/operation/javascript/296.html
https://github.com/inc2734/jquery.smoothScroll