【掲載コードの使い方】CSSについて

CSSファイルの作成と配置

① style.cssを作成
② index.htmlと同じ階層に配置
③ index.htmlの<head>内に、<link rel="stylesheet" href="style.css">を記述
④ style.cssに、掲載CSSコードをコピペして保存

うまく機能しない場合は、「ファイル名」「ファイルの配置」「linkタグの記述」が正しいかを確認してください。

style.css

@charset "utf-8";

/* @charsetは必ず一行目に記述し、削除しないよう注意。 */
/* 以下にCSSのコードを記載 */

【活用例】ボタン_半透明に変化を使う場合

@charset "utf-8";

/* サイト共通設定 */
:root{
    --primary-color: #03588C;
    --primaty-opacity-color: 0.8;
}
html{
    font-size: 62.5%;
}
.demo-wrap {
    display: flex;
    justify-content: center;
    padding: 50px;
}
/* ボタン共通設定 */
.btn {
    display:inline-block;
    padding: 12px 30px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    border: 0;
    font-size: 1.6rem;
    text-decoration: none;
    color: #ffffff;
    transition: all .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.basic {
    background: var(--primary-color);
}
/* 変化 */
.basic_op:hover, .basic_op:focus {
    opacity: var(--primaty-opacity-color);
}