WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

ヒーローヘッダーの設定

Webサイト制作 2022年8月クラス




最近、よく見かける「１枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。
「ヒーローヘッダー」と呼ばれています。

ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージで構成されたウェブサイトのことを指します。

2014年頃から海外のウェブデザインにてトレンド的にかなり増えてきている手法です。
巨大な画像により、イメージを強く植えつけることができる反面、写真のクオリティ次第でウェブサイト全体の印象を悪くすることも有りますので、フラットデザイン同様簡単そうでデザインセンスの問われるデザイン要素となっています。



melem.jp


tomiyahonten.com




www.ditjapan.com



こういったレイアウトを作る際の１番のポイントは、用意する画像の大きさです。
自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れてしまっていたり、逆に余白が出てしまったり、という事が起こります。

ビットマップのデータをすべてのディスプレイでピッタリの大きさに合わせるという事は基本的に無理なので、ある大きさで書き出した画像をCSSで拡大・縮小していきます。

img要素の場合は前回やったようにフルードイメージ化する事で画像を可変にしましたが、background画像の場合は「background-size」というプロパティを使って、拡大・縮小していきます。



今回のようにフルスクリーンで画像を表示したい場合、絶対的に決まった大きさはありませんが、一番シェアの多いモニターの解像度で作るのが無難です。
モニター解像度のシェア（2019年~2020年）





使用するテキスト

Cafe de Felicaは食とアートと音楽が交差する空間を創造します。

シェフ・矢島が提供するのは、スペイン料理に「東京」のエッセンスを取り入れたモダンスパニッシュ。
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。

9月13日の作業データ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NetSmart</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Net Smart</h1>
<p class="tag-line">よりスマートなインターネットライフを</p>
</header>

<nav class="g-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONCEPT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">ACCESS</a></li>
</ul>
</nav>


<main>

<div class="main-visual">
<img src="img/main.jpg" alt="">
</div>

<div class="main-txt">
<h2>
必要なものは、<br>
ビジネスの価値を届ける<br class="sp-on">デザインの力。
</h2>
<p>
Net Smartは、ビジネスとユーザーを理解し、<br class="pc-on">関係性を構築するためのストーリーの設計とUXデザインをご提供し、<br class="pc-on">よりスマートなインターネットライフを送るお手伝いを致します。
</p>
</div>

<div class="content-wrapper">
<div class="content-box">
<h3>CONCEPT</h3>
<p class="photo"><img src="img/01.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.content-box -->

<div class="content-box">
<h3>SERVICE</h3>
<p class="photo"><img src="img/02.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.content-box -->

<div class="content-box">
<h3>ACCESS</h3>
<p class="photo"><img src="img/03.jpg" alt=""></p>
<p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
</div><!-- /.content-box -->
</div><!-- /.content-wrapper -->


<div class="info-wrapper">

<div class="company-wrapper">
<h3>会社情報</h3>
<dl class="company-info">
<dt>会社名</dt>
<dd>株式会社Net Smart</dd>
<dt>住所</dt>
<dd>東京都豊島区南池袋</dd>
<dt>電話番号</dt>
<dd><a class="tel-num" href="tel:03-0000-0000">03-0000-0000</a></dd>
<dt>従業員</dt>
<dd>1000名</dd>
</dl>
</div><!-- /.company-wrapper -->

<div class="map-wrapper">
<h3>Map</h3>
<div class="map-inner">
<iframe class="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9454663323195!2d139.7121211499927!3d35.72755968008629!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z6LGK5bO25Yy656uL5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1663033017491!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div><!-- .map-inner -->
</div><!-- /.map-wrapper -->
</div><!-- /.info-wrapper -->

</main>
<footer>
<ul class="sns">
<li><img src="img/instagram.svg" alt=""></li>
<li><img src="img/twitter.svg" alt=""></li>
<li><img src="img/line.svg" alt=""></li>
</ul>

<p><small>&copy; Net Smart all rights reserved</small></p>
</footer>
</body>
</html>


style.css

@charset "utf-8";

*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
img{
vertical-align: bottom;
max-width: 100%;/* フルードイメージの設定 */
}

/* pcレイアウト */
header{
max-width: 960px;
margin: 0 auto;
padding: 20px 0;
}

.g-nav{
width: 100%;
height: 50px;
background-color: #1c5775;
margin-bottom: 50px;
}
.g-nav>ul{
display: flex;
max-width: 960px;
margin: 0 auto;
}
.g-nav li{
width: 25%;
}
.g-nav a{
color: #FFF;
display: block;
text-align: center;
line-height: 50px;
border-left: 1px solid #FFF;
}
.g-nav a:hover{
background-color: #6b6c75;
}
.g-nav li:last-of-type>a{
border-right: 1px solid #FFF;
}
main{
max-width: 960px;
margin: 0 auto 100px;
}
.main-visual{
margin-bottom: 80px;
}
.main-txt{
text-align: center;
margin-bottom: 80px;
}
.main-txt>h2{
margin-bottom: 30px;
}
.main-txt>p{
line-height: 2;
}
.content-wrapper{
display: flex;
justify-content: space-between;
margin-bottom: 80px;
}
.content-box{
width: calc((100% - 40px) / 3);
}
.content-box>h3{
margin-bottom: 10px;
border-left: 20px solid #1c5775;
padding-left: 16px;
}
.photo{
margin-bottom: 10px;
}

.info-wrapper{
display: flex;
justify-content: space-between;
}
.company-wrapper{
width: 48%;
}
.company-info{
display: flex;
flex-wrap: wrap;/* 改行の指定 */
border: 1px solid #555;
}
.company-info>dt{
width: 30%;
background-color: #e0e4e9;
padding: 20px;
box-sizing: border-box;
border-right: 1px solid #555;
}
.company-info>dd{
width: 70%;
padding: 20px;
box-sizing: border-box;
}
.company-info>dt:nth-of-type(n+2),.company-info>dd:nth-of-type(n+2){
border-top: 1px solid #555;
}

.map-wrapper{
width: 48%;
}
.map-inner{
height: 300px;
}
.g-map{
width: 100%;
height: 100%;
}


footer{
width: 100%;
padding: 50px 0;
background-color: #1c5775;
}

.sns{
max-width: 960px;
margin: 0 auto 40px;
display: flex;
}
.sns>li{
width: 40px;
margin-right: 20px;
}
footer>p{
text-align: center;
color: #FFF;
}

.sp-on{
display: none;/* 改行の無効 */
}

.tel-num{
pointer-events: none;/* pc時は電話番号のリンクを無効 */
}

@media (max-width:959px){
/* 959px以下の時 */
header{
padding-left: 20px;
}
.g-nav li:last-of-type>a{
border-right: 0;
}
.g-nav li:first-of-type>a{
border-right: 0;
}

main{
padding: 0 10px;
}
.sns{
justify-content: center;
}
.sns>li{
margin: 0 10px;
}
}

@media (max-width:767px){
header{
text-align: center;
}
.g-nav{
height: 100px;
}
.g-nav>ul{
flex-wrap: wrap;
}
.g-nav li{
width: 50%;
}
.g-nav li:nth-of-type(n+3)>a{
border-top: 1px solid #FFF;
}


.content-wrapper{
display: block;
}
.content-box{
width: 100%;
margin-bottom: 80px;
}
.info-wrapper{
display: block;
}
.company-wrapper{
width: 100%;
margin-bottom: 80px;
}
.map-wrapper{
width: 100%;
}
.map-inner{
height: 260px;
}

/* 改行の処理 */
.main-txt>p{
text-align: left;
}
.pc-on{
display: none;
}

.sp-on{
display: block;/* 改行の有効 */
}
.tel-num{
pointer-events: auto;/* sp時は電話番号のリンクを有効 */
}
}

9月6日の作業データ 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブ基礎２|フルードレイアウト</title>
<style>
*{
margin: 0;
padding: 0;
}
/* pcレイアウト */
.box-wrapper{
width: 80%;
margin: 100px auto;
display: flex;
justify-content: space-between;
}
.box{
width: 23.5%;/* (100% - 6%) ÷ 4 */
height: 300px;
background-color: #bf4343;
}
/* 1000px以下の時 */
@media (max-width:1000px){
.box-wrapper{
width: 92%;
}
}
/* 600px以下の時 */
@media (max-width:600px){
.box-wrapper{
display: block;
}
.box{
width: 100%;
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div><!-- /.box-wrapper -->
</body>
</html>

githubでissue管理をする

Git

基本的にサイト制作はチームで行うのですが、未経験者であっても「githubのissue」機能を使って、チーム開発を見据えたサイト制作をしてみましょう。


gitの初期化

git init


gitのユーザー登録

git config --global user.name "Sample"
git config --global user.email sample@example.com

issue機能を使う

  1. githubにポートフォリオ用のリポジトリーを作る
  2. readmeファイルの作成
  3. githubのissue機能を使って今日の作業目標を決める
  4. issueに対応する作業ブランチを作る
  5. ローカルで作業が終わったらcommitして、リモートリポジトリにpushする。コミットする際にコミットメッセージをissue番号にすることでcommitがgithub上のissueと結びつく
  6. githubでプルリクエストを作る
  7. githubでプルリクをマージする。コンフリクトがないことを確認してボタンを押す。本来なら責任者が再鑑してからマージする。
  8. githubでissueをクローズし、いらないブランチを削除
  9. マスターブランチにチェックアウトしリモートリポジトリからpullして最新状況を取得する
  10. 1に戻って次のissue（作業）を作る


qiita.com



note.nkmk.me

htaccessを使った動的配信

Webサイト制作

「.htaccessファイル」を使った動的配信

動的な配信  |  検索セントラル  |  Google Developers



スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。

まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。


今回の自動振り分けは

  1. ウェブサーバが「Apache」
  2. 設定ファイル「.htaccess」の設置が許可されている
  3. mod_rewriteモジュールが利用可能

の条件が必要です。

デモページ

うちのにゃんこ|PCページ




.htaccessの記述内容

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /cat/sp/ [R,L]

Header set Vary User-Agent
</IfModule>

まずはmod_rewriteモジュールが有効な時のみに処理するように分岐させます。

<IfModule mod_rewrite.c>

</IfModule>


次にmod_rewriteモジュールを起動させます。

RewriteEngine On

次にRewriteCondを使って、どういう条件でリダイレクトの処理をするかを指定します。

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。 つまり、"A-Z" と "a-z" は区別しない。


RewriteCond %{QUERY_STRING} !mode=pc

URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。


4行目
RewriteRule ^$ /cat/sp/ [R,L]

RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。フラグとして、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必ず必要です。「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。ここでは省略しても問題ありません)。



今回の場合は、この .htaccessファイルを設置した場所が http://www.example.com/pc/ だとすると、

スマートフォンでアクセスすると http://www.example.com/pc/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/pc/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/pc/?mode=pc であれば移動しない。




自分のドメインでトップページを表示させたい場合（http://www.example.com）
4行目を以下のように直し、トップページ（PC用のindex.html）と同じ階層にアップロードする。

RewriteRule ^$ /sp/ [R,L]

スマートフォンでアクセスすると http://www.example.com/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない



スマートフォンサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”canonicalという属性を使用して、ページの評価やインデックスはデスクトップ用URLに統一するための正規化処理をしましょう。そうすることでミラーサイトのような重複コンテンツ扱いになることを防ぎます。

<link rel="canonical" href="http://○○○○○.com/pc/">
次にPCサイト用データの「index.htmlファイル」のhead内に貼り付ける

rel=”alternate”という属性を使用して、Googlebotにスマートフォン用ページが別で存在することを伝える処理をします。そうするとスマートフォン向けの代替コンテンツがGooglebotに認識され、スマートフォン用ページが別で存在することを伝えることができます。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/cat/sp/">


最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。

<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>

最後に必ずモバイルフレンドリーテストを受けて合格するか確認しましょう。

モバイル フレンドリー テスト - Google Search Console




note.mu


受講生の作例
http://miyakojimanosuteki.com/


スマートフォンサイトを意識したfont-family

font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Kaku Gothic ProN,"Yu Gothic",YuGothic,Verdana,sans-serif;

解像度とピクセルの関係

2022年4月クラス



ピクセル（英: pixel、px）
ピクセル（英: pixel）、または画素とは、コンピュータで画像を扱うときの単位。640×480ピクセルの画像は、横640個、縦480個の点を並べて表現されていることを示す。ディスプレイなどのデバイスにおいては、ピクセルを単位として画像を表示する。


解像度（ppi）
画像はすべて、点が集まって表示されていて、1インチ（2.54cmあたり）あたりにどれだけの密度で点が集まっているかを指す数値を『解像度』といいます。
ちなみに単位となっている「ppi」というのはpixel per inch（ピクセル パー インチ）の略です。
画像を綺麗に出力させる為には用途に応じたppiを選ぶ必要があります。

webの場合　　72~100ppi
印刷物の場合　300~350ppi

 

1pxは何センチ（ミリ）？
ピクセルはセンチやミリのような絶対値では無く、ppiの値によって大きさが変わる相対値です。
なので、
72ppiであれば、2.54cmの中に72個のピクセルがあるわけなので、1pxは0.0342cm（0.342mm）になり、
300ppiであれば、0.0084cmになります。


高解像度ディスプレイへの対応

Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になっている。


640×960ピクセルという解像度は「デバイスピクセル（dpx）」と呼ばれ、3.5インチの画面上で表現されるサイズが「CSSピクセル（csspx）」と呼ばれています。
ディスプレイの高解像度化により、「デバイスピクセル」と「CSSピクセル」という二つの概念を分けて考える必要がでてきました。
サイトを制作する場合には、ビットマップで画像を作る際は「デバイスピクセル」を、CSSで幅・高さを指定する際は「CSSピクセル」を基準に作って行きます




様々なデバイスの解像度

iosdev.app-rox.com