Dev log-42,youtube capicat練習#2
243447 ワード
学習の内容
YouTube練習-基本設定
bodyタグ内の内容はブラウザの縮小により破損してはならない・作成名wrapperサブタグmin-width: 1320px適用<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>유튜브 튜토리얼</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>/* Default CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
background-color: #212121;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
button {
background-color: transparent;
border: none;
}
input {
outline: none;
border: none;
}
input:focus {
outline: none;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 1320px;
}
.flex-align-between {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
}
.flex-align-start {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: stretch;
}
.flex-align-end {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
align-content: stretch;
}YouTube実習-YouTube左側エリア
文章が重なる場合は、内容にinline要素があるかどうかをチェックし、特に
aタグを使用しているのでinline-block属性を設定すればよい改行属性を設定する場合、
word-break: keep-all属性を設定すると、改行属性は単語に基づいて有効になります.word-breakテキスト改行に関する属性であるkeep-all行為単位を入れ替える属性である<body>
<div id="wrapper">
<nav id="youtube-left-nav">
<div id="youtube-left-content">
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-1"></i>
<span>홈</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-2"></i>
<span>탐색</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-3"></i>
<span>구독</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>보관함</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-5"></i>
<span>시청 기록</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<div class="txt-wrap">
<p>로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할 수 있습니다.</p>
<a href="#" class="btn-login">로그인</a>
</div>
</div>
</div>
<div class="nav-section">
<div class="nav-title-wrap">
<h2>인기 YOUTUBE</h2>
</div>
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-6"></i>
<span>음악</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-7"></i>
<span>스포츠</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-8"></i>
<span>게임</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-9"></i>
<span>영화</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-10"></i>
<span>뉴스</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-11"></i>
<span>실시간</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-12"></i>
<span>학습</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-13"></i>
<span>360° 동영상</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>채널 탐색</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-title-wrap">
<h2>YOUTBUE 더보기</h2>
</div>
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-6"></i>
<span>YouTube Premium</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-7"></i>
<span>실시간</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>설정</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>신고 기록</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>고객센터</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>의견 보내기</span>
</a>
</li>
</ul>
</div>
</div>
<footer id="youtube-footer">
<div class="txt-wrap">
<a href="#">정보</a>
<a href="#">보도자료</a>
<a href="#">저작권</a>
<a href="#">문의하기</a>
<a href="#">크리에이터</a>
<a href="#">광고</a>
<a href="#">개발자</a>
</div>
<div class="txt-wrap">
<a href="#">약관</a>
<a href="#">개인정보처리방침</a>
<a href="#">정책 및 안전</a>
<a href="#">Youtube 자동의 원리</a>
<a href="#">새로운 기능 테스트하기</a>
</div>
<div class="txt-wrap">
<p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you</p>
</div>
</footer>
</div>
</nav>
</div>
</body>#youtube-left-nav {
overflow-y: auto;
overflow-x: hidden;
position: fixed;
width: 240px;
background-color: #212121;
top: 56px;
left: 0;
bottom: 0;
}
#youtube-left-content {
position: absolute;
width: 225px;
height: 100%;
}
#youtube-left-content .nav-section {
padding: 8px 0;
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}
#youtube-left-content .nav-section .nav-title-wrap {
padding: 8px 24px;
}
#youtube-left-content .nav-section .nav-title-wrap h2 {
color: #aaaaaa;
font-size: 15px;
font-weight: bold;
}
#youtube-left-content .nav-section .nav-body li a {
height: 40px;
padding: 0 24px;
}
#youtube-left-content .nav-section .nav-body li .icon {
display: inline-block;
width: 24px;
height: 24px;
background-color: #ffffff;
margin-right: 24px;
}
#youtube-left-content .nav-section .nav-body li span {
font-size: 13px;
color: #ffffff;
}
#youtube-left-content .nav-section .nav-body .txt-wrap {
padding: 0 24px;
}
#youtube-left-content .nav-section .nav-body .txt-wrap p {
color: #ffffff;
font-weight: 400;
font-size: 13px;
}
#youtube-left-content .nav-section .nav-body .txt-wrap .btn-login {
display: inline-block;
border: solid 1px #3ea6ff;
padding: 10px 12px 8px;
font-size: 14px;
color: #3ea6ff;
margin-top: 12px;
}
#youtube-left-content #youtube-footer {
padding-bottom: 150px;
}
#youtube-left-content #youtube-footer .txt-wrap {
padding: 12px 24px 0;
}
#youtube-left-content #youtube-footer .txt-wrap a {
margin-right: 8px;
color: #aaaaaa;
font-size: 12px;
font-weight: 500;
word-break: keep-all;
}
#youtube-left-content #youtube-footer .txt-wrap p {
font-size: 12px;
color: #717171;
font-weight: 400;
}
YouTube実践-YouTubeメインエリア
以下の領域を配置する場合、1行目と2行目のうち
a領域が異なるため、領域を区切る必要がある(aマーク内aマークは含まれない)
前回とは異なり、スクロールバーはスクロールバーの上部領域に含める必要があるため、
position: fixedプロパティを適用するz-indexプロパティを999999に設定し、スクロールバーの上部に配置する<body>
<div id="wrapper">
<main id="youtube-main" role="main">
<div id="youtube-main-content">
<ul class="flex-align-between">
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">1:00</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
넥스트 레벨 팬이라면 퍼가.
</a>
</h3>
<p><a href="channel.html" class="channel-link">유지민상팔자</a></p>
<div class="txt-bottom">
<span class="count">조회수 298만회</span>
<span class="date">1개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">22:41</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
24시간동안 한자로 살기 VS 알파벳으로 살기!! 뭐가 더 유용할까?!
</a>
</h3>
<p><a href="channel.html" class="channel-link">파뿌리</a></p>
<div class="txt-bottom">
<span class="count">조회수 66만회</span>
<span class="date">1일 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">5:11:50</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
나만 듣는 줄 알았지만 사실 모두가 아는 띵곡 팝송들 | PLAYLIST
</a>
</h3>
<p><a href="channel.html" class="channel-link">찐막 JJINMAK</a></p>
<div class="txt-bottom">
<span class="count">조회수 190만회</span>
<span class="date">4개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">15:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
영화계를 침묵시킨 맷 데이먼 아내의 정체
</a>
</h3>
<p><a href="channel.html" class="channel-link">달빛부부</a></p>
<div class="txt-bottom">
<span class="count">조회수 167만회</span>
<span class="date">2일 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">1:00</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
넥스트 레벨 팬이라면 퍼가.
</a>
</h3>
<p><a href="channel.html" class="channel-link">유지민상팔자</a></p>
<div class="txt-bottom">
<span class="count">조회수 298만회</span>
<span class="date">1개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">22:41</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
24시간동안 한자로 살기 VS 알파벳으로 살기!! 뭐가 더 유용할까?!
</a>
</h3>
<p><a href="channel.html" class="channel-link">파뿌리</a></p>
<div class="txt-bottom">
<span class="count">조회수 66만회</span>
<span class="date">1일 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">5:11:50</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
나만 듣는 줄 알았지만 사실 모두가 아는 띵곡 팝송들 | PLAYLIST
</a>
</h3>
<p><a href="channel.html" class="channel-link">찐막 JJINMAK</a></p>
<div class="txt-bottom">
<span class="count">조회수 190만회</span>
<span class="date">4개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">15:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
영화계를 침묵시킨 맷 데이먼 아내의 정체
</a>
</h3>
<p><a href="channel.html" class="channel-link">달빛부부</a></p>
<div class="txt-bottom">
<span class="count">조회수 167만회</span>
<span class="date">2일 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">1:00</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
넥스트 레벨 팬이라면 퍼가.
</a>
</h3>
<p><a href="channel.html" class="channel-link">유지민상팔자</a></p>
<div class="txt-bottom">
<span class="count">조회수 298만회</span>
<span class="date">1개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">22:41</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
24시간동안 한자로 살기 VS 알파벳으로 살기!! 뭐가 더 유용할까?!
</a>
</h3>
<p><a href="channel.html" class="channel-link">파뿌리</a></p>
<div class="txt-bottom">
<span class="count">조회수 66만회</span>
<span class="date">1일 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">5:11:50</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
나만 듣는 줄 알았지만 사실 모두가 아는 띵곡 팝송들 | PLAYLIST
</a>
</h3>
<p><a href="channel.html" class="channel-link">찐막 JJINMAK</a></p>
<div class="txt-bottom">
<span class="count">조회수 190만회</span>
<span class="date">4개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">15:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
영화계를 침묵시킨 맷 데이먼 아내의 정체
</a>
</h3>
<p><a href="channel.html" class="channel-link">달빛부부</a></p>
<div class="txt-bottom">
<span class="count">조회수 167만회</span>
<span class="date">2일 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">1:00</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
넥스트 레벨 팬이라면 퍼가.
</a>
</h3>
<p><a href="channel.html" class="channel-link">유지민상팔자</a></p>
<div class="txt-bottom">
<span class="count">조회수 298만회</span>
<span class="date">1개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">22:41</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
24시간동안 한자로 살기 VS 알파벳으로 살기!! 뭐가 더 유용할까?!
</a>
</h3>
<p><a href="channel.html" class="channel-link">파뿌리</a></p>
<div class="txt-bottom">
<span class="count">조회수 66만회</span>
<span class="date">1일 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">5:11:50</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
나만 듣는 줄 알았지만 사실 모두가 아는 띵곡 팝송들 | PLAYLIST
</a>
</h3>
<p><a href="channel.html" class="channel-link">찐막 JJINMAK</a></p>
<div class="txt-bottom">
<span class="count">조회수 190만회</span>
<span class="date">4개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">15:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
영화계를 침묵시킨 맷 데이먼 아내의 정체
</a>
</h3>
<p><a href="channel.html" class="channel-link">달빛부부</a></p>
<div class="txt-bottom">
<span class="count">조회수 167만회</span>
<span class="date">2일 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">1:00</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
넥스트 레벨 팬이라면 퍼가.
</a>
</h3>
<p><a href="channel.html" class="channel-link">유지민상팔자</a></p>
<div class="txt-bottom">
<span class="count">조회수 298만회</span>
<span class="date">1개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">22:41</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
24시간동안 한자로 살기 VS 알파벳으로 살기!! 뭐가 더 유용할까?!
</a>
</h3>
<p><a href="channel.html" class="channel-link">파뿌리</a></p>
<div class="txt-bottom">
<span class="count">조회수 66만회</span>
<span class="date">1일 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">5:11:50</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
나만 듣는 줄 알았지만 사실 모두가 아는 띵곡 팝송들 | PLAYLIST
</a>
</h3>
<p><a href="channel.html" class="channel-link">찐막 JJINMAK</a></p>
<div class="txt-bottom">
<span class="count">조회수 190만회</span>
<span class="date">4개월 전</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">15:20</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
영화계를 침묵시킨 맷 데이먼 아내의 정체
</a>
</h3>
<p><a href="channel.html" class="channel-link">달빛부부</a></p>
<div class="txt-bottom">
<span class="count">조회수 167만회</span>
<span class="date">2일 전</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</main>
</div>
</body>#youtube-main {
position: absolute;
left: 240px;
top: 56px;
right: 0;
bottom: 0;
background-color: #212121;
}
#youtube-main-content {
width: 100%;
height: 100%;
padding: 24px;
}
#youtube-main-content ul {
align-items: flex-start;
align-content: flex-start;
width: 100%;
height: 100%;
}
#youtube-main-content ul li {
width: 24%;
background-color: #212121;
margin-bottom: 40px;
}
#youtube-main-content ul li .video-thumbnail {
width: 100%;
}
#youtube-main-content ul li .video-thumbnail a {
position: relative;
display: block;
width: 100%;
}
#youtube-main-content ul li .video-thumbnail img {
width: 100%;
}
#youtube-main-content ul li .video-thumbnail .time {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
font-size: 12px;
color: #ffffff;
padding: 3px 4px;
bottom: 4px;
right: 4px;
}
#youtube-main-content ul li .video-txt-wrap {
align-items: flex-start;
margin-top: 12px;
}
#youtube-main-content ul li .video-txt-wrap .image-link {
display: block;
width: 36px;
height: 36px;
margin-right: 12px;
}
#youtube-main-content ul li .video-txt-wrap .image-link img {
width: 100%;
height: 100%;
border-radius: 50%;
}
#youtube-main-content ul li .video-txt-wrap .txt {
width: calc(100% - 48px);
}
#youtube-main-content ul li .video-txt-wrap .txt h3 {
font-size: 15px;
margin-bottom: 6px;
}
#youtube-main-content ul li .video-txt-wrap .txt h3 .title-link {
color: #ffffff;
}
#youtube-main-content ul li .video-txt-wrap .txt p {
font-size: 12px;
}
#youtube-main-content ul li .video-txt-wrap .txt p .channel-link {
color: #aaaaaa;
}
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .count,
#youtube-main-content ul li .video-txt-wrap .txt .txt-bottom .date {
font-size: 12px;
color: #aaaaaa;
}
学習中の難点や未解決の問題
解決策
学習の心得.
Reference
この問題について(Dev log-42,youtube capicat練習#2), 我々は、より多くの情報をここで見つけました https://velog.io/@kangsanz/개발-일지-42テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol