CSS コード短縮, 豆知識

html
1<div class="sample6Wrap">
2	<div class="sample6">Lorem ipsum dolor sit amet.</div>
3</div>

css
1.sample6Wrap{
2	width: 300px;
3	height: 300px;
4	background: #ccc;
5	position: relative;
6}
7.sample6{
8	position: absolute;
9	top: 0;
10	right: 0;
11	bottom: 0;
12	left: 0;
13	margin: auto;
14	width: 100px;
15	height: 100px;
16	background: #888;
17}

これと同じ見た目にhtmlタグ一つでできますか？

意味はないですがそういう方法があれば今後便利だと思ったので質問しました。

行動規範の内容に同意します

回答3件

ベストアンサー

こんな感じでどうでしょう？

html
1<div class="sample">Lorem ipsum dolor sit amet.</div>

css
1.sample {
2	width: 100px;
3	height: 100px;
4	border: 100px solid #ccc;
5    background: #888;
6}

投稿2016/09/20 08:29

gin

総合スコア2722

konkuro1007

2016/09/21 05:27 編集

そういうことです。なんで思いつかなかったんだ俺

行動規範の内容に同意します

CSS
1.sample {
2  width: 300px;
3  height: 300px;
4  background: #ccc;
5  position: relative;
6  }
7
8.sample:after {
9  content: attr(data-text)"";
10  position: absolute;
11  top: 0;
12  right: 0;
13  bottom: 0;
14  left: 0;
15  margin: auto;
16  width: 100px;
17  height: 100px;
18  background: #888;
19}

HTML
1<div class="sample" data-text="Lorem ipsum dolor sit amet."></div>

「Wrap」と命名されていたので、これは「枠」ではないと思い、:after要素を用いて再現しました。しかしこの疑似要素の難点は、CSSでcontents: "Lorem ipsum dolor sit amet.";としてしまうと、全てのsampleで「Lorem ipsum dolor sit amet.」になってしまい、コンテンツと装飾が分離できないところです。そこで、attr()でHTMLからテキストを変更できるようにしました。

投稿2016/09/20 09:45

Tomonyuki

総合スコア16

konkuro1007

2016/09/21 05:33

そういうやりかたもあるんですね。僕には思いつかなかったので有難いです。

行動規範の内容に同意します

HTML
1<div class="sample6Wrap">
2  <p>Lorem ipsum dolor sit amet.</p>
3</div>

として、.sample6部分を

CSS
1.sample6Wrap p {
2  position: absolute;
3  top: 0;
4  right: 0;
5  bottom: 0;
6  left: 0;
7  margin: auto;
8  width: 100px;
9  height: 100px;
10  background: #888;
11}