@@ -22,7 +22,7 @@ <h1>ゲーム画面のレイアウト</h1>
2222< header class ="CG2-livecode__header ">
2323< div class ="CG2-livecode__label "> display:gridのHTMLの例</ div >
2424</ header >
25- < div class ="CG2-livecode__body "> < pre > < code class ="lang -html "> <div class="grid">
25+ < div class ="CG2-livecode__body "> < pre > < code class ="language -html "> <div class="grid">
2626 <div class="title">Title</div>
2727 <div class="status">Status</div>
2828 <div class="memberList">Member List</div>
@@ -33,7 +33,7 @@ <h1>ゲーム画面のレイアウト</h1>
3333</ div >
3434</ section >
3535< p > 次にCSS部分です。< code > display: grid;</ code > などを使用して、レイアウト情報を指定します。画面幅が狭くなった時には、メディアクエリでレイアウトを再定義しています。</ p >
36- < pre > < code class ="lang -css "> /* landscape */
36+ < pre > < code class ="language -css "> /* landscape */
3737.grid {
3838 display: grid;
3939 grid-template-columns: auto 1fr;
@@ -47,7 +47,7 @@ <h1>ゲーム画面のレイアウト</h1>
4747< div class ="Column ">
4848< h1 > コラム:古いシンタックスと最新のシンタックス</ h1 >
4949< p > もしIE10以降やEdgeにも対応したい場合は、Autoprefixerを併用することをおすすめします。この記事の執筆中にAutoprefixerのバージョンが上がり(< a href ="https://github.com/postcss/autoprefixer/releases/tag/6.3.0 "> 6.3 “Pro rege et lege”</ a > )、最新の仕様に沿った記述をすれば、IE用の記述にも対応ができます。ですが、すべてのGrid Layout Moduleに関するプロパティが古い仕様に対応しているわけではないので注意が必要です。</ p >
50- < pre > < code class ="lang -css "> .nested-code-block {
50+ < pre > < code class ="language -css "> .nested-code-block {
5151 in: the-cg-colum;
5252}
5353</ code > </ pre >
@@ -86,7 +86,7 @@ <h2>まとめ</h2>
8686< p > 今回はひとまず基本となる概念、グリッドコンテナとグリッドアイテムについて解説しました。次回はさらにグリッドを基本とするレイアウトに必要な概念と、その実装について解説を進めていきます。じっくりお付き合いください。</ p >
8787< pre > < code > ここは何もついてないブロック
8888</ code > </ pre >
89- < pre > < code class ="lang -html "> <div>escape?</div>
89+ < pre > < code class ="language -html "> <div>escape?</div>
9090</ code > </ pre >
9191< div class ="Column ">
9292< h1 > コラム</ h1 >
@@ -95,7 +95,7 @@ <h1>コラム</h1>
9595< header class ="CG2-livecode__header ">
9696< div class ="CG2-livecode__label "> コラムのコード</ div >
9797</ header >
98- < div class ="CG2-livecode__body "> < pre > < code class ="lang -css "> .nested-code-block {
98+ < div class ="CG2-livecode__body "> < pre > < code class ="language -css "> .nested-code-block {
9999 in: the-cg-colum;
100100}
101101</ code > </ pre >
0 commit comments