CSS Components
- 8. Hard
too
#main .article { ... }
#main .article .title { ... }
#main .breaking .title { ... }
#header #logo img { ... }
#header li#logoTop { ... }
#header li#logoTop:after {
.article-header .datetime s
ul.member-list li.member a
.widget p,.widget ul { ... }
#sidebar .widget { ... }
#sidebar li a.register{}
body.landing #main sectio
#slider #slider-control > di
- 14. .speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-right: 15px;
}
.speaker .image > img {
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
…
- 16. <div class="book">
<div class="cover">
<img src="book.jpg">
</div>
<div class="inner">
<p class="title">...</p>
<p class="info">
...
</p>
<div class="intro">
<p>...</p>
</div>
<ul class="shop">
<li>...</li>
</ul>
</div>
</div>
- 18. .book {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book .cover {
float: left;
margin-right: 20px;
}
.book .inner {
overflow: hidden;
}
.book .title {
...
}
...
- 22. .event > a {
display: block;
}
.event .thumbnail {
float: left;
margin-right: 15px;
}
.event .inner {
overflow: hidden;
}
…
- 26. <div class="media speaker">
<div class="media__image image">
<img src="tani.jpg">
</div>
<div class="media__body inner">
<p class="name">…</p>
<div class="biography">
<p>...</p>
</div>
</div>
</div>
- 28. /* Media */
.media {
overflow: hidden; /* Clearfix */
}
.media__image {
float: left;
margin-right: 15px;
}
.media__body {
overflow: hidden;
}
- 29. .speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-right: 15px;
}
.speaker .image > img {
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
…
.speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-right: 15px;
}
.speaker .image > img {
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
…
- 30. .speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .image {
float: left;
margin-right: 15px;
}
.speaker .image > img {
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
…
- 32. .book {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book .cover {
float: left;
margin-right: 20px;
}
.book .inner {
overflow: hidden;
}
.book .title {
...
}
...
- 34. .event > a {
display: block;
}
.event .thumbnail {
float: left;
margin-right: 15px;
}
.event .inner {
overflow: hidden;
}
…
- 37. <div class=“media book">
<div class=“media__image book__cover”>
<img src="book.jpg">
</div>
<div class=“media__body”>
<p class="book__name">...</p>
<p class="book__info">
...
</p>
<div class="book__intro">
<p>...</p>
</div>
<ul class="book__shop">
<li>...</li>
</ul>
</div>
</div>
- 47. <div id="pickup">
<div class="book">
<div class="book__cover">
<p class="book__name">
CSS…</p>...
</div>
</div>
</div>
<div class="book">
<div class="book__cover">
<p class=“book__name">
…
</p>
</div>
</div>
- 49. #pickup .book__name {
color: #111;
font-size: 2em;
}
!
.book__name {
margin-bottom: 10px;
line-height: 1.3;
font-weight: bold;
font-size: 1.2em;
}
- 52. #pickup .book__name {
color: #111;
font-size: 2em;
}
!
.book__name {
margin-bottom: 10px;
line-height: 1.3;
font-weight: bold;
font-size: 1.2em;
background-color: #333;
padding: 6px;
}
- 54. #pickup .book__name {
color: #111;
font-size: 2em;
background-color: #FFF;
padding: 0;
}
!
.book__name {
margin-bottom: 10px;
line-height: 1.3;
font-weight: bold;
font-size: 1.2em;
background-color: #333;
padding: 6px;
}
- 57. <div><!-- Scope -->
<style scoped>
.book__name {
background-color: #333;
padding: 6px;
}
</style>
<div class=“media book">
<div class=“media__body”>
<p class=“book__name”>
…
</p>
</div>
</div>
</div>
- 67. Shadow
DOM
// カスタム要素のインスタンスが生成された時に実行する
element.createdCallback = function() {
var template =
document.querySelector('#my-media-
template');
!
// templateのDocumentFragmentからcontentを取得する
var content = template.content;
!
// Shadow Rootにcontentを追加する(ShadowDOMの形成)
var shadowRoot =
this.createShadowRoot();
shadowRoot.appendChild(
document.importNode(content, true)
);
};
- 68. Shadow
DOM
// カスタム要素のインスタンスが生成された時に実行する
element.createdCallback = function() {
var template =
document.querySelector('#my-media-
template');
!
// templateのDocumentFragmentからcontentを取得する
var content = template.content;
!
// Shadow Rootにcontentを追加する(ShadowDOMの形成)
var shadowRoot =
this.createShadowRoot();
shadowRoot.appendChild(
document.importNode(content, true)
);
};
= encapsulation
- 87. <div class="media speaker">
<div class="media__image
speaker__image">
<img src="tani.jpg" width="120">
</div>
<div class="media__body">
<p class="speaker__name">谷 拓樹
</p>
...
</div>
</div>