Skip to content

Instantly share code, notes, and snippets.

@yutaide
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">
<!-- 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>
<!-- 3.画像が左パターン
****************************************************************************************************
Bootstrapのグリッドシステムって、container無しでも使えるんですね。
style="max-width: 540px"でカードの最大幅を指定しています。指定無しの場合は画面いっぱいに広がります。
my-autoで画像を縦方向に中央寄せしています。
****************************************************************************************************
-->
<div class="card mb-3" style="max-width: 540px">
<div class="row no-gutters">
<!-- 2.画像が下パターン
****************************************************************************************************
<img>を下に書いただけです。
****************************************************************************************************
-->
<div class="card mb-3" style="width: 18rem">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p>ここに写真の説明などを記載します。これは例えば作品集の一部を写真で示しておいて、下のリンクから作品集ページに飛んでもらうような仕掛けを作ることができます。</p>
@yutaide
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
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
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
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
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
yutaide / style.css
Created April 4, 2019 13:06
animateの基本css
#mentaiko{
position: fixed;
background:orange;
}