自分用。
CSS
レスポンシブ前提の。
@import url(https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css);
@import url(https://fonts.googleapis.com/css2?family=Material+Icons);
*{ box-sizing: border-box;}
html{ font-size: 62.5%;}
body{ margin: 0; font-size: 1.4rem; line-height: 1.5;}
@media (pointer: fine) {}
@media screen and (max-width: 1023.98px){}
@media screen and (min-width: 768px){}
@media screen and (max-width: 767.98px){}スタイルの初期化は絶対にやる。基本的には使いやすいやつ、慣れたやつでいいし、CDNとかで外部読み込みせずに直接書いてしまうのもあり。normalize.cssの場合かゆいところが残るんで調整が必要。bodyのmarginとかね。
font-sizeはremをよく使うんで、pxと同じ数値で扱えるように調整。じゃあpxでいいじゃんって気持ちもあるけどこれで慣れてしまってる。
fontawesome、materialiconsは択。好み的にはmaterialiconsなんだけど、SNSアイコンも網羅できる点からfontawesomeを入れたほうが安心。両方入れてもいいっちゃいいけどね。
pointer:fineはマウスカーソルが当たったときが条件のやつ。生のままで:hoverをやっちゃうと、スマホとかタブレットとかでアコーディオンとか仕込んだ場合、タップした箇所が:hover扱いになってかっこ悪いことになる。その対策っていうマイブーム。
screen関係は一応メジャーどころを抑えて。スマホサイズで分けるのが最低限だけど、最大幅をブラウザ幅にして横スクロールを廃した組み方をする場合、ナビゲーションメニューとかスマホサイズの手前でぶち抜くようなことはあるんで、1024pxでとりあえず構えておくと便利。
「.98」のやつは、拡大したときに不具合が出るのを対策するためのやつ。「767.98px」で検索するといろんな解説記事が出てくる。
javascript(jQuery)
$(function(){
$(window).on('load resize', function(){
if(window.matchMedia('(max-width:767.98px)').matches){
}else{
}
})
//スクロール
$('a[href^="#"]').click(function(){
var headerHeight = 0;
//headerHeight = $('header').innerHeight();
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - headerHeight;
$("html, body").animate({scrollTop:position}, 500, "swing");
return false;
});
//外部リンクからのスクロール
$(window).on('load', function() {
var url = $(location).attr('href');
var headerHeight = 0;
//headerHeight = $('header').innerHeight();
if(url.indexOf("#") != -1){
anchor = url.split("#");
target = $('#' + anchor[anchor.length - 1]);
if(target.length){
position = Math.floor(target.offset().top) - headerHeigth;
$("html, body").animate({scrollTop:position}, 500, "swing");
}
}
});
})レスポンシブのは.machMedia()が今の所自分の中での最適解。cssと同じ測り方だから、数値が合ってたらズレない。
ページ内スクロールもほぼ確定で使うから入れておく。コメントアウトしてるところはヘッダーを固定表示させる場合の調整用。意外とこの調整してないサイト多いよね。あったほうがいいと思うんだけどね。
まとめ
PC/SPでよくあるのはヘッダーメニューの切り替えとかで、以前はそれぞれ作ったやつの表示・非表示を切り替えるのが主流だった。だけどいい加減jsが普及した、cssもいい感じになってきたのもあって、同一のhtmlからそれぞれのデザインにアプローチできるようになった。SEOにどう関わるかはわからないけど作る・編集する側としては別個よりもまとまってた方がやりやすいんでとてもいいことだと思う。
CDNを使う場合、常に最新版を読み込める方法もあったりするんだけど、それをやると大型アップデートがあった際に仕様が変わって表示がぶっ壊れることもあるんで、バージョン指定はきちんとしておいたほうが安心。
おまけ：HTML
Emmet的なもんで出してくれるようになったからそれをそのままやればいいんだけどさ。
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="wrap">
<header>
</header>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>viewportは個人的に必須。レスポンシブ前提じゃないWEBサイトはここ数年作ったことがない。あって困ることはないんで、無ければ入れておく。
jQueryのライブラリも読ませる。javascriptを打てないのが悪いところもあるんだけど、サイト内でほぼ必ずプラグイン使うし。条件がなければ極力最新のバージョンで組むようにしてる。
cssとjsは全ページに掛かる共通のやつがほぼ絶対必ずあるのでやっておく。名前は何でもいいっちゃいいんだけど、cssに関してはwpを踏まえた感じで作っておけば何かと後々便利なのでオススメ。
<body>内はいつもこんな感じ。#wrapはおまじないなので無くてもいいんだけど、最上位になる<body>の手前に1枚噛ませたら何かあったときに楽。何もないときも多いけど。背景色をつけるとか、<header>を固定する場合とかいいですね。何かあったらめんどいんで、<body>は極力デザインを絡めないようにしてる。
faviconとかoggも使うっちゃ使うんだけど、作ったHTMLをCMSに乗せることが多いから静的ページの段階では入れてない。
コメント