yutaide’s gists

yutaide / index.html

Created April 4, 2019 13:05

animateの基本html

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="./style.css">
	<title></title>
	</head>
	<body>

yutaide / Navbar.html

Created April 2, 2019 22:35

Navbar全体コード

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="./style.css"> <!-- 今回は使用していません -->
	<title></title>
	</head>
	<body>

yutaide / navbar.html

Last active April 2, 2019 22:36

navbar-メニュー本体

	<div class="collapse navbar-collapse" id="responsiveMenu">
	<ul class="navbar-nav mr-auto">
	<li class="nav-item">
	<a class="nav-link" href="./index.html">Home</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="./Company.html">企業概要</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="./Product.html">プロダクト</a>

yutaide / navbar-official-sample.html

Created April 2, 2019 21:59

navbar-sample

	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav mr-auto">
	<li class="nav-item active">
	<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

yutaide / style.css

Created April 2, 2019 07:17

flexboxのorderによるカラム順指定(css)

	/* 要素の高さ */
	.MainContent, .Sidebar1, .Sidebar2{
	height: 100px;
	}

	/* 要素の色 */
	.MainContent{
	background: khaki;
	}
	.Sidebar1{

yutaide / index.html

Created April 2, 2019 07:17

flexboxのorderによるカラム順指定(html)

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="./style.css">
	<title>Flexbox</title>
	</head>
	<body>
	<div class="flex">

yutaide / accordion.html

Created April 1, 2019 16:05

accordion(コピペ用)

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="./style.css">
	<title>Bootstrap</title>
	</head>
	<body>

yutaide / accordion.html

Created April 1, 2019 14:39

accordion(1つ目のcardクラス)

	<div class="card">
	<div class="card-header" id="heading1">
	<h2 class="mb-0">
	<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">アコーディオン表示その1</button>
	</h2>
	</div>

	<div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#accordionExample">
	<div class="card-body">
	カードの中身1

yutaide / accordion.html

Created April 1, 2019 14:24

accordion箇所

	<div class="accordion" id="accordionExample">
	<div class="card">
	<div class="card-header" id="heading1">
	<h2 class="mb-0">
	<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">アコーディオン表示その1</button>
	</h2>
	</div>

	<div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#accordionExample">
	<div class="card-body">

yutaide / index.html

Created March 30, 2019 09:44

Bootstrapによるレスポンシブ対応の例(最終HTML)

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrapによるレスポンシブ対応の例</title>
	</head>
	<body>