2021.06.22(NAVERニュース4)
131452 ワード
学習の内容
[NAVERエンターテインメントニュース左]
<div id="ent_section_4">
<div class="title_wrap">
<h3>추천 뉴스</h3>
</div>
<ul>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
</ul>
<button type="button" class="btn_more">새로운 뉴스 가져오기</button>
</div>
<div id="ent_section_5">
<div class="title_wrap ent_flex_between">
<h3>오늘의 프로그램</h3>
<a href="#">더보기</a>
</div>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
</ul>
</div>#ent_main .ent_left #ent_section_4 {
padding: 23px 0;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_4 .title_wrap {
/*margin-bottom: 18px;*/
}
#ent_main .ent_left #ent_section_4 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_4 ul li {
padding: 18px 0;
border-bottom: solid 1px #f1f1f1;
}
#ent_main .ent_left #ent_section_4 ul li:last-child {
border-bottom: none;
}
#ent_main .ent_left #ent_section_4 ul li a .ent_info {
width: 528px;
}
#ent_main .ent_left #ent_section_4 ul li a .ent_info h3 {
font-size: 14px;
font-weight: 700;
margin-bottom: 7px;
}
#ent_main .ent_left #ent_section_4 ul li a .ent_info p {
font-size: 12px;
font-weight: 400;
color: #898989;
line-height: 20px;
margin-bottom: 9px;
}
#ent_main .ent_left #ent_section_4 ul li a .ent_info .source {
font-size: 11px;
font-weight: 400;
color: #a7a7a7;
}
#ent_main .ent_left #ent_section_4 ul li a img {
width: 88px;
height: 88px;
border: solid 1px #000000;
}
#ent_main .ent_left #ent_section_4 .btn_more {
display: block;
width: 100%;
height: 40px;
background-color: #ffffff;
line-height: 40px;
text-align: center;
color: #444;
border: solid 1px #e8e8e8;
}
#ent_main .ent_left #ent_section_5 {
padding: 24px 0 14px;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_5 .title_wrap {
margin-bottom: 20px;
}
#ent_main .ent_left #ent_section_5 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_5 .title_wrap a {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_5 ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
#ent_main .ent_left #ent_section_5 ul li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
}
#ent_main .ent_left #ent_section_5 ul li a img {
width: 55px;
height: 55px;
border-radius: 50%;
margin-bottom: 10px;
}
#ent_main .ent_left #ent_section_5 ul li a h4 {
max-width: 55px;
font-size: 12px;
font-weight: 700;
line-height: 16px;
}
<div id="ent_section_6">
<div class="title_wrap ent_flex_between">
<h3>TV프로그램 구독</h3>
<a href="#">더보기</a>
</div>
<ul class="ent_flex_between">
<li>
<a href="#">
<div class="img_wrap">
<img src="https://via.placeholder.com/148x85">
<i class="icon_play"></i>
</div>
<h4>무더위를 식혀줄 골퍼들의 친구 새콤부차 [골프왕] #유료광고포함</h4>
</a>
<a href="#">
<span class="source">TV조선</span>
<span class="program">골프왕</span>
</a>
</li>
<li>
<a href="#">
<div class="img_wrap">
<img src="https://via.placeholder.com/148x85">
<i class="icon_play"></i>
</div>
<h4>무더위를 식혀줄 골퍼들의 친구 새콤부차 [골프왕] #유료광고포함</h4>
</a>
<a href="#">
<span class="source">TV조선</span>
<span class="program">골프왕</span>
</a>
</li>
<li>
<a href="#">
<div class="img_wrap">
<img src="https://via.placeholder.com/148x85">
<i class="icon_play"></i>
</div>
<h4>무더위를 식혀줄 골퍼들의 친구 새콤부차 [골프왕] #유료광고포함</h4>
</a>
<a href="#">
<span class="source">TV조선</span>
<span class="program">골프왕</span>
</a>
</li>
<li>
<a href="#">
<div class="img_wrap">
<img src="https://via.placeholder.com/148x85">
<i class="icon_play"></i>
</div>
<h4>무더위를 식혀줄 골퍼들의 친구 새콤부차 [골프왕] #유료광고포함</h4>
</a>
<a href="#">
<span class="source">TV조선</span>
<span class="program">골프왕</span>
</a>
</li>
</ul>
</div>
<div id="ent_section_4">
<ul>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent_flex_between">
<div class="ent_info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠동아</span>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
</ul>
<button type="button" class="btn_more">새로운 뉴스 가져오기</button>
</div>
<div id="ent_section_7">
<div class="title_wrap ent_flex_between">
<h3>영화계는 지금</h3>
<a href="#">더보기</a>
</div>
<div class="movie_wrap ent_flex_start">
<div class="left">
<a href="">
<img src="https://via.placeholder.com/200x122">
<h4>Title1 Title1 Title1 Title1</h4>
</a>
</div>
<div class="right">
<ul>
<li>
<a href="#">Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1</a>
<span>스타뉴스</span>
</li>
<li>
<a href="#">Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1</a>
<span>스타뉴스</span>
</li>
<li>
<a href="#">Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1</a>
<span>스타뉴스</span>
</li>
<li>
<a href="#">Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1</a>
<span>스타뉴스</span>
</li>
<li>
<a href="#">Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1
Title 1 Title 1 Title 1 Title 1</a>
<span>스타뉴스</span>
</li>
</ul>
</div>
</div>
</div>
<div id="ent_section_8">
<div class="title_wrap ent_flex_between">
<div class="ent_flex_start">
<h3>많이 본 연예정보</h3>
<ul class="ent_flex_start">
<li><a href="#" class="on">연예뉴스</a></li>
<li><a href="#">영상</a></li>
<li><a href="#">뮤직</a></li>
<li><a href="#">V LIVE</a></li>
</ul>
</div>
<a href="#" class="more">더보기</a>
</div>
<ol class="ent_lists">
<li class="ent_flex_start">
<span class="rank">1</span>
<a href="#" class="ent_flex_between">
<div class="ent_info_wrap">
<div class="ent_info_txt">
<h4>Title Title Title Title Title Title Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>텐아시아</span>
</div>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li class="ent_flex_start">
<span class="rank">2</span>
<a href="#" class="ent_flex_between">
<div class="ent_info_wrap">
<div class="ent_info_txt">
<h4>Title Title Title Title Title Title Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>텐아시아</span>
</div>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li class="ent_flex_start">
<span class="rank">3</span>
<a href="#" class="ent_flex_between">
<div class="ent_info_wrap">
<div class="ent_info_txt">
<h4>Title Title Title Title Title Title Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>텐아시아</span>
</div>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li class="ent_flex_start">
<span class="rank">4</span>
<a href="#" class="ent_flex_between">
<div class="ent_info_wrap">
<div class="ent_info_txt">
<h4>Title Title Title Title Title Title Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>텐아시아</span>
</div>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
<li class="ent_flex_start">
<span class="rank">5</span>
<a href="#" class="ent_flex_between">
<div class="ent_info_wrap">
<div class="ent_info_txt">
<h4>Title Title Title Title Title Title Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>텐아시아</span>
</div>
</div>
<img src="https://via.placeholder.com/88x88">
</a>
</li>
</ol>
</div>#ent_main .ent_left #ent_section_6 {
padding: 24px 0;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_6 .title_wrap {
margin-bottom: 17px;
}
#ent_main .ent_left #ent_section_6 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_6 .title_wrap a {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_6 ul li {
width: 148px;
}
#ent_main .ent_left #ent_section_6 ul li .img_wrap {
position: relative;
width: 148px;
height: 85px;
border: solid 1px #000000;
margin-bottom: 10px;
}
#ent_main .ent_left #ent_section_6 ul li .img_wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#ent_main .ent_left #ent_section_6 ul li .img_wrap .icon_play {
position: absolute;
display: block;
width: 28px;
height: 28px;
background-color: grey;
border-radius: 50%;
left: 8px;
bottom: 7px;
}
#ent_main .ent_left #ent_section_6 ul li h4 {
font-size: 12px;
margin-bottom: 8px;
}
#ent_main .ent_left #ent_section_6 ul li span {
font-size: 11px;
color: #141414;
}
#ent_main .ent_left #ent_section_6 ul li .source {
color: #999;
}
#ent_main .ent_left #ent_section_6 ul li .source:after {
display: inline-block;
content: "";
width: 2px;
height: 2px;
background-color: #d3d3d3;
vertical-align: top;
margin: 12px 2px 0 4px;
}
#ent_main .ent_left #ent_section_6 ul li .program:after {
display: inline-block;
content: "";
width: 5px;
height: 5px;
background-color: red;
vertical-align: top;
margin: 10px 2px 0 4px;
}
#ent_main .ent_left #ent_section_7 {
padding: 24px 0 20px;
border-bottom: solid 1px #e4e4e4;
}
#ent_main .ent_left #ent_section_7 .title_wrap {
margin-bottom: 17px;
}
#ent_main .ent_left #ent_section_7 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_7 .title_wrap a {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_7 .movie_wrap {
align-items: stretch;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .left a img {
width: 200px;
height: 122px;
margin-bottom: 11px;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .left a h4 {
font-size: 12px;
font-weight: 700;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right {
width: 412px;
margin-left: 18px;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right ul li {
margin-bottom: 7px;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right ul li:last-child {
margin-bottom: 0;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right ul li a {
display: inline-block;
max-width: 360px;
font-size: 12px;
font-weight: 700;
vertical-align: top;
margin-right: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ent_main .ent_left #ent_section_7 .movie_wrap .right ul li span {
font-size: 10px;
color: #898989;
vertical-align: top;
}
#ent_main .ent_left #ent_section_8 {
padding-top: 24px;
}
#ent_main .ent_left #ent_section_8 .title_wrap div {
align-items: flex-start;
}
#ent_main .ent_left #ent_section_8 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_8 .title_wrap ul {
position: relative;
margin-left: 19px;
top: -3px;
}
#ent_main .ent_left #ent_section_8 .title_wrap ul li a {
font-size: 12px;
color: #181818;
}
#ent_main .ent_left #ent_section_8 .title_wrap ul li a:before {
display: inline-block;
content: "";
width: 1px;
height: 10px;
background-color: #e8e8e8;
margin: 0 10px;
vertical-align: -1px;
}
#ent_main .ent_left #ent_section_8 .title_wrap ul li:first-child a:before {
content: initial;
}
#ent_main .ent_left #ent_section_8 .title_wrap ul li a.on {
font-weight: 700;
color: #e2458f;
border-bottom: solid 1px #e2458f;
}
#ent_main .ent_left #ent_section_8 .title_wrap .more {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_8 .ent_lists li {
padding: 18px 0;
border-bottom: solid 1px #f1f1f1;
}
#ent_main .ent_left #ent_section_8 .ent_lists li .rank {
width: 40px;
text-align: center;
}
#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap .ent_info_txt {
width: 486px;
}
#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap .ent_info_txt h4 {
font-size: 14px;
font-weight: 700;
margin-bottom: 9px;
}
#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap .ent_info_txt p {
font-size: 12px;
font-weight: 400;
color: #898989;
margin-bottom: 8px;
}
#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap .ent_info_txt span {
font-size: 11px;
color: #898989;
}
#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap img {
width: 88px;
height: 88px;
}
<div id="ent_section_9">
<div class="title_wrap ent_flex_between">
<h3>기자주천 연재코너</h3>
<a href="" class="more">더보기</a>
</div>
<ul class="ent_flex_between">
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<div class="txt_wrap">
<span class="program">SW시선</span>
<span class="source">스포츠월드</span>
<h4>Title 1 Title 1 Title 1 Title 1 Title 1</h4>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<div class="txt_wrap">
<span class="program">SW시선</span>
<span class="source">스포츠월드</span>
<h4>Title 1 Title 1 Title 1 Title 1 Title 1</h4>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<div class="txt_wrap">
<span class="program">SW시선</span>
<span class="source">스포츠월드</span>
<h4>Title 1 Title 1 Title 1 Title 1 Title 1</h4>
</div>
</a>
</li>
</ul>
</div>#ent_main .ent_left #ent_section_9 {
border-bottom: solid 1px #e4e4e4;
padding: 24px 0 20px;
}
#ent_main .ent_left #ent_section_9 .title_wrap {
margin-bottom: 17px;
}
#ent_main .ent_left #ent_section_9 .title_wrap h3 {
font-size: 16px;
}
#ent_main .ent_left #ent_section_9 .title_wrap a {
font-size: 12px;
color: #999;
}
#ent_main .ent_left #ent_section_9 ul {
}
#ent_main .ent_left #ent_section_9 ul li {
width: 200px;
border: solid 1px #000000;
}
#ent_main .ent_left #ent_section_9 ul li a {
display: block;
}
#ent_main .ent_left #ent_section_9 ul li a img {
width: 100%;
height: 122px;
}
#ent_main .ent_left #ent_section_9 ul li a .txt_wrap {
padding: 13px 14px 18px;
}
#ent_main .ent_left #ent_section_9 ul li a .txt_wrap span {
font-size: 11px;
}
#ent_main .ent_left #ent_section_9 ul li a .txt_wrap .program {
color: #ff0080;
}
#ent_main .ent_left #ent_section_9 ul li a .txt_wrap .program:after {
display: inline-block;
content: "";
width: 2px;
height: 2px;
background-color: #d3d3d3;
vertical-align: top;
margin: 12px 2px 0 8px;
}
#ent_main .ent_left #ent_section_9 ul li a .txt_wrap .source {
color: #999;
}
#ent_main .ent_left #ent_section_9 ul li a .txt_wrap h4 {
min-height: 36px;
font-size: 12px;
font-weight: 700;
line-height: 20px;
padding-top: 8px;
}
学習内容の難点
section 5領域およびsection 8領域は、まずビデオに表示されるように完了し、次にnaverおよびaタグ領域を最大限に調整しようと試みるが、これにはいくつかの困難と時間がかかる.
解決策
section 5では、変更後のコードは、まずliに「長さ」と「高さ」の値をマークし、li>aマークの内側に内容を中央に位置合わせし、h 4マークの2行の文字を自動的に改行し、中央に位置合わせしたまま表示する:inline blockを表示し、widthを与えるように変更します.
section 8では、ビデオにはaタグにspanタグとは異なる内容が加えられているが、naverではspanタグの順位部分がaタグの影響を受けない部分として表示されているため、設計図面やcssセレクタなどを修正する際に修正が行われている.
学習の心得.
また,コードを複数の部分に分割することで,コードを折り畳んで管理し,必要な部分を修正する際にコードのみを展開して操作できるため,非常に便利である.
Reference
この問題について(2021.06.22(NAVERニュース4)), 我々は、より多くの情報をここで見つけました https://velog.io/@lstem12/2021.06.22-naver-news-4テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol