Webデザイン後編/練習問題(上)ワンコ大好き(PC版)サンプル通りに実装してみてください。多少の記述の差異は、問題ありません。主要であるブラウザで問題なくレイアウトが整っていることが到達点です。–><p>かわいいワンちゃんに会いに行こう!</p><p>Webdogでは、人気のペットの紹介をしています。</p><h2>チワワ</h2><p>無邪気で遊び好きな反面、怖がりで用心深く繊細な面が同居しているデリケートな犬です。猫っぽい面が強く、常にマイペースで、甘えたい時にはベタベタしてきますが、気がすむと淡泊でそっけない態度をとります。</p><p>嫌がるのに無理やり抱き上げると、露骨に迷惑な表情をして、機嫌が悪いと主人にでも噛み付いてくることもあります。</p><h2>ダックスフンド</h2><p>陽気で活発に動き回る、とても人なつこい犬です。好奇心旺盛でいつも元気に動き回って楽しい遊びを見つけ出す天才です。家族をとても愛し、気持ちを理解しようと細心の注意を払います。観察力の鋭い犬ですから、一緒に暮らして繰り返し経験を積んでいくうちに、どんどん言葉や行動パターンを理解していきます。</p><p>体格でスタンダード、ミニチュア、カニヘンに分類されます。1860年代にアナグマ狩りのために作り出されたスタンダードがベースで、その後20世紀前半にウサギ狩り用に小型化されたのがミニチュア、そして20世紀後半にそれを更に小型化したカニヘンが誕生しました。href="">このページのトップに戻る</a></p><h2>ダルメシアン</h2><p>好奇心旺盛で、興味を持ったら納得がいくまでとことん追究します。運動が必要なので、散歩の時はとことん付き合ってあげましょう。</p><p>活発に動き回る反面、若干神経質な面もあり、ささいな事でもストレスを溜め込んで、攻撃的になることがあります。この犬にとってストレス発散は走り回ることなので、ドッグランなどでノンリードの運動を頻繁にしてあげましょう。href="">このページのトップに戻る</a></p><h2>パピヨン</h2><p>フランス語の蝶(パピヨン)の名の通り、大きくて美しい飾り毛がついた耳は、羽を広げた蝶のように優雅で物静かな印象を与えます。実際は、活発にはしゃぎ回る騒々しいくらい元気な犬です。賢く精神的にナイーブで、それが魅力のひとつです。</p><p>反面とても向こうっ気が強く、甘やかして育ててしまうと、わがままでやたら攻撃的になることもありますから注意が必要です。Reserved.[/code]補足:同ページ内でリンクする到達したいセクションの先頭に「id」を付けます。ダルメシアンのセクションに到達したい場合、「ダルメシアン」のh2見出しに「#dal」を付けます。id="dal">ダルメシアン</h2>[/code]と記述します。することで、ダルメシアンのセクション先頭に名前が付いたことになります。href=”#dal”」が有効になり、クリックするとダルメシアンのセクションへジャンプする仕組みになります。id名は「#(ハッシュ)」、クラス名は「.(ドット)」なので、覚えておきましょう。補足:jQuery.smoothScroll完成サンプルを見ると、ページ内をスルスルーっとスクロールしていきます。この動きを、「スルスルー」とか「ヌルヌルー」などと表現し多くのWebサイトで実用化されています。スマホでも、有効なプラグインですのでこれからWeb制作する際には、必ずと言っていいほど導入するべきプラグインでしょう。jQueryの解説は、別ページで解説したいと思いますので、必要なコードと素材のみ参考にしてください。jQueryが苦手!わからない!そんなあなたに補足メモjQueryプラグインを動かすために必要な要素は基本的に「3つ」です。(例外もあります※専用のCSSも必要だったりします)基本プラグイン:クルマで例えると、ガソリンのような役目をします。src="http://code.jquery.com/jquery-1.11.3.min.js"></script><!–CDNは、Googleからも直配布。src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>[/code]本体となるプラグイン:クルマで例えると、車両本体そのものになります。基本的に無料配布されており、豊富な種類があります。ファンクション指令:クルマで例えると、アクセルを踏むなどの動かすための命令文$(function()から始まっていることが多い。false;});});</script>[/code]【参考サイト】http://coliss.com/articles/build-websites/operation/javascript/296.htmlhttps://github.com/inc2734/jquery.smoothScroll練習する基礎練習問題htmlWebデザインウェブサンプルレッスン初級練習スマホでもご覧いただけます。「WEBデザイナーの教科書」は、どなたでも、自由に閲覧使用していただけるように、公開しています。WEBに携わる方・教育の現場などお気軽にお使いください。個人情報について座右の銘お問い合わせ。