シングルページサイト - 実践
シングルページサイトをつくる
- メインビジュアルをヒーローヘッダーでbxsliderを使用
- VIDEO部分にmp4データを設置
- NEWS部分をjQuery / ajaxを使用して外部データを読み込む
- MENU部分にjQuery / モーダルウィンドウを設置
- ACCESS部分にGoogleMapを設置
- INFO部分にGoogleAPIを使用してお問い合わせフォームを設置
- SP表示の時にスムーススクロールでトップに戻るボタンを設置
実践
例
解答
ポイント
bxsliderを設置して、ヒーローヘッダーにカスタマイズ
＜HTML＞
- head内にbxsliderのCSS（CDN）を記述します。
- bxsliderのCSSの下に、カスタマイズ用のstyle.cssを記述します。
- /bodyの手前にjQueryとbxsliderの.js（CDN）を記述します。
- CDN＝Content Delivery Network：ネットワーク経由でコンテンツを提供できるサービス
- bxsliderの.jsの下に、その他まとめ用のscript.jsを記述します。
- imgを囲う要素divにclass="bxslider"を記述します。
- 直接囲う要素は、liのときはulの場合もあります。
〜 <head> 〜 <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> 〜 </head> <body> 〜 <div class="key-visual bxslider"> <p><img src="img/slide01.jpg" alt=""></p> <p><img src="img/slide02.jpg" alt=""></p> <p><img src="img/slide03.jpg" alt=""></p> <p><img src="img/slide04.jpg" alt=""></p> <p><img src="img/slide05.jpg" alt=""></p> </div> 〜 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script> <script src="js/script.js"></script> </body> 〜
＜style.css＞
- ヒーローヘッダーとして使用するためのカスタマイズを記述します。
- ブラウザの「要素の検証」を使用して、クラス名や要素の変更をします。
/* bxslider */ .bxslider img { object-fit: cover;/* 画像の縦横比を維持。縦横のうち小さい方を基準にして自動的に拡大・縮小。ボックスからはみ出した部分はトリミングされる */ object-position: center center; width: 100vw; height: 100vh; } .bx-wrapper { border: none;/* スライダーの枠線を消す */ margin-bottom: 0;/* 余白を消す */ }
＜script.js＞
$(function(){ //bxslider $('.bxslider').bxSlider({ auto: true, pager: false,//スライダー下の点を消す }); });
mp4がiPhoneで再生できない対処
＜HTML＞
<div class="box" id="video"> <h2>VIDEO</h2> <div class="video-inner"> <!--<video src="img/Restaurant-1192_rs.mp4" autoplay muted loop></video> iPhoneで再生できない--> <video autoplay loop muted poster="img/Restaurant-1192_rs.jpg" playsinline><source src="img/Restaurant-1192_rs.mp4"></video> </div> </div><!-- /#video -->
jQuery / ajax
- Ajax＝Asynchronous JavaScript ＋XML
- 非同期通信。JavaScriptとXMLを使用して非同期（リロードせず）にサーバとの間の通信を行うことができます。
- ただし、ドメインが異なる場合はできません。
＜HTML＞
- head内に、カスタマイズ用のstyle.cssを記述します。
- /bodyの手前にjQueryの.js（CDN）を記述します。
- jQueryの.jsの下に、その他まとめ用のscript.jsを記述します。
〜 <head> 〜 <link rel="stylesheet" href="css/style.css"> 〜 </head> <body> 〜 <div class="box" id="news"> <h2>NEWS</h2> <dl class="news-list" id="list-box"> </dl> </div><!-- /#NEWS --> 〜 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="js/script.js"></script> </body> 〜
＜style.css＞
/* news */ .news-list { max-width: 800px; margin: 0 auto 30px; display: flex; flex-wrap: wrap; } dt { width: 30%; margin-bottom: 20px; border-bottom: 1px solid var(--main-color); display: none; } dd { width: 70%; margin-bottom: 20px; border-bottom: 1px solid var(--main-color); padding-bottom: 10px; display: none; } dt:nth-of-type(-n+4) { display: block; } dd:nth-of-type(-n+4) { display: block; } 〜 @media screen and (max-width: 767px) { 〜 /* news */ .news-list { margin: 2%; } 〜 }
＜script.js＞
$(function(){ //news //$.ajaxを使用した非同期通信 $.ajax({ url: 'news.txt', dataType: 'text', success: function(data){ $('#list-box').html(data); }, error: function(data){ alert('error'); } }); });
jQuery / モーダルウィンドウをcolorboxで設置
- リンク先のView Demos確認し、1〜5のなかで自分の使用したいものを決めます。▶︎今回は2を使用します。
- Downloadをクリックしてファイルをダウンロードします。
- colorbox-master.zipを解凍し、フォルダexample2（View Demosの番号に対応）からcolorbox.cssとフォルダimagesをコピペします。
＜HTML＞
- head内にcolorboxのCSS（ダウンロード）を記述します。
- colorboxのCSSの下に、カスタマイズ用のstyle.cssを記述します。
- /bodyの手前にjQueryとcolorboxの.js（CDN）を記述します。
- colorboxの.jsの下に、その他まとめ用のscript.jsを記述します。
- aにclass="colorbox"を記述します。
- ポップアップしたときにタイトル文字を表示させたい場合は、title=" "に記述します。
〜 <head> 〜 <link rel="stylesheet" href="css/colorbox.css" /> <link rel="stylesheet" href="css/style.css"> 〜 </head> <body> 〜 <div class="box" id="menu"> <h2>MENU</h2> <div class="menu-inner"> <p><a class="colorbox" href="img/menu01.jpg" title="Side Dish ▷ マッシュルームサラダ"><img src="img/menu01.jpg" alt=""><br>Side Dish</a></p> <p><a class="colorbox" href="img/menu02.jpg" title="Main Dish ▷ 魚のムニエル"><img src="img/menu02.jpg" alt=""><br>Main Dish</a></p> <p><a class="colorbox" href="img/menu03.jpg" title="Beverage"><img src="img/menu03.jpg" alt=""><br>Beverage</a></p> </div> </div><!-- /#menu --> 〜 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"></script> <script src="js/script.js"></script> </body> 〜
＜style.css＞
- colorboxが提供するスタイル1〜5の中で、選んだ2にはタイトルがなかったので、表示させるようにカスタマイズを加えます。
- ブラウザの「要素の検証」を使用して、クラス名や要素の変更をします。
/* colorbox */ #cboxCurrent { top: -14px; right: 74px; text-indent: 0; color: #666; font-size: .8rem; } 〜 @media screen and (max-width: 767px) { 〜 /* colorbox */ #cboxCurrent { font-size: 1.2rem; } #cboxTitle { top: -30px; } 〜 }
＜script.js＞
$(function(){ //colorbox $('.colorbox').colorbox({ rel: 'colorbox',//グループ化 maxWidth: "90%",//レスポンシブ化 maxHeight: "90%"//レスポンシブ化 }); });
＜参考サイト＞
yachin29.hatenablog.com
www.webcreatorbox.com
yachin29.hatenablog.com
deep-space.blue
gashubq.com
tech.jastin.net
webdesignmagazine.net
yachin29.hatenablog.comblog.hubspot.jp
aprico-media.com
はてなブログの新着記事を外部サイトページに表示
ブログの新着記事を外部サイトページに表示
コーポレートサイトなどのトップページで、ニュースの新着記事の日付・見出しを表示しているサイトありますよね。前から気になっていたので、調べてみました。
- ブログが更新されると自動で新着記事が更新されます。
準備
プログラミング
- index.phpを新規作成し、以下を記述します。
- ほぼ参考サイト様のコードです。
＜index.php＞
<?php require_once "./Feed.php" ; //rss-phpライブラリを読み込みます $feed = new Feed ; $url = "https://hak00810.hatenadiary.org/rss"; //RSSのURLを入力する $rss = $feed->loadRss( $url ) ; $num = 5;//表示させたい件数 $i=0; $desW = 30;//詳細の文字数を制限します。制限しないときは0にします。 if ( $desW != 0){ $desW = ($desW*2)+2; } foreach( $rss->item as $item ) { if($i>=$num){ } else{ $title = $item->title ; // タイトル $link = $item->link ; // リンク $timestamp = strtotime( $item->pubDate ) ; // 更新日時 $description = $item->description ; // 詳細 $description = str_replace("▼続きを読む","",$description); //↑ 続きを読むなど、決まった文章が詳細にはいっている場合に、それを除外する $description = strip_tags($description); if ( $desW != 0){ $description = mb_strimwidth($description, 0, $desW, "…",'utf-8'); } // $thumbnail = trim($now_url,"/") . "./img/noimage.png";//画像がない場合の指定 if( preg_match_all('/<img([\s\S]+?)>/is', $item->description, $matches) ){ foreach( $matches[0] as $img ){ if ($img === reset($matches[0])) {//最初の画像にマッチしたもの if( preg_match('/src=[\'"](.+?jpe?g)[\'"]/', $img, $m) ){ $thumbnail = $m[1]; } } } } ?> <head> <meta charset="UTF-8"> <title>News feed-php</title> <style> div,dl,dt,dd,p { margin: 0; padding: 0; line-height: 1.4; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } img { border: none; vertical-align: bottom;/*画像を文字のディセンダにあわせる*/ } #news { width: 600px; margin: 0 auto; } dl { overflow: hidden; } dt { float: left; padding: 0 10px 0 0; } .image { width: 200px; height: 140px; overflow: hidden; } .image>img { width: 200px; } .text { margin-bottom: 20px; } </style> </head> <body> <div id="news"> <dl> <dt><?php echo date( "Y.m.d", $timestamp); ?></dt> <dd><a href="<?php echo $link; ?>" target="_blank"><?php echo $title; ?></a></dd> </dl> <p class="image"><img src="<?php print $thumbnail; ?>" alt="<?php print $item->title; ?>"></p> <p class="text"><?php echo $description; ?></p> </div> </body> <?php $i++; } } ?>
ポイント
" "内に表示したいRSSのURLを入力します。
$url = "https://hak00810.hatenadiary.org/rss"; //RSSのURLを入力する
->の右の要素名をRSS/XMLのタグと一致させます。
$title = $item->title ; // タイトル $link = $item->link ; // リンク $timestamp = strtotime( $item->pubDate ) ; // 更新日時 $description = $item->description ; // 詳細
＜RSS/XML＞
https://hak00810.hatenadiary.org/rss
<item> <title>WordPressでサイト100選をつくる</title> <link>https://hak00810.hatenadiary.org/entry/2020/06/23/005146</link> <description><p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hak00810/20200623/20200623005056.jpg" alt="f:id:hak00810:20200623005056j:plain" title="f:id:hak00810:20200623005056j:plain" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>前回の記事「<a href="https://hak00810.hatenadiary.org/entry/2020/06/22/022655">MAMPを使用してWordPressのローカル環境をつくる</a>」を利用してサイト100選をつくりました。</li> </ul><p><a href="http://hak00810.wp.xdomain.jp/" class="btn">デモページ</a><br /> </p> （以下略）
補足
- トップページに新着記事一覧として設置する場合は、画像とディスクリプションの部分を削除します。
- インラインでのstyleの記述は、簡易的な見映えのためにしています。実際はそのサイトスタイルに依存するので削除します。
- ▼続きを読むは、はてなブログにないので削除しても良いのですが、他に消したいものが出てくるかもしれないので残しています。
- https://hak00810.hatenadiary.org/feed と Atomでデータを読み込む方法は、linkが上手くいかないので断念しました。
＜参考サイト＞
WordPressでサイト100選をつくる
- 前回の記事「MAMPを使用してWordPressのローカル環境をつくる」を利用してサイト100選をつくりました。
テンプレートをカスタマイズ
プラグインを追加
Akismet Anti-Spam（スパムの保護） EWWW Image Optimizer（画像の縮小） Favicon Rotator（ファビコンの設置） All-in-One WP Migration（データ移行ツール）
サイトをアップする（デプロイ）
- ローカルサーバーにあるWordPressと、アップするサーバーのWordPressそれぞれにプラグイン「All-in-One WP Migration」を追加します。※サーバーはWordPress対応のもの
- 手順は以下の通りに行いました。
- 最大アップロードファイルサイズが50MBを超える場合は、以下の手順が必要です。「4）プラグインを使用する」のみで上限を引き上げられました。
＜参考サイト＞
odnax.hatenablog.com
odnax.hatenablog.com
yachin29.hatenablog.com
MAMPを使用してWordPressのローカル環境をつくる
WordPressは全体の非公開機能がないため、サーバーにアップした瞬間から公開された状態になります。そのため開発段階では、ローカルサーバー環境を作り、制作やテストを行います。
WordPressをインストール
- 下記の公式サイトからWordPressダウンロード
WordPressの基礎知識
- WordPressとは、ブログソフト＝CMS（コンテンツマネジメントシステム）で、HTMLやCSSなどのプログラミングの専門知識がなくてもWebサイトの管理ができます。無料、機能性、自由度の高さから人気があります。
MAMPをインストール
- 下記の公式サイトからMAMPをダウンロード
MAMPの設定を変更
- アプリケーション内のMAMP（灰色サークルに白い象のアイコン）実行ファイルをダブルクリックして開きます。
- MAMP PRO（青色サークルに白い象のアイコン）は使用しません。
- メニュー ＞ MAMP ＞ Preferences ＞ Ports ＞ Set Web & MySQL ports 80 & 3306をクリック ＞ OKをクリック
MAMPを日本時間に変更
- /Applications/MAMP/bin/php/php7.4.2/conf/php.iniを念のためバックアップをとってからDreamweaverで開きます。
- 「timezone」で検索し、[Date]の「default_timezone」を"Europe/Berlin"から"Asia/Tokyo"に変更（上書き保存）
MAMPのデーターベースを設定
- /Applications/MAMP/htdocs内にダウンロードしたWordPressを解凍して「WordPress」から「wp」に名前を変更したフォルダを作成します。（フォルダ名は任意）
- MAMPのStart Serversクリック
- ブラウザで「Welcome to MAMP」が開く＞TOOLS＞PHPMYADMINクリック
- 別ウィンドウで「phpMyAdmin」が開く＞Databases/データベースタブをクリック＞Create database / データーベースを作成する下の入力バーに「wp」＞隣の選択バーはutf8_general_ciを選択＞Create / 作成クリック
WordPressを設定
- 次の画面で以下を入力
データーベース名：wp（htdocs内のフォルダ名） ユーザー名：root（デフォルト値） パスワード：root（デフォルト値） データベースのホスト名：localhost テーブルの接頭辞：wp_
- 送信クリック
- インストール実行クリック
- 「ようこそ」の画面で以下を入力
サイトのタイトル：任意のタイトル ユーザー名：任意（ログインで必要） パスワード：任意（ログインで必要） メールアドレス：任意 検索エンジンでの表示：チェックしない
通常のログイン方法
- MAMP（灰色サークルに白い象のアイコン）実行ファイルを起動＞Start Serversクリック
- ブラウザで「Welcome to MAMP」が開きます。
- ブラウザの新規ウィンドウを開く＞アドレスバーに「http://localhost/wp/wp-login.php」と入力＞ログイン画面が開くので「ようこそ」の画面で設定したユーザー名とパスワードでログイン
- ダッシュボードが開きます。
＜参考サイト＞
レスポンシブWebデザイン - 実践
店舗サイトをつくる
- レスポンシブ化（ブレイクポイント：640px）
- SP時にメニューをハンバーガーメニュー（ドロワーメニュー）にする
- スムーススクロールでアニメーションしながらトップに戻る
- h1にgoogle fontsを適用させる
- GoogoleMap（南池袋公園）をサイト内に表示させる(レスポンシブ化)
- 適切な余白を入れること
- ニュースの数をPC時は６個全部、SP時は最新３つだけ表示させる
- .boxをhoverしたときにcssでスタイルに変化をつける
実践
例
解答
ポイント
Font Awesome Iconsを使用してハンバーガーメニュー（ドロワーメニュー）を設置する
＜HTML＞
- head内にFont Awesome Icons (アイコン)のCDNを記述します。
- CDN＝Content Delivery Network：ネットワーク経由でコンテンツを提供できるサービス
- ハンバーガーメニューのボタンは「MENU」と、クリックしてメニュー内容を展開したときの「CLOSE」を用意します。
<head> 〜 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 〜 </head> <body> 〜 <button type="button" id="menubtn" class="menu_btn"><i class="fa fa-bars"></i><br><span>MENU</span></button> <button type="button" id="menubtn_close" class="menu_btn"><i class="fa fa-times"></i><br><span>CLOSE</span></button> <nav class="gnav" id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Concept</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Access</a></li> <li><a href="#">Reservation</a></li> </ul> </nav> 〜 </body>
＜CSS＞
- ハンバーガーメニュー「MENU」「CLOSE」は、PC表示で非表示、SP表示で表示とします。
- .menu_btnで「MENU」「CLOSE」を同じ位置に重ねます。
- メニュー内容#menuはPC表示で表示、SP表示で非表示とします。
/* nav --------------------------------------- */ #menubtn { display: none; }/* PC表示は非表示 */ #menubtn_close { display: none; }/* PC表示は非表示 */ .gnav ul { display: flex; } .gnav li a { display: block; padding: 0 20px; font-size: 24px; } @media screen and (max-width: 640px) { /* nav --------------------------------------- */ button { border:1px solid #EC9366; border-radius: 5px; background: #FFF; } #menubtn { display: block; }/* SP表示は表示 */ .menu_btn { position: fixed; top: 20px; right: 20px; z-index: 99999; color: #EC9366; cursor: pointer; }/* 「MENU」「CLOSE」を同じ位置で重ねます */ .fa-bars, .fa-times { font-size: 3.2rem; padding: 0 .3rem; } .menu_btn span { font-size: 1rem; } #menubtn_close.m_block { display: block; }/* ハンバーガーメニューをクリックしたら、クラスを追加して表示 */ #menu { display: none; }/* SP表示は非表示 */ #menu.m_fixed { position: fixed; top: 72px; left: 0; width: 100%; z-index: 99999; }/* スクロール一定の場所を超えたら、クラスを追加してハンバーガーメニューについていく */ .gnav ul { display: flex; flex-wrap: wrap; background: #EC9366; } .gnav li { flex-basis: calc(100% / 2); } .gnav li a { background: #EC9366; color: #FFF; border-bottom: 1px solid #FFF; box-sizing: border-box; padding: 8px 20px 6px; } .gnav li:nth-child(2n+1) a { border-right: 1px solid #FFF; } .gnav li:last-child a { border-bottom: none; }
＜jQuery＞
- HTML内の/bodyの上に記述しています。
- ハンバーガーメニューのボタン「MENU」をクリックすると、ボタンは「CLOSE」に切り替わり、メニュー内容が展開します。そして、スクロールすると付いていきます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> //（SP表示で）ハンバーガーメニュークリックで「MENU」/「CLOSE」の切り替え、メニュー内容の表示/非表示 $(function(){ $('#menubtn, #menubtn_close').click(function(){ $('#menu').slideToggle(); $('#menubtn_close').toggleClass('m_block'); }); }); //（SP表示で）スクロールしたらハンバーガーメニューにメニュー内容がついてくる var navPos = $('#menu').offset().top; // グローバルメニューの位置 var navHeight = $('#menu').outerHeight(); // グローバルメニューの高さ $(window).on('scroll', function(){ if ($(this).scrollTop() > navPos) { $('body').css('padding-top', navHeight); $('#menu').addClass('m_fixed'); } else { $('body').css('padding-top', 0); $('#menu').removeClass('m_fixed'); } }); }); </script> </body>
ホバーアニメーション
＜HTML＞
<p class="box-photo"> <img src="img/pizza_zBt4Dfk.jpg" alt="menu"> </p>
＜CSS＞
.box-photo { overflow: hidden;/* はみ出した部分を隠す */ margin-bottom: 10px; } .box-photo img { max-width: 100%; transform: scale(1); transition: .3s ease-in-out;/* 0.3秒で中央から外へ移動 */ } .box-photo:hover img { transform: scale(1.2);/* ホバーの際に、1.2倍大きくなる */ }
＜参考サイト＞
yachin29.hatenablog.com
shig.starfree.jp
pointsandlines.jp
pointsandlines.jp
フルスクリーンレイアウト - 実践
(2020-06-24 加筆)
フルスクリーンレイアウト
- 背景画像を固定させて、スクロールしてもついてくるレイアウトのことです。
- パララックスデザイン：背景を固定して前面の要素が動きます。
実践
- テキストはアタリ、画像は個別に用意します。
- 背景画像のサイズは：1920×1280pxで用意します。
例
解答
ポイント
- トップのロゴは、編集できるフリー素材を活用して作成します。
- bodyに背景画像を設置して、スクロールしても画像が残るように固定します。
body { width: 100%; height: 100vh;/* 画面に対する高さの割合100% */ background: url(../img/people-2591838.jpg) no-repeat center center;/* 横縦中央位置に配置 */ background-attachment: fixed;/* スクロールのとき画像が固定_囲みが長くてもずっと表示できる */ background-size: cover;/*背景画像の縦横の長い方を基準に、縦横比を保ったまま表示_画面サイズによっては、縦横どちらかがはみ出し、背景いっぱいに表示される */ 〜 }
- トップページの縦横中央にロゴを配置し、見やすく調整します。
.header { width: 100%; height: 100vh; background: rgba(0,0,0,0.35);/* ロゴを見やすくするため背景画像の上に黒の透過を入れる */ position: relative;/* 縦横中央配置のために、親要素に基準を置く */ } .logo { width: 500px; height: 372px;/* 縦横比の高さの実数を入れないと中央にならない */ position: absolute;/* 縦横中央配置の記述 */ top: 0; right: 0; bottom: 0; left: 0; margin: auto ; opacity: .85;/* ロゴ自体に抜け感を出すため少し透過させる */ }
- iPhoneで実機確認したときに、background-attachment:fixed;が効かなかったので、別の方法で対応します。
@media screen and (max-width: 480px) { /* iPhoneでbackground-attachment:fixed;が効かない対処法 ・位置を固定した要素をコンテンツの後ろに配置 */ body:before { content: ""; display: block; position: fixed;/* 要素を固定 */ top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background: url(../img/people-2591838.jpg) no-repeat center center; background-size: cover; } }
＜参考サイト＞
ヒーローイメージ - 実践
(2020-06-24 加筆)
ヒーローイメージ（ヒーロー画像）とは
- Webサイトのファーストビューにて、画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこと。もしくはそのレイアウトのこと。
- 配置した動画を「ヒーロームービー」、それらの総称を「ヒーローヘッダー」と呼ぶこともあります。
ポイント
- Webサイトの内容と目的を表現している画像を選びます。
- 高解像度の画像を使用します。
- サイズはそのときに一番使用されているモニタータイズに合わせるのが良いとされています。現状は1920×1080pxが主流です。
- 画像が大きいと読み込みに時間がかかるので画像を軽くするサービスを使用します。
実践
- モバイルファーストで作成します。
- 画像、マークは別途用意します。
例
＜テキスト＞
Hero Header Welcome to MyStyle Infomation Home About Shop News Staff Contact Hero Header Style 大きな背景を使用して、インパクトを与えるサイトに仕上がるヒーローヘッダー。 ランディングページなど注目を集めたいサイトにおすすめです。 ヒーローイメージで使用する写真は、サイトのイメージを端的に表すものを使用するよう、心がけましょう。 (c) Hero Header Style
解答
ポイント
- 背景画像を設置して、スクロールしても画像が残るように固定します。
- background-attachment: fixedは、フルスクリーンで固定する場合以外は指定しません。
- iPhoneで実機確認したときに、background-attachment:fixed;が効かなかったので、別の方法で対応します。
/* header --------------------------------------- */ .page-header { height: 100vh;/* 画面に対する高さの割合 */ color: #FFF; font-family: 'Josefin Slab', serif; text-align: center; } /* iPhoneでbackground-attachment:fixed;が効かない対処法 ・位置を固定した要素をコンテンツの後ろに配置 */ .page-header:before { content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh;/* 画面に対する高さの割合 */ background: url(../img/surfing-2192675.jpg) no-repeat 30% center;/*横左から30%_縦中央*/ background-size: cover;/*背景画像の縦横の長い方を基準に、縦横比を保ったまま表示_画面サイズによっては、縦横どちらかがはみ出し、背景いっぱいに表示される */ } 〜 /*（768px以上のPC用表示を記述）*/ @media screen and (min-width: 768px) { /* header --------------------------------------- */ .page-header { height: 100vh;/* 画面に対する高さの割合 */ background: url(../img/surfing-2192675.jpg) no-repeat 30% center;/*横左から30%_縦中央*/ background-attachment: fixed;/* スクロールのとき画像が固定_囲みが長くてもずっと表示できる */ background-size: cover;/*背景画像の縦横の長い方を基準に、縦横比を保ったまま表示_画面サイズによっては、縦横どちらかがはみ出し、背景いっぱいに表示される */ .page-header:before { display: none; } }
- 画像によっては、上に文字を設置するとコントラストが低く、文字が読みにくい場合があります。そんなときには、背景画像を設置した.page-headerの上の.containerに、グラデーション背景を入れて、白文字を読みやすくします。
.page-header .container { height: 100vh; background-image: linear-gradient(to bottom, rgba(24, 103, 134, 0.3), transparent 60%, rgba(24, 76, 116, 0.1)); }/* 上から下へ、青緑系透過色から60％の位置までだんたん薄く、まただんだん青系透過色へ */
- トップ画面以外は、背景を白にしたいので設定します。
- 設定しない状態だと、トップ画面の画像が下まで続きます。
.main-content { background: #FFF; }
- ナビゲーションはSP表示とPC表示で変化させます。
- ＜SP表示＞縦並び、ボーダーで区切り見やすくしています。
.gnav li a { font-weight: bold; display: block; width: 160px; padding: 12px 0 10px; margin: 0 auto; border-top: 1px solid #FFF; } .gnav li:last-child a { border-bottom: 1px solid #FFF; } 〜
-
- ＜PC表示＞横並び、トップに固定することで、スクロールしてもナビゲーションをクリックしやすく設定しています。
.gnav { position: fixed;/* 固定 */ top: 0; width: 100%; display: flex;/* 横並び */ justify-content: center;/* 横中央並び */ 〜 }
- 実機の空きとPC検証上の空きは若干異なるので、各実機に合わせて微調整が必要です。
＜参考サイト＞
makitani.net
odnax.hatenablog.com
blogs.adobe.com
qiita.com
y-com.info
