(cache)Felica PM Site 0418

11 July

html-css

Mobile First

Mobile Firstとは？

ユーザーの利用状況などの情報を元にWebサイトを設計し、スマートフォンでもストレスなく利用できるデザインにすること

モバイルファーストのデザインの考え方

まずは、スマートフォンでWebページを閲覧する際のユーザーの閲覧状況を考える。
スマートフォンは画面が小さく、通信環境が不安定である。
マウスやキーボードではなく、タップや画面に指を触れて滑らせる「スワイプ」による操作が中心となる。
必要最小限の情報を適切なレイアウトで設計する

このようなことを踏まえた上でWebデザインを決めていく。

スマホ指定校

使用画像

sp nav

使用テキスト

Mobile first

HOME
ABOUT
PROFILE
ACCESS
CONTACE

html(07/11)

<!--Header-->
<header>
<h1>Mobile first</h1>
</header>

<!-- Hamburger -->
<div class="btn">
<i class="fas fa-bars"></i>
<i class="fa-solid fa-xmark"></i>
</div>
<!-- Navigation -->
<nav class="spnav">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">PROFILE</a></li>
<li><a href="">ACCESS</a></li>
<li><a href="">CONTACE</a></li>
</ul>
</nav>

<!-- Pc navigation -->
<nav class="pcnav">
<ul class="container">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACE</a></li>
</ul>
</nav>

<!--Main Contents-->
<main>
<p><img src="img/img.gif" alt="画像"></p>
<p><img src="img/img.gif" alt="画像"></p>
<p><img src="img/img.gif" alt="画像"></p>
</main>

<!-- Footer-->
<footer>
<p><small>Copyright &copy; 2024</small></p>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$('.btn').on('touchstart', function () {
    $(this).toggleClass('close');
    //$('.spnav').slideToggle();
　　　$('.spnav').toggleClass('slide');
});

</script>

</body>

<h1>Mobile first</h1>

</header>

</div>

<ul>

<li><a href="">ABOUT</a></li>

<li><a href="">PROFILE</a></li>

<li><a href="">ACCESS</a></li>

<li><a href="">CONTACE</a></li>

</ul>

</nav>

<li><a href="#">ABOUT</a></li>

<li><a href="#">PROFILE</a></li>

<li><a href="#">ACCESS</a></li>

<li><a href="#">CONTACE</a></li>

</ul>

</nav>

<main>

</main>

</footer>

$('.btn').on('touchstart', function () {

$(this).toggleClass('close');

//$('.spnav').slideToggle();

　　　$('.spnav').toggleClass('slide');

});

</script>

</body>

css(07/11)

@charset "utf-8";

/* CSS  reset */
*{
margin： 0;
padding： 0;
}
body{
line-height： 1;
font-family： sans-serif;
text-align： center;
}
ul{
list-style： none;
}
a{
text-decoration： none;
color： inherit;
display： block;
}
img{
vertical-align： bottom;
max-width： 100%;
}
/* 共通css */
header,main,footer{
padding-block： 20px;
}

/* Header */
header{
color： #fff;
background： #059;
}

/* Hamburger */
.btn{
width：50px;
height： 50px;
border：1px solid #fff;
border-radius： 5px;
color： #fff;
background： rgba(0, 84, 153, 0.5);
font-size： 35px;
position： fixed;
top： 5px;
right： 5px;
overflow： hidden;
}
.btn i{
display： block;
line-height： 50px;
}
/* touch時のcss */
.close i：first-child{
display： none;
}

/*Sp nav*/
.spnav{
position：fixed;
width： 100%;
top：57px;
/* display： none; */
left：100%;
transition： 300ms;
}
.slide{
left：0;
}
.spnav li{
line-height： 70px;
font-size： 1.5em;
font-weight： bold;
}
.spnav a{
color： #00a;
background： rgba(200,230,255,0.85);
border-bottom： 1px solid #00a;
}

.pcnav{
display： none;
}

/* メインコンテンツ */
main{
padding-inline：10px;
}
main p + p{
margin-top： 10px;
}

/* Footer */
footer{
background：#ddd;
}

/* Media Query */
@media (width > 743px){

/* 共通css */
.container{
max-width： 960px;
margin-inline： auto;
padding-inline： 10px;
display： flex;
justify-content： 
space-between;
}
header,footer{
padding-block： 30px;
}

/* h1見出し */
h1{
font-size： 3em;
/* font-size： 48px; */
}

/* Mobile Parts */
.btn,.spnav{
display： none;
}

/* Pc Navigation */
.pcnav{
display： block;
background：#cdf;
}
.pcnav li{
width： 20%;
line-height： 40px;
}
.pcnav a{
transition： 200ms;
}
.pcnav a：hover{
background： #059;
color： #fff;
}

/* Main contents */
main{
padding-block： 50px;
}
main p{
width： 32%;
}
main p + p{
margin-top： 0;
}


}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

@charset "utf-8";

/* CSS reset */

margin： 0;

padding： 0;

}

body{

line-height： 1;

font-family： sans-serif;

text-align： center;

}

ul{

list-style： none;

}

text-decoration： none;

color： inherit;

display： block;

}

img{

vertical-align： bottom;

max-width： 100%;

}

/* 共通css */

header,main,footer{

padding-block： 20px;

}

/* Header */

header{

color： #fff;

background： #059;

}

/* Hamburger */

.btn{

width：50px;

height： 50px;

border：1px solid #fff;

border-radius： 5px;

color： #fff;

background： rgba(0, 84, 153, 0.5);

font-size： 35px;

position： fixed;

top： 5px;

right： 5px;

overflow： hidden;

}

.btn i{

display： block;

line-height： 50px;

}

/* touch時のcss */

.close i：first-child{

display： none;

}

/*Sp nav*/

.spnav{

position：fixed;

width： 100%;

top：57px;

/* display： none; */

left：100%;

transition： 300ms;

}

.slide{

left：0;

}

.spnav li{

line-height： 70px;

font-size： 1.5em;

font-weight： bold;

}

.spnav a{

color： #00a;

background： rgba(200,230,255,0.85);

border-bottom： 1px solid #00a;

}

.pcnav{

display： none;

}

/* メインコンテンツ */

main{

padding-inline：10px;

}

main p + p{

margin-top： 10px;

}

/* Footer */

footer{

background：#ddd;

}

/* Media Query */

@media (width > 743px){

/* 共通css */

.container{

max-width： 960px;

margin-inline： auto;

padding-inline： 10px;

display： flex;

justify-content：

space-between;

}

header,footer{

padding-block： 30px;

}

/* h1見出し */

h1{

font-size： 3em;

/* font-size： 48px; */

}

/* Mobile Parts */

.btn,.spnav{

display： none;

}

/* Pc Navigation */

.pcnav{

display： block;

background：#cdf;

}

.pcnav li{

width： 20%;

line-height： 40px;

}

.pcnav a{

transition： 200ms;

}

.pcnav a：hover{

background： #059;

color： #fff;

}

/* Main contents */

main{

padding-block： 50px;

}

main p{

width： 32%;

}

main p + p{

margin-top： 0;

}

Responsive

自由制作課題(CW)ワークフローワイヤーフレーム/カンプ

Felica PM Site 0418

アーカイブ

カテゴリー

リンク

最近の投稿

最近のコメント

Mobile First

Mobile Firstとは？

モバイルファーストのデザインの考え方

スマホ指定校

使用画像

sp nav

使用テキスト

Responsive