2021-05-14

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

CSS3 CSS

Retinaディスプレイ

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

640×960ピクセルという解像度は「デバイスピクセル（dpx）」と呼ばれ、3.5インチの画面上で表現されるサイズが「CSS ピクセル（csspx）」と呼ばれています。

ディスプレイの高解像度化により、「デバイスピクセル」と「CSS ピクセル」という二つの概念を分けて考える必要がでてきました。

サイトを制作する場合には、ビットマップで画像を作る際は「デバイスピクセル」を、CSSで幅・高さを指定する際は「CSS ピクセル」を基準に作って行きます。

f:id:yachin29:20160330005936p:plain

また、「デバイスピクセル」を「CSS ピクセル」で割った数値を「devicePixelRatio」と言います。
例　iPhone5は「デバイスピクセル（画面解像度）」が640px✕1136pxで、「CSS ピクセル」が320px✕568pxなので「DevicePixelRatio」が2になります。

f:id:yachin29:20160307020120p:plain

2021-05-14

CSS-spriteを使ったナビゲーションボタンの作成

CSS

CSSスプライトとは複数の画像を１つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookやGoogleでも使われている手法です。background-positionを使用して背景画像を動かします。

f:id:yachin29:20160322014753p:plain

f:id:yachin29:20210514091349p:plain

メリット
・画像の読み込みが１回で済むので、サイトの読み込み速度が速くなる

デメリット
・サイズやデザインの更新が面倒
・background-positionの理解が必要

ナビゲーションボタンにCSSスプライトを使ってみましょう

f:id:yachin29:20210514142237p:plain

<!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>CSS-Spriteを実装してみる</title>
<style>
html,body,h1,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}

h1{
text-align: center;
padding: 30px 0;
}
.g-nav{
width: 960px;
height: 50px;
margin: 0 auto;
}
.g-nav>ul{
display: flex;
}
.g-nav li{
width: 20%;
height: 50px;
}
.g-nav a{
display: block;
height: 50px;
background: url(img/bg.png)no-repeat 0 0;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
.g-nav li:nth-of-type(2)>a{
background: url(img/bg.png)no-repeat -192px 0;
}
.g-nav li:nth-of-type(3)>a{
background: url(img/bg.png)no-repeat -384px 0;
}
.g-nav li:nth-of-type(4)>a{
background: url(img/bg.png)no-repeat -576px 0;
}
.g-nav li:nth-of-type(5)>a{
background: url(img/bg.png)no-repeat -768px 0;
}
.g-nav a:hover{
background: url(img/bg.png)no-repeat 0 -60px;
}
.g-nav li:nth-of-type(2)>a:hover{
background: url(img/bg.png)no-repeat -192px -60px;
}
.g-nav li:nth-of-type(3)>a:hover{
background: url(img/bg.png)no-repeat -384px -60px;
}
.g-nav li:nth-of-type(4)>a:hover{
background: url(img/bg.png)no-repeat -576px -60px;
}
.g-nav li:nth-of-type(5)>a:hover{
background: url(img/bg.png)no-repeat -768px -60px;
}
</style>
</head>
<body>
<header>
<h1>CSS-Spriteを実装してみる</h1>
</header>
<nav class="g-nav">
<ul>
<li><a href="#">html</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">wordpress</a></li>
<li><a href="#">php</a></li>
<li><a href="#">photoshop</a></li>
</ul>
</nav>
</body>
</html>

2021-05-13

%とpxを使ったレイアウト

f:id:yachin29:20210513143054p:plain

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Cafe de FELICA</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Cafe de FELICA</h1>
</header>
<nav class="g-nav">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Access</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<div class="main">
<p class="main-photo"><img src="img/main.jpg" alt=""></p>

<div class="main-copy">
<h2>Lorem, ipsum</h2>
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit.<br>
Nemo commodi voluptates impedit unde!<br>
Fugit dolor asperiores libero quibusdam, suscipit quaerat.</p>
</div><!-- /.main-copy -->
<div class="wrapper">
<div class="content-box">
<h3>content-01</h3>
<p class="content-photo"><img src="img/content01.jpg" alt=""></p>
<p class="content-txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, eligendi</p>
</div><!-- /.content-box -->

<div class="content-box">
<h3>content-02</h3>
<p class="content-photo"><img src="img/content02.jpg" alt=""></p>
<p class="content-txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, eligendi</p>
</div><!-- /.content-box -->

<div class="content-box">
<h3>content-03</h3>
<p class="content-photo"><img src="img/content03.jpg" alt=""></p>
<p class="content-txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero, eligendi</p>
</div><!-- /.content-box -->
</div><!-- /.wrapper -->
</div><!-- /.main -->
<footer>
<p><small>&copy; 2021 Cafe de FELICA</small></p>
</footer>
</body>
</html>

style.css

@charset "utf-8";

html,body,h1,h2,h3,p,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
img{
vertical-align: bottom;
}
body{
font-family: 'Caveat', cursive;
}
header{
width: 960px;
margin: 0 auto;
}
h1{
padding: 20px 0;
font-size: 50px;
color: #8a270f;
}
.g-nav{
width: 100%;
height: 50px;
background-color: #8a270f;
}
.g-nav>ul{
display: flex;
width: 960px;
margin: 0 auto;
}
.g-nav li{
width: 25%;
height: 50px;
}
.g-nav a{
display: block;
line-height: 50px;
color: #FFF;
text-align: center;
font-size: 24px;
border-right: 1px solid #FFF;/* 線幅、線の種類、線の色 */
}
.g-nav li:first-of-type>a{
border-left: 1px solid #FFF;
}
.g-nav a:hover{
background-color: #a75335;
}

.main{
width: 960px;
margin: 50px auto 100px;/* 上、左右、下 */
}
.main-photo{
margin-bottom: 100px;
}
.main-copy{
text-align: center;
margin-bottom: 100px;
}
.main-copy>h2{
margin-bottom: 20px;
font-size: 40px;
}
.lead{
line-height: 1.8;
font-size: 28px;
}
.wrapper{
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.content-box{
width: 300px;
}
.content-box>h3{
margin-bottom: 10px;
font-size: 28px;
}
.content-photo{
margin-bottom: 10px;
}
.content-txt{
font-size: 24px;
}
footer{
width: 100%;
height: 100px;
background-color: #a75335;
}
footer>p{
text-align: center;
line-height: 100px;
color: #FFF;
}

2021-05-10

2カラムレイアウトの作成

CSS

f:id:yachin29:20210510141132j:plain

<!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>ナビゲーション付きの2カラム</title>
<link rel="stylesheet" href="css/style.css">
<style>
html,body,ul,li,p{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}

body{
background-color: #d6dbdb;
}
.container{
width: 960px;
margin: 0 auto;
background-color: #FFF;
padding: 10px;
box-sizing: border-box;
}
header{
height: 300px;
background-color: cadetblue;
margin-bottom: 10px;
}
nav{
margin-bottom: 10px;
}
ul{
display: flex;
}
li{
width: 20%;
height: 50px;
}
li>a{
display: block;
text-align: center;
line-height: 50px;
background-color: crimson;
color: #FFF;
}
li>a:hover{
background-color: #e9a7a7;
color: #222;
}
li:nth-of-type(n+2)>a{
border-left: 1px solid #FFF;
}
.wrapper{
display: flex;
flex-direction: row-reverse;
margin-bottom: 10px;
justify-content: space-between;
}
.main{
width: 600px;
height: 400px;
background-color: #a9cea9;
}
.sub{
width: 330px;
height: 400px;
background-color: #f7e2aa;
}
footer{
height: 100px;
background-color: #e4b2cb;
}
footer>p{
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<nav>
<ul>
<li><a href="#">ボタン1</a></li>
<li><a href="#">ボタン2</a></li>
<li><a href="#">ボタン3</a></li>
<li><a href="#">ボタン4</a></li>
<li><a href="#">ボタン5</a></li>
</ul>
</nav>
<div class="wrapper">
<div class="main"></div>
<div class="sub"></div>
</div><!-- /.wrapper -->
<footer>
<p><small>&copy; 2021-05 FELICA</small></p>
</footer>
</div><!-- /.container -->
</body>
</html>