【jQuery】文字サイズを変更する

Prev Next

チュートリアルメニュー

【jQuery】文字サイズの変更

文字サイズの変更: アイコンクリックで全体の文字サイズを切り替えることができるインターフェイスを作成します。

解説

コンテンツのつくりかた

ボタンで文字サイズを選択する
サイズを変更する

HTML

ここには、HTMLのコードを入れる

CSS

ここには、CSSのコードを入れる

CSS

ここには、CSSのコードを入れる

コード

HTML



    <ul>
        <li><a href="#">S</a></li>
        <li><a href="#">M</a></li>
        <li><a href="#">L</a></li>
    </ul>

CSS

/*文字サイズを変更*/
.font-size_display{
    width:96%;
    height:auto;
    min-height:100px;
    background:#fff;
    margin:0 auto;
    position:relative;
}
.font-size_display ul{
    display:flex;
    flex-direction:row;
    width:300px;
    margin:0;
    padding:1em;
    background:#C8714B;
    border-radius:10px;
    transform:translate(-50%, -50%);
    position:absolute;
    top:50%;
    left:50%;
}
.font-size_display ul li{
    width:30%;
    min-width:50px;
    background:#FBD9BF;
    border-radius:10px;
    margin:0 1em;
    text-align:center;
}
.font-size_display ul li:hover{
    background:#470000;
    box-shadow:1px 1px 2px #000;
}
.font-size_display ul li a{
    display:block;
    color:#470000;
}
.font-size_display ul li a:hover{
    color:#E5DECA;
}
.fontSmall{
    font-size:1.0rem;
}
.fontMedium{
    font-size:1.6rem;
}
.fontLarge{
    font-size:2.0rem;
}