CSS

カテゴリーページ

中心から外に線が伸びる（中央）

HTMLの書き方

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

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

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-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方向にスケール拡大*/
}

投稿日：2022年07月21日

中心から外に線が伸びる（下部）

カテゴリー：テキストナビゲーション

HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/9-2-1.css">

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方向にスケール拡大*/
}

投稿日：2022年07月21日

矢印が縮む

カテゴリー：ボタン

HTMLの書き方

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

<link rel="stylesheet" type="text/css" href="css/7-1-48.css">

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btnarrow6">7-1-48 矢印が縮む</a>

CSSの書き方

/*矢印が縮む*/
.btnarrow6{
	/*矢印の基点とするためrelativeを指定*/
	position: relative;

	/*ボタンの形状*/
	background:#333;
	padding: 5px 60px 5px 30px;
	display: inline-block;
	text-align: center;
	transition: all .2s linear;
	color:#fff;
	text-decoration: none;
	border:transparent 2px solid;
	outline: none;
}

/*hoverした際のボタンの形状*/
.btnarrow6:hover{
	background:#fff;
	color:#333;
	border-color:#333;
}

/*矢印と線の形状*/
.btnarrow6:before{
	content:"";

	/*絶対配置で線の位置を決める*/
	position: absolute;
	top:50%;
	right:20px;

	/*線の形状*/
	width:20px;
	height:1px;
	background:#fff;
}

.btnarrow6::after {
	content: '';

	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 40%;
	right: 12px;

	/*矢印の形状*/
	border: 4px solid transparent;
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-left-color: #fff;

	/*アニメーションの指定*/
	transition: all .2s linear;
}

/*hoverした際の矢印の形状*/
.btnarrow6:hover::before{
	background:#333;
	right:25px;
}

.btnarrow6:hover::after{
	border-left-color: #333;
	right: 20px;
}

投稿日：2022年07月15日

矢印が右に移動して背景がつく

カテゴリー：ボタン

HTMLの書き方

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

<link rel="stylesheet" type="text/css" href="css/7-1-47.css">

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btnarrow5">7-1-47 矢印が右に移動して背景がつく</a>

CSSの書き方

/*矢印が右に移動して背景がつく*/
.btnarrow5{
	/*矢印の基点とするためrelativeを指定*/
	position: relative;

	/*ボタンの形状*/
	border: 1px solid #555;
	padding: 8px 30px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	color: #333;
	outline: none;

	/*アニメーションの指定*/
	transition: all .2s linear;
}

.btnarrow5:hover{
	background:#333;
	color:#fff;
}

/*矢印と下線の形状*/
.btnarrow5::before{
	content:"";

	/*絶対配置で下線の位置を決める*/
	position: absolute;
	top:50%;
	right:-26px;

	/*下線の形状*/
	width:40px;
	height:1px;
	background:#333;

	/*アニメーションの指定*/
	transition: all .2s linear;
}

.btnarrow5::after{
	content:"";

	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 20%;
	right: -21px;

	/*矢印の形状*/
	width:1px;
	height:12px;
	background:#333;
	transform:skewX(45deg);

	/*アニメーションの指定*/
	transition: all .2s linear;
}

/*hoverした際の移動*/
.btnarrow5:hover::before{
	right:-30px;
}

.btnarrow5:hover::after{
	right:-25px;
}

投稿日：2022年07月15日

矢印が右に移動する

カテゴリー：ボタン

HTMLの書き方

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

<link rel="stylesheet" type="text/css" href="css/7-1-46.css">

body内のボタンを表示させたい場所に以下のHTMLを記載します。

<a href="#" class="btnarrow4">7-1-46 矢印が右に移動する</a>

CSSの書き方

/*矢印が右に移動する*/
.btnarrow4{
	/*矢印と下線の基点とするためrelativeを指定*/
	position: relative;

	/*形状*/
	display: inline-block;
	padding: 0 20px;
	color: #333;
	text-decoration: none;
	outline: none;
}

/*矢印と下線の形状*/
.btnarrow4::before{
	content: '';

	/*絶対配置で下線の位置を決める*/
	position: absolute;
	bottom:-8px;
	left:15%;

	/*下線の形状*/    
	width: 85%;
	height: 1px;
	background:#333;

	/*アニメーションの指定*/
	transition: all .3s;
}

.btnarrow4::after{
	content: '';

	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	bottom:-3px;
	right:0;

	/*矢印の形状*/    
	width: 15px;
	height:1px;
	background:#333;
	transform: rotate(35deg);

	/*アニメーションの指定*/
	transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
	left:20%;
}

.btnarrow4:hover::after{
	right:-5%;
}

投稿日：2022年07月15日

カテゴリーページ

中心から外に線が伸びる（中央）

中心から外に線が伸びる（下部）

矢印が縮む

矢印が右に移動して背景がつく

矢印が右に移動する

アーカイブ