🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

1212閲覧

css gridについて

zynu

総合スコア29

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/09/28 08:41

編集2019/09/28 08:48

ページをこんな感じに分割したいんですけど、上手くいきません。
イメージ説明

CSSはこんな感じです。
player、manegerエリアの四角はそれぞれ"article"でできてます。

body{
display: grid;
grid-template-columns: 20px 1fr 20px;
grid-template-rows:
[head] 100px
[play] auto
[manege] auto
[foot] 100px;
grid-row-gap: 200px;
row-gap: 200px;

}

body > *{
grid-column: 2 / -2;
}

.prof1_player{
display: grid;
grid-column: play;
grid-gap: 20px 10px;
gap: 20px 10px;
grid-template-columns: 1fr 1fr;

}

.prof1_maneger{
display: grid;
grid-column: manege;
grid-template-columns: 1fr 1fr;
grid-gap: 20px 10px;
gap: 20px 10px;
}

h2{
grid-column: 1 / -1;
}

因みに今はこんな感じです。
イメージ説明

よろしくおねがいします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2019/09/28 12:38

CSSフレームワークタグ付いていますけど具体的に何を使ってますか? また、HTMLがないと我々はエスパーでないので答えられません。
zynu

2019/09/29 06:54

申し訳ないです
guest

回答1

0

自己解決

grid-rowとすべきところをgrid-columnとしてしまっていました。しょうもない質問ですみませんでした。

投稿2019/09/29 06:57

zynu

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問