Googleフォントとサニタイジングcss

Hell Worldと書いてみました

この画面のHTML code


        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
            <title>CSS </title>
        1   <link rel="preconnect" href="https://fonts.googleapis.com">
        2   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        3   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet"> 
        4   <link rel="stylesheet" href="https://unpkg.com/sanitize.css">
        5   <link rel="stylesheet" href="./style.css">
        </head>
        <body>

                         ※　1から3 がGoogle フォンと
                        ※　4は、sanitize.cssこれらを上位に配置する
　　　
　　　　

この画面のstyle.cssの code

　　　　　　　

    　@charset "utf-8";
            /*
            base css
            */
            body {
                font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
                font-size: 15px;
                line-height: 1.5;
                color: #333;
            }
　　　　

上のcode詳しい説明

@charset "utf-8";
文字エンコーディングをUTF-8に指定します。
/* bace css */
コメント行。コードの説明やメモを書くために使用します。
body
HTMLのbody要素に適用されるスタイルを定義しています。
font-family
フォントファミリーを指定します。最初に指定されたフォントが使用できない場合、次のフォントが使用されます。
font-size
フォントサイズを15pxに指定します。
line-height
行の高さを1.5に設定します。これにより、テキスト行の間に適度なスペースが確保されます。
color
テキストの色を#333に設定します。これは濃い灰色です。
　　　　　 

color: #333; は濃い灰色で、読みやすいテキストカラーとしてよく使用されます。このテキストカラーに合う背景色を選ぶときには、コントラストが十分に確保されることが重要です。以下は、読みやすさを考慮した好ましい背景色の例です：

白: #ffffff

シンプルでクラシックな選択。高いコントラストが確保されます。
css
コードをコピーする
background-color: #ffffff;
薄い灰色: #f7f7f7

やや柔らかい印象を与える背景色。目に優しい選択です。
css
コードをコピーする
background-color: #f7f7f7;
薄いベージュ: #fafafa

温かみのある色で、やわらかな印象を与えます。
css
コードをコピーする
background-color: #fafafa;
クリーム色: #fffff0

やや黄色味がかった色で、優しい感じがします。
css
コードをコピーする
background-color: #fffff0;
これらの背景色は、#333 のテキストカラーと良好なコントラストを提供し、読みやすさを確保します。例えば、以下のようにCSSで設定できます：

css
コードをコピーする
body {
    background-color: #f7f7f7;
    color: #333;
    font-family: "Noto Sans JP", sans-serif, "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
この例では、背景色を薄い灰色に設定しましたが、お好みに応じて他の背景色も試してみてください。