私的WEBサイト構築初期設定2023

メモ。

HMTL関係
1. 大枠
2. 画像
CSS
js（jQuery）
ページのスクロール禁止ギミック
iframeのレスポンシブ化

HMTL関係

大枠

<!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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <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>
<div id="wrap">
<header></header>
<main></main>
<footer></footer>
</div>
</body>
</html>

jQueryは一蓮托生になってるので必須。

Material IconsというかWEBフォント周りはpreloadしないとしんどいので<head>に書く。

汎用cssはwp作業が多いので直下。

jsはページ別とか用途別で小分けにすると多いけど総量的には多くないので基本的に一元管理。

#wrapは活躍することはあまりないけど、bodyにclassやstyleを振るのが好きでないので代用の意味がある。

header、main、footerは最近よくやる分け方。これにgrid layoutを使えばやりたいことは賄えてる。

CSS Grid Layout を極める！（基礎編） - Qiita

0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウトを、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。格子状のマス目のグリッドに好きな順番に配置したり結合したり...

画像

キービジュアル的なものはレスポンシブ対応のためにpicture。スライドショーに突っ込んでも問題ないのが決め手。振り分けない場合も後からsourceを足したいときのためにpictureで書いとく。

<picture>
    <source srcset="https://placehold.jp/800x1200.png" media="(max-width: 767.98px)">
    <img src="https://placehold.jp/980x560.png" alt="" />
</picture>

いわゆる本文内はfigure。リンクを付けたい場合はこんな感じ。

<figure>
    <a href=""><img src="https://placehold.jp/980x560.png" alt="" /></a>
    <figcaption><a href="">aaaa</a></figcaption>
</figure>

img自体は使ってるけど、直貼りすることは少なくなった。タグが増えることになるけど棲み分けがわかりやすくなった感じがある。

CSS

/* @acab/reset.css  */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}
body{
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    color: #111;
}

@media (pointer: fine){}
@media screen and (min-width: 1024px){}
@media screen and (max-width: 1023.98px){}
@media screen and (min-width: 768px){
    .onlySP{ display: none;}
}
@media screen and (max-width: 767.98px){
    .onlyPC{ display: none;}
}

cssのリセットは必須。CDNとか別ファイルで読むよりはベタ打ちしちゃったほうがいいかなって思ったり。normalize.cssが好みだけどちょっと古くなったので違うのをやってみてる。

色指定は基本的に、#000やら#fffは使わずに、#111とか#fafafaとかちょっとずらす。真っ黒、真っ白は目が痛い。存外落ち着いた感じになるし、比較がなければ意外とわからない。

:hoverを使う際は@mediaでPCに限定する。スマホとかタブレットとかだと:hover解除は他の領域をタップしないといけないわけで、例えば:hover時に要素を半透明にした場合、何だこれって感じになる。マウスがあるから生きる装飾なので、だから限定しましょうという考え。

レスポンシブの区分けは.98のアレをやる。元々不便は感じてなかったけど紹介記事を読む限りやっておいた方がいいんじゃないかなと思った。CSSで決めたbreakpointに合わせてhtmlやjs上の切り替えもやっていく。

font-familyは好みといえば好み、webフォントは極力使わないのが最近のテーマ。webフォントは重いから時間差で置き換わるのはダルいし、置き換わるまで文字が表示されないケースもある。見出しとか特設ページとか、限定的な使用に留めてる。で、既存フォントは環境で変わるわけだけど、そこまで厳密に統一する必要はないと思ってる。閲覧環境の選択肢が多い状況でガチガチにするほうが変なのではと。「問題なく閲覧できる」が目指すべき形じゃないかなと思う。

昨年末辺りから文字の初期サイズを16pxに変更。サイズ指定はremでやってるので、以下の感じに展開する。

font-size: .75rem; /* 12px */
font-size: .875rem; /* 14px */
font-size: 1rem; /* 16px */
font-size: 1.25rem; /* 20px */
font-size: 1.5rem; /* 24px */
font-size: 1.75rem; /* 28px */
font-size: 2rem; /* 32px */

js（jQuery）

$(function(){
    //ページ内リンク
    $('a[href^="#"]').not('a.notscroll').click(function(){
        var speed = 500;
        var headerHeight = 0;
        if(window.matchMedia('(max-width:767.98px)').matches){
            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}, speed, "swing");
        return false;
    });
    //レスポンシブ切り替え
    $(window).on('load resize', function(){
        if(window.matchMedia('(max-width:1023.98px)').matches){
        }else{
        }
    })

必ず使ってるのはこの2つ。

ページ内移動ということをわかりやすくするためにスムーススクロールを導入。加えて、ヘッダーを固定表示してる状態でページ内リンクに飛ぶとヘッダーと被ってしまう点を解消する（上記はスマホ表示時にheaderの高さ分を調整する内容）。

レスポンシブの切り替えはブラウザ幅の値で行ってる。幅の取得は色々あるけど、css、htmlでの切り替えタイミングと合わせるためにこの書き方。PCだとスクロールバーの幅のことがあったりするのでちゃんと選ばないと面倒くさいことになる。

ちょっと考えるのがこれ。

【jQuery】ページ遷移後にスムーススクロールする | Recooord | Web制作で扱うコーディングスニペットを紹介

別ページのアンカーリンクをクリックした際に、特定の要素にパッと遷移するのではなく、別ページのページ上部から特定の要素まで、スムーススクロールする方法について紹介

外部から来た際にハッシュタグがあったら、ということで。

ヘッダーを固定にしてる場合、通常の動作だとブラウザ上部に該当idの要素が来るのでヘッダーと被ってしまう。それを良しとするところが多いのだけど個人的に気持ち悪い。飛んできて、該当箇所にスクロールさせることで「このページのこの辺りにありますよ」を見せるのは良さげな気がしなくもないんだけど、表示位置の調整ができたらそれで良い気もする。

スクロール動作をさせない場合はこんな感じ。

    $(window).on('load',function(){
        const hash = location.hash;
        if(hash){
            setTimeout(function(){
                var headerHeight = $('header').innerHeight();
                var target = $(hash == "#" || hash == "" ? 'html' : hash);
                var position = target.offset().top - headerHeight;
                $("html, body").scrollTop(position);
            });
        }
    })

アニメーションさせなくていいと思う。

ページのスクロール禁止ギミック

スマホ表示時のメニューとか、ブラウザいっぱいに表示するポップアップとか、ページ自体がスクロールすると不便な状況がある。その際の対策はcssとjsで構築する。

body.scroll-lock{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom:0px;
}

$(function(){
    function bodyScrollLock(){
        var scrollHeight = window.pageYOffset;
        $('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','');
    }
    //表示・非表示の切り替え
    $('#btn').on('click',function(){
        bodyScrollLock();
        $('#target').fadeToggle();
    })
    //非表示
    $('#btn_close').on('click',function(){
        bodyScrollUnlock();
        $('#target').fadeOut();
    })

割と使用頻度が多いので関数化したほうが便利。

発火の度にスイッチする内容と、解除のみの内容があれば賄い切れる。

iframeのレスポンシブ化

iOSでのiframe挙動のことがあるので最適解は決まってる感じ。

<div class="youtube">【埋め込みタグ】</div>

.youtube{
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    position: relative;
}
.youtube iframe{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}

padding-topで縦横比を指定する。

応用で、任意の比率でgoogleマップを埋め込んだりもできる。まあマップは比率を固定する必要はあんまりないと思うけど。