以前とあんまり変わってない
以前の記事からのアップデートなので、内容は割と簡素。
前の記事で足りてるんだよな、+αが欲しかったらこっちも読んだらいいよって感じ。
こう
“tmp_202503” をダウンロード tmp_202503.zip – 126 回のダウンロード – 5.10 KBhtml
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
</body>
</html>あんま書くことないんだけど。
webフォントを使うときは<head>に書くと安定するというかそこまで遅くないというか。
属性を足してどうのこうのができるんで、css上でimportするよりはいいというのが今現状の方針。
とはいえ重いから、fontawesomeとかmaterialiconsとかのアイコン用途に絞って扱うのが無難かなーと思う。どうでしょうね。
jsをクロスドメインで読み込むときはintegrityを付けるとかしたほうがcorsを扱うときに楽かなと思う。逆に言えばセキュリティ云々をやる場合にだるいんで、cdnを使わずに自鯖にアップした方がいいですが、そう考えたらwebフォントもやめとけよになるね。めんどいですね。
とりあえずgoogleフォント、material iconsを使うときはこの内容で読み込んでおけば文字の太さとかアイコンのバリエーションとかが扱えるようにできるので便利です。
css（scss）
cssベタ打ちがだるくなって、ここ数年はscssしか使ってない。
/*
Theme Name: xxx
Author: xxx
Description: xxx
Version: xxx
*/
@use "./css/function/mixin";
@use "./css/function/normalize";
@use "./css/function/default";
@use "./css/function/sp";
@use "./css/function/form";
*{box-sizing: border-box;}
:root{
--sans-serif: "Noto Sans JP", sans-serif;
--serif: "Noto Serif JP", serif;
}
::selection {
color: #fff;
background-color: #3abec1;
}
body.scroll-lock{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom:0px;
}wpのテーマを作るなら上部のコメントアウトを活かす。
style.cssは統合用というか汎用というかで扱うのがいいという体感なので、ここに書くのは:rootくらいにして@useで色々を足す感じで使う。
ページ別にcssファイルを分けずにstyle.cssだけでWEBサイトを回すつもりなら、全部@useでくっつけちゃうと良いですね。
上記の内容だとディレクトリはこうなる。
style.css
css
├ bsse.scss（個別スタイル）
└ function
├ _mixin.scss
├ _normalize.scss
├ _default.scss
├ _sp.scss
└ _form.scssmixinではレスポンシブの関数を作ってある。
手打ちでもいいんだけど、ファイルを超えて幅指定を統合できるんであると便利。
詳細についてはこっちの記事参照。
外もまあ名前のとおりというか。
normalize ... css初期化
default ..... PC用スタイル
sp .......... スマホ用スタイル
form ........ フォームタグ用汎用なのでどのページに突っ込んでも困らないものをまとめてある。
最近はスマホからの閲覧が多い傾向にあるのでdefaultをスマホにして後付でPCにしてもいい気がするけど、ここは単純に慣れ。
js（jQuery）
よく使うやつをまとめた。
function bodyScrollLock(){
var scrollHeight = window.scrollY;
$('body').toggleClass('scroll-lock');
if($('body').hasClass('scroll-lock')){
$('body').css('top',-(scrollHeight));
}else{
var scrollPosition = $('body').css('top').replace(/[^0-9]/g, '');
$(window).scrollTop(scrollPosition);
$('body').css('top','');
}
}
function bodyScrollUnlock(){
$('body').removeClass('scroll-lock');
var scrollPosition = $('body').css('top').replace(/[^0-9]/g, '');
$(window).scrollTop(scrollPosition);
$('body').css('top','');
}
$(window).on('load resize',function(){
if(window.matchMedia("(max-width: 767.98px)").matches){
//header
if(!$('header .nav').hasClass('sp')){
$('header .nav').addClass('sp');
}
}else{
//header
if($('header .nav').hasClass('sp')){
$('header .nav').removeClass('sp');
$('button[data-btn="hnav"]').removeClass('active');
$('header .nav').removeClass('active');
bodyScrollUnlock();
}
}
})
$(function(){
//common
$('a[href^="#"]').not('a.notscroll').click(function(){
let speed = 500;
let headerHeight = $('header').innerHeight();
let href= $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top - headerHeight;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
//header
$('button[data-btn="hnav"]').on('click',function(){
$(this).toggleClass('active');
$('header .nav').toggleClass('active');
if($('body').hasClass('scroll-lock')){
bodyScrollUnlock();
}else{
bodyScrollLock();
}
})
})具体的なところではページ内リンクのスムーススクロールとスクロール禁止ギミック（関数含む）、ブラウザ幅準拠のレスポンシブ条件分岐。
//headerの部分は活用例なのであんまり気にしなくていい。
コメント