yutaide’s gists

yutaide / index.html

Created April 18, 2019 08:34

bs隙間系1

	<div class="container" style="background-color: red;"> <!-- .container背景:赤 -->
	<div class="row" style="background-color: green;"> <!-- .row背景:緑 -->
	<div class="col-sm-4" style="background-color: blue;"> <!-- .col背景1:青 -->
	<img src="./images/img1.jpg">
	</div>
	<div class="col-sm-4" style="background-color: yellow;"> <!-- .col背景2:黄 -->
	<img src="./images/img4.jpg">
	</div>
	<div class="col-sm-4" style="background-color: purple;"> <!-- .col背景3:紫 -->
	<img src="./images/img5.jpg">

yutaide / pattern4.html

Created April 16, 2019 08:57

card-p4

	<!-- 4.カードグループ
	****************************************************************************************************
	<div class="card-group"></div>内にグループ化したいカード群を入れるだけ。
	****************************************************************************************************
	-->
	<div class="card-group mb-3">
	<div class="card" style="width: 18rem">
	<img src="images/img1.jpg" class="card-img-top">
	<div class="card-body">
	<h5 class="card-title">Card Title</h5>

yutaide / pattern3.html

Created April 16, 2019 08:51

card-p3

	<!-- 3.画像が左パターン
	****************************************************************************************************
	Bootstrapのグリッドシステムって、container無しでも使えるんですね。
	style="max-width: 540px"でカードの最大幅を指定しています。指定無しの場合は画面いっぱいに広がります。
	my-autoで画像を縦方向に中央寄せしています。
	****************************************************************************************************
	-->

	<div class="card mb-3" style="max-width: 540px">
	<div class="row no-gutters">

yutaide / pattern2.html

Created April 16, 2019 08:44

card-p2

	<!-- 2.画像が下パターン
	****************************************************************************************************
	<img>を下に書いただけです。
	****************************************************************************************************
	-->

	<div class="card mb-3" style="width: 18rem">
	<div class="card-body">
	<h5 class="card-title">Card Title</h5>
	<p>ここに写真の説明などを記載します。これは例えば作品集の一部を写真で示しておいて、下のリンクから作品集ページに飛んでもらうような仕掛けを作ることができます。</p>

yutaide / pattern1.html

Last active April 16, 2019 08:41

card-p1

	<!-- 1.画像が上パターン
	****************************************************************************************************
	これが基本パターンです。
	style="width: 18rem"で幅を指定していますが、指定無しの場合は画面いっぱいに広がります。
	****************************************************************************************************
	-->
	<div class="card my-3" style="width: 18rem">
	<img src="images/img1.jpg" class="card-img-top">
	<div class="card-body">
	<h5 class="card-title">Card Title</h5>

yutaide / index.html

Last active April 11, 2019 12:22

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">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
	</style>
	</head>

yutaide / magnifier.html

Last active April 9, 2019 06:17

magnifierで画像拡大

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="../Magnifier.js-master/magnifier.css"><!--Magnifier-->
	<title></title>
	</head>
	<style>

yutaide / scroll0408.html

Created April 8, 2019 07:03

jQueryボタンを押すと指定位置に移動

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<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>

yutaide / index.html

Last active April 7, 2019 08:55

jQuery特定要素までスクロールしたらメッセージを表示する

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<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></title>
	</head>

yutaide / style.css

Created April 4, 2019 13:06

animateの基本css