目次

    中心から外に線が伸びる(下部):

    CSS のscale を使って、hoverをした時に線をX(横)方向に延ばす。
    位置は絶対配置position:absolute; で指定する。

    HTMLの書き方:

    • head終了タグ直前に自作のCSSを読み込みます。

    <link rel="stylesheet" type="text/css" href="css/5-3-1.css">

    </head>

    • body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

    <ul class="gnavi">

    <li class="current"><a href="#">Home</a></li><!--現在地にはcurrentクラスを付ける-->

    <li><a href="#">About</a></li>

    <li><a href="#">Service</a></li>

    <li><a href="#">Contact</a></li>

    </ul>

    自作のCSS内の書き方:

    /*==================================================

    共通 横並びのための設定
    ===================================*/
    
    .gnavi{
        display: flex;
        flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
        margin:0 0 50px 0;
        list-style: none;
    }
    
    .gnavi li a{
        display: block;
        padding:10px 30px;
        text-decoration: none;
        color: #333;
    }
    
    .gnavi li{
        margin-bottom:20px;
    }
    
    /*==================================================
     5-3-1 中心から外に線が伸びる(下部)
    ===================================*/
    
    .gnavi li a{
        /*線の基点とするためrelativeを指定*/
    	position: relative;
    }
    
    .gnavi li.current a,
    .gnavi li a:hover{
    	color:#0481A2;
    }
    
    .gnavi li a::after {
        content: '';
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom: 0;
        left: 10%;
        /*線の形状*/
        width: 80%;
        height: 2px;
        background:#0481A2;
        /*アニメーションの指定*/
        transition: all .3s;
        transform: scale(0, 1);/*X方向0、Y方向1*/
        transform-origin: center top;/*上部中央基点*/
    }
    
    /*現在地とhoverの設定*/
    .gnavi li.current a::after,
    .gnavi li a:hover::after {
        transform: scale(1, 1);/*X方向にスケール拡大*/
    }

    左から右に背景が伸びる

    CSS を使って、hover したときに要素の横幅・縦幅・不透明度を変更する。

    自作のCSS内の書き方:

    /*==================================================
    共通 横並びのための設定
    ===================================*/
    
    .gnavi{
        display: flex;
        flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
        margin:0 0 50px 0;
        list-style: none;
    }
    
    .gnavi li a{
        display: block;
        padding:10px 30px;
        text-decoration: none;
        color: #333;
    }
    
    .gnavi li{
        margin-bottom:20px;
    }
    
    /*==================================================
     5-3-5 左から右に背景が伸びる
    ===================================*/
    
    /*背景の設定*/
    
    .gnavi li a{
        /*背景色の基点とするためrelativeを指定*/
    	position: relative;
    }
    
    .gnavi li a::after {
    	content: '';
        /*絶対配置で線の位置を決める*/
    	position: absolute;
    	z-index: -1;
    	bottom: 0;
    	left: 0;
        /*背景の形状*/
    	width: 0;
    	height:100%;
    	background:#0481A2;
        /*アニメーションの指定*/
    	transition:all .5s;
    	opacity: 0;/*はじめは透過0*/
    }
    
    /*現在地とhoverの設定*/
    .gnavi li.current a::after,
    .gnavi li a:hover::after {
        /*背景の形状*/
    	width: 100%;/*横幅を伸ばす*/
    	opacity: 1;/*不透明に*/
    }
    
    .gnavi li.current a,
    .gnavi li a:hover{
      	color: #fff;
    }

    テキストが入れ替わる

    CSS を使い、絶対配置で中央寄せにした上下のテキストの下部分をoverflow:hidden; で隠す。

    hoverをしたらtransform を使ってY方向にテキストを移動させて出現させる。


    自作のCSS内の書き方:

    /*==================================================
    共通 横並びのための設定
    ===================================*/
    
    .gnavi{
        display: flex;
        flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
        margin:0 0 50px 0;
        list-style: none;
    }
    
    .gnavi li a{
        display: block;
        text-decoration: none;
        color: #333;
    }
    
    .gnavi li{
        margin-bottom:20px;
    }
    
    /*==================================================
     5-3-9 テキストが入れ替わる
    ===================================*/
    
    
    .gnavi li a{
        /*テキストの基点とするためrelativeを指定*/
    	position: relative;
        /*はみ出る要素を隠す*/
    	overflow: hidden;
    	padding:10px 60px;
    }
    
    .gnavi li span{
        /*絶対配置でテキストの位置を決める*/
    	position: absolute;
    	left: 50%;
    	top:0;
        /*アニメーションの指定*/
    	transition: all .5s;
    	transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/
      /*ブロック要素にして透過なし、テキスト折り返しなし*/  
    	display: block;
    	opacity:1;
    	white-space: nowrap;
    }
    
    /*差し替わるテキストの設定*/
    .gnavi li span:nth-child(2){
    	opacity:0;/*透過0に*/
        transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
    }
    
    /*hoverするとテキストが入れ替わる設定*/
    .gnavi li:hover span:nth-child(1){
    	opacity:0;/*透過0に*/
        transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
    }
    
    .gnavi li:hover span:nth-child(2){
    	opacity:1;/*不透明に*/
    	transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
    }


    線が伸びて枠線になる

    CSS で<li>と<span>の疑似要素(before とafter)に縦横幅を0 にした線を設定する。

    hover すると疑似要素の横幅・縦幅が100% に伸びて線が表示される。

    線が伸びるタイミングはtransition-delay で少しづつ遅らせる

    自作のCSS内の書き方:

    /*==================================================
    共通 横並びのための設定
    ===================================*/
    
    .gnavi{
        display: flex;
        flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
        margin:0 0 50px 0;
        list-style: none;
    }
    
    .gnavi li a{
        display: block;
        padding:10px 30px;
        text-decoration: none;
        color: #333;
    }
    
    /*==================================================
     5-3-10 線が伸びて枠線になる
    ===================================*/
    
    .gnavi li{
        /*線の基点とするためrelativeを指定*/
      position: relative;
        margin:0 10px;
    }
    
    /*線の基点位置*/
    .gnavi li::before,
    .gnavi li::after{
        content:"";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        background:#0481A2;
        /*線の形状*/
        width: 0;
        height:2px;
        /*アニメーションの指定*/
        transition: all 0.2s linear;
    }
    
    .gnavi li::before{
      right: 0;
      bottom: 0;
    }
    
    .gnavi li::after{
      left: 0;
      top: 0;
    }
    
    /*線の基点位置2 spanタグ*/
    
    .gnavi li span{
        display: block;
    }
    
    .gnavi li span::before,
    .gnavi li span::after{
      content:"";
        /*絶対配置で線の位置を決める*/
      position: absolute;
      background: #0481A2;
        /*線の形状*/
      width:2px;
      height:0;
    /*アニメーションの指定*/
      transition: all 0.1s linear;
    }
    
    .gnavi li span::before{
      left: 0;
      bottom: 0;
    }
    
    .gnavi li span::after{
      right: 0;
      top: 0;
    }
    
    /*現在地とhoverした際の線の変化*/
    .gnavi li.current::before,
    .gnavi li.current::after,
    .gnavi li:hover::before,
    .gnavi li:hover::after{
      width: 100%;
    }
    
    .gnavi li:hover::after{
      transition-delay: 0s;/*すぐ線を出現させる*/
    }
    
    .gnavi li:hover::before{
      transition-delay: 0.3s;/*線の出現を0.3秒遅らせる*/
    }
    
    .gnavi li.current span::before,
    .gnavi li.current span::after,
    .gnavi li:hover span::before,
    .gnavi li:hover span::after{
      height: 100%;
    }
    
    .gnavi li:hover span::before{
      transition-delay: 0.5s;/*線の出現を0.5秒遅らせる*/
    }
    
    .gnavi li:hover span::after{
      transition-delay: 0.2s;/*線の出現を0.2秒遅らせる*/
    }

    中心から外に線が伸びる(中央):

    CSS のscale を使って、hoverをした時に線をX(横)方向に延ばす。
    位置は絶対配置position:absolute; で指定する。

    自作のCSS内の書き方:
    /*==================================================
    共通 横並びのための設定
    ===================================*/
    
    .gnavi{
        display: flex;
        flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
        margin:0 0 50px 0;
        list-style: none;
    }
    
    .gnavi li a{
        display: block;
        padding:10px 30px;
        text-decoration: none;
        color: #333;
    }
    
    .gnavi li{
        margin-bottom:20px;
    }
    
    /*==================================================
     5-3-2 中心から外に線が伸びる(中央)
    ===================================*/
    .gnavi li a{
        /*線の基点とするためrelativeを指定*/
    	position: relative;
    }
    
    .gnavi li a::after {
        content: '';
        /*絶対配置で線の位置を決める*/
        position: absolute;
        top:50%;
        left: 10%;
        /*線の形状*/
        width: 80%;
        height: 1px;
        background: #666;
        /*アニメーションの指定*/
        transition: all .3s;
        transform: scale(0, 1);/*X方向0、Y方向1*/
        transform-origin: center top;/*上部中央基点*/
    }
    
    /*現在地とhoverの設定*/
    .gnavi li.current a::after,
    .gnavi li a:hover::after {
        transform: scale(1, 1);/*X方向にスケール拡大*/
    }

    円が線に変化:

    CSS のscale を使い、hover すると円の形になっていた線をX(横)方向にのばす。位置は絶対配置position:absolute; で指定する。

    自作のCSS内の書き方:
    /*==================================================
    共通 横並びのための設定
    ===================================*/
    
    .gnavi{
        display: flex;
        flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
        margin:0 0 50px 0;
        list-style: none;
    }
    
    .gnavi li a{
        display: block;
        padding:10px 30px;
        text-decoration: none;
        color: #333;
    }
    
    .gnavi li{
        margin-bottom:20px;
    }
    
    /*==================================================
     5-3-8 円が線に変化
    ===================================*/
    
    
    .gnavi li a{
        /*円の基点とするためrelativeを指定*/
    	position: relative;
    }
    
    .gnavi li.current a,
    .gnavi li a:hover{
    	color:#0481A2;
    }
    
    .gnavi li a::after {
        content: '';
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom: 0;
        left: 0;
        /*線になる丸の形状*/
        width: 100%;
        height: 5px;
        border-radius: 50%;
        background:#0481A2;
        /*アニメーションの指定*/
        transition: all .3s;
        transform: scale(0.04, 1);/*X方向0.04、Y方向1*/
        transform-origin:center bottom;/*中央下部基点*/
    }
    
    /*現在地とhoverの設定*/
    .gnavi li.current a::after,
    .gnavi li a:hover::after {
        height: 2px;/*縦幅を変化*/
        border-radius: 0;/*丸みをなくす*/    
        transform: scale(0.8, 1);/*X方向0.8、Y方向1にスケール拡大*/
    }



    PREV
    2023.06.12
    Open AIのAPIについて調べてみる
    NEXT
    2023.07.07
    画像生成AIラボ活動レポート vol.1