ウェブDeBLOG | トライデントコンピュータ専門学校 Webデザイン学科

トライデントコンピュータ専門学校 Webデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。 

2018.02.25 [日] CSS Grid Layoutの時代がやってくる。[その1]

まだまだ寒い日が続きますが、もう暦の上では春ですね。
講師のカワグチです。暖かくなってくると花粉が心配ですが、それでも春は待ち遠しいですね。

2年前の年末に「そろそろFlexboxを勉強し始めてもいいんじゃないだろうか」という記事を書いて、WebサイトのレイアウトにCSS Flexboxの考え方をまとめました。

grid2018_003.jpg

最近では、学校の授業でも、CSSでのレイアウトは、floatを使うよりもFlexboxを利用することを推奨しています。ところが、そんな話もつかの間、そろそろGrid Layoutが使えると言うことで、調べてみました。

gridlayout_001.jpg

参照:Can I use... Support tables for HTML5, CSS3, etc

Internet Explorer11のみベンダープレフィックス-ms-が必要で、他のモダンブラウザ(Chrome, Firefox, Safari, Edge)の最新版では対応済みです。

StatCounter Global Stats調べでは、日本でのInternet Explorer11のシェアは、iPhoneのSafariに次いでの15.61%(2018年2月現在)です。

gridlayout_002.jpg

スマートフォンやモダンブラウザを対象とするのであれば、Grid Layoutを検討しても良いわけです。

CSS Grid Layoutとは

現在、W3Cでは勧告候補となっています。

Abstract
This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

このCSSモジュールは、ユーザーインターフェイスの設計に最適化された2次元グリッドベースのレイアウトシステムを定義します。グリッドレイアウトモデルでは、グリッドコンテナの子を、あらかじめ定義されたフレキシブルまたは固定サイズのレイアウトグリッド内の任意のスロットに配置できます。

いつもの通り、W3Cの仕様書を調べてみました。

floatやFlexboxは、縦の軸もしくは、横の軸のどちらかの定義でしたが、CSS Gridは両方とも(2次元)を定義することができます。まずは、横並びをの方法をFlexboxと比べてみましょう。

Flexbox


ul{
    display:flex;
}

li{
    width: 25%;
}

表示は、

  • Nav1
  • Nav2
  • Nav3
  • Nav4

Grid Layout

このdisplay:flexで定義された親要素をFlex container (Flex コンテナ)、子要素をFlex item (Flex アイテム)と呼びますが、Grid Layoutでも同じようにdisplay:gridで定義された親要素を Gid container(Grid コンテナ)、子要素をGrid item(Grid アイテム)と呼びます。

gridlayout_003.jpg

Grid column(列)

grid-template-columnsでGrid colimn(列)の数、それぞれに値を設定すれば、横に並びます。今回は4つの<li>がありますので、それぞれ25%に設定しました。

gridlayout_004.jpg
ul {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
 }

表示は、

  • Nav1
  • Nav2
  • Nav3
  • Nav4

では、<li>要素は4つですが、3つだったらどうなるでしょうか?

ul {
    display: grid;
    grid-template-columns: 25% 25% 25%;
 }
  • Nav1
  • Nav2
  • Nav3
  • Nav4

となります。

grid-template-columnsなどでグリッドを定義する時、Grid lineではなくGrid Trackを定義することになります。
上記では、3つ定義されていますので、残りの1つは次の行に配置されます。
定義されたGrid cellは、グリッド上の最も小さな単位となります。考え方としては、表のセルのようなものになります。

gridlayout_005.jpg

columnの長さを表す単位は、%の他pxなども利用できますが、frという新しい単位も使えます。

fr単位

Grid container内の利用可能な空間の分数を表します。frで表した空間を全て足して、その分数ということになります。

ul {
    display: grid;
    grid-template-columns: 25% 1fr 1fr 25%;
 }

表示は、

  • Nav1
  • Nav2
  • Nav3
  • Nav4

Grid gap

Grid cellの間隔は、grid-column-gapおよびgrid-row-gapプロパティを使用するか、grid-gapとショートハンドでも設定できます。

gridlayout_007.jpg
ul {
    display: grid;
    grid-template-columns: 25% 1fr 1fr 25%;
    grid-column-gap: 10px;
 }

表示は、

  • Nav1
  • Nav2
  • Nav3
  • Nav4

間隔が優先的に確保され、残りの領域をGridで分割します。

Grid rows(行)

今度は、縦に並べてみましょう。Flexboxでは、

ul{
    display: flex;
    flex-direction:column;
}

と書きます。Grid Layoutでは、grid-template-rowsを設定します。

gridlayout_006.jpg
ul{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
li{
    padding: 1em 0;
    text-align: center;
    margin-bottom: 0;
}

Grid itemの<li>要素に高さは必要です。
表示は、

  • Nav1
  • Nav2
  • Nav3
  • Nav4

とりあえず、横と縦の一方向(一次元)のGrid Leyoutでの配置はわかりました。
しかし、このような配置はFlexboxでも可能で、手間もそれほど変わりません。

Grid itemの配置を指定する

グリッドを定義する事でGrid itemをグリッドのどのエリアに配置するのかを指定することができます。

Grid lineの番号で指定する

Grid lineの番号でどこに配置するか、指定する事ができます。
column(列)の始まりをgrid-column-startで設定します。


gridlayout_008.jpg
ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
 }
li.nav1 {
   grid-column-start: 3;
}

grid-row-startでは、row(行)の位置を設定できます。grid-rowが指定されたGrid itemの後の要素は、開始位置に移動します。
この部分が、grid-columnと違います。

ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
 }
li.nav1 {
   grid-row-start: 2;
}

grid-colmun-endgrid-row-endを利用する事で、定義されたグリッド内のGrid item範囲が設定できます。

ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
 }
li.nav1 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 4;
}

grid-colmun-start,grid-colmun-endgrid-row-start,grid-row-endは、ショートハンドでそれぞれgrid-colmungrid-rowでも書けます。/(スラッシュ)で区切りstart/endを指定します。

li.nav1 {
  grid-column: 3/5
  grid-row: 2/4;
}

Grid LayoutはFlexbox,positionとの組み合わせで、まだまだ自由にGrid itemを操作する事ができるようです。
[その2]に続きます。

参考:CSS Grid Layout を極める!(基礎編) - Qiita
参考:CSS Grid Layout - CSS | MDN

関連記事
Comment







(編集・削除用)


管理者にだけ表示を許可
Trackback
https://tridentwebdesign.blog.fc2.com/tb.php/635-fee82085
検索フォーム
プロフィール

担当:Webデザイン学科+

名古屋駅から歩いて6分、トライデントコンピュータ専門学校のWebデザイン学科を紹介します。

トライデントロゴ

質問などはLINEでどうぞ。

友だち追加数
Instagram
Webデザイン学科実績
<プレゼン>
WCAN 2016 Springに参加してきました。
WCAN 2015 Winterに参加しました。
建設業入職者増加プロジェクトの発表会に参加
WCAN 2015 Summerに参加してきました。
WCAN 2013 Winterに参加
WCAN(秋)に参加しました。
無事、発表が終わりました【WordFes Nagoya 2013】
WCAN 2013 Summerに参加してきました。
WCAN 2011 Winter LT&LOGO
学生がライトニングトークで話しました。
<展示会>
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
<コンテスト>
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
<Webサイト制作>
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
<技能五輪全国大会>
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
<若年者ものづくり競技大会>
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
学生ブログリンク
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科WCAN業界研究技能五輪ウェブデザイン職種ウェブデザイン2013Webサイト若年者ものづくり競技大会映画名古屋ポートフォリオECCコンピュータ専門学校2009学生ブログWinterWebデザインWebサイト制作2011JavaScriptWordPressかっぱ商店街礒田優技能五輪全国大会1年生進級展矢野りんcmsWeb2014WordpressNagoyaa-blogライトニングトーク入学式卒業制作展Autumn若年者ものづくり大会石黒雄介アクアリングテンプレート作成CGイラスト学科面白法人カヤックアクセス解析Summerオープンキャンパスホームページ・ビルダー瀬川大勝あいちカレーラーメンコンテストGIO卒展mini大阪Japan合同企業展IIJ杉本拓也HCD2012Web制作会社東京研修卒業制作2010ウェブデザイン技能競技会CSShtml5ココストア2015第48回技能五輪全国大会名古屋駅Adobe体験入学inFlash専門学校マール学生閉館日田中睦翔情報デザインフォーラム成田篤紀CentOS情報デザインプレゼンテーション水野裕太WebワークショップGooglejQuerygifアニメCSS3ラーメンHTML5BananaAd人間中心設計ブログパーツ愛知県上村水月ウェブデザイン技能競技大会99eagleウェブデザイン技能検定セントレアSpring企業訪問プロジェクトselect要素CSSNiteAnalytics空気人形就職活動名古屋市科学館option要素阿部淳也ポートフォリオサイト長屋めぐみoutput要素静岡コミュニケーションデザインワークショップtextarea要素NTTドコモ東海産学協同カリキュラムメ~テレCMSビジュアルエディタPluginYahoo!Japan堀尾真衣particlecanvasinput要素SEO卒業式スマホアプリ1年生作品展まぼろしうぇーぶ会社訪問アンティー・ファクトリー作品集WordFes名商連WEBサイト制作者のためのHCDの理解in名古屋レイアウト写真ナゴヤドーム中日ドラゴンズスマートフォントライデント笈瀬本通りイラストマップAdvent5T(ファイヴティー)和みCOMMUNICATIONNEXTトライデント合同企業展カメラ知多みるくiPhoneWebデザインギャラリー塚本碧真鍋大度form要素fieldset要素Calendarlabel要素たこ焼き岩手県Boxワークショップ戸田芳裕LikeUX結果発表モンキーワークスForumFICClegend要素名古屋開府400年祭初期設定アサココ!豊田市美術館サーティファイRunstant熊谷佳紀学生インタビュー北濱大輔鷹野雅弘進級展StoreApplejbstyle茂森仙直謹賀新年企業課題グループ制作佐藤歩Webクリエイター能力認定試験株式会社LIG情報デザイン基礎DTPWORLDWordCampF-siteサイバーエージェントディプロス水野怜美Markupグリッドレイアウト制作合宿幕張メッセ林田実樹GridLayout導入授業display:grid2008PHPデザイナーのためのプログラミング入門unoplus技能五輪予選ビジュアルデベロップメントデザインアンドリュー・ワイエス名古屋メディアボンド金シャチ商店街タロヲ商店街アクセシビリティ愛知県美術館伊藤頼子プロトコル分析MAXYORKE.サーバーIAWEBサイト制作者のためのHCDの理解Night道頓堀Design新世界求人ネスカフェゴールドブレンド大沢たかおデッサンWebリテラシーTAFFWCAN46武豊アニメーションフェスティバル名古屋おもてなし武将隊ナゴヤ武将都市CS4サムライCollege鳥取砂丘FLEX知多半島松坂屋美術館スタジオジブリ・レイアウト展プロ野球ポートピア名古屋TEXTUREフナ犬中村勇吾佐藤可士和SakaeFLASH柴乃櫂人HPデザインCODEポスターデザイン・コンペティション小林信次中部国際空港株式会社デザインコンテスト株式会社アクアリングブラザー工業株式会社増田悟丹下紘希名チャリ愛知商業高校GA名駅経済新聞中級編名古屋サイト改善研究会Nam01CONTESTLoadウェブデザイン部門Lazyカンファレンスforウェブリテラシー協会Slimbox2大西健太田中稚妃呂WEBTHEカメラワーク石井研二横浜デジタルアーツGoogleAnalyticsUltimateArtlessXRAYAndrioidSIGGRAPH2008WinterWEBサイト制作者のためのHCD(人間中心設計)の理解WebDirectionEast'08チタハン10ITCIRCUS広島弁1→10designVideopuppetry鳥取ペルソナシナリオASIAiPhone4名古屋グランパスデザインのへそTwitterQubibiグラフィクデザインみの治商店三蔵商店サイト制作プチ・フレーズポスターデザイン・コンペディションCODESagmeisterHelveticaStefanW+KTokyo(+CRUZ)名古屋クリエイターフットサル笈瀬本通細川太郎西村真里子CALENDARJAPANインターネットクリエイティブアワードYahoo!ストリートビューカラーUNIQLOJIS世界のCMフェスティバルITホワイトボックス人喰いの大鷲トリコ是枝裕和監督ヤノベケンジ東京ゲームショウ2009カスタマイズセミナーPHP勉強会大富豪スコアシート荒俣宏ファルコム音楽フリー宣言Flash-GameswonderflKyotoゆるキャラ山村浩二映画のオープニング閉会式□□□switchdotFes音楽Autuminブランディングゲーム日本ファルコムHCDプロセスウルトラ展黒い太陽ガンダム学科グラフィックデザイン入賞旭食品サンプル製作所Mozorama後期今井佳子アイディグラフィックスソバットシアターコマ撮りアニメ電信柱エレミの恋カナバングラフィックスCMS特集学生参加富岡聡アニメーションescalatorライブペイントインターネットスキル認定普及協会第4回アックゼロヨン・アワードLPOギレン総帥ナゴヤデザインウィーク2009UNIQLOCK国家検定西田幸司ActionScript食品サンプルanimationモーション演習ヱヴァンゲリヲン新劇場版:破CG・イラストコンテストマクロマリオネットマークアップ演習ThereThenCHILDRENWasADVENTSalsaVIIAndNIKE箱根合宿森川眞行会社見学横浜中華街新横浜ラーメン博物館COMPLETE慶華飯店FANTASYウェブリテラシー協会第一回セミナープレゼン演習浜松ウサビッチActionScript基礎HTML+CSS基礎福みつ餃子WCAN×CSSNite広告批評IA2010キックオフセミナー夢プロジェクト2009・成果報告会FINALアートアニメーションTAFF'09武豊町鎌倉日本電子専門学校スーパーエレメンツ山崎デザイン事務所デコクレ長谷川恭久デュエル・マスターズGENOウィルスセキュリティコピーライティング小野裕子CREAMごはんとFlashFITCロゴ公募#infoedu教育勉強会イラストコンテストヨウイチクリ博就職フェスタペルソナ&シナリオ法浅野智Labuat3校合同発表会横浜デジタルアーツ専門学校TokyoUTZOOMBlog情報デザイン教育勉強会ウェブDeBLOGワークスコーポレーションペルソナ/シナリオ法おかだよういち「ヤノベケンジ-ウルトラ」展造形基礎プラネタリウムUIバイドゥ平野健太郎ポートフォリオアイデア帳仕事ワイヤーフレーム職業実践専門課程レスポンシブWebデザインウェブアートデザイナーうぇ~~~~~~~ぶ採用担当者の心に響く高校アクティビティシナリオ源賢司UXデザインDmm.comKaizenPlatform14グロースハッカーグロースハック出席率学位坂本貴史制作実績津田直明2016平野秀幸IA/UXプラクティスAO入試河地芳明沼田啓助カークスヴィル原一浩坂本邦夫合宿合同制作合同制作合宿専門士懇親会Web制作のおしごとWebプログラマーWebデザイナーWebディレクター岡田陽一FlexibleBox新入生WF1でBLOGインターンシップスマートフォンサイトUI図鑑2015年度Crayonマークアップエンジニア森田霞HighlighterSyntaxCSS3&jQueryで作る名古屋駅麺通り第52回技能五輪全国大会HTMLbutton要素datalist要素オリエンタル麺の匠NCF2014新年のご挨拶親孝行アップルップル木村哲朗クリスマス熊﨑彩第53回ワクワク建設タウン東京コスモ3DCGFlexbox味仙CGスペシャリスト松田洋樹建設経営者倶楽部アクセシビリティからはじめる、WebサイトのUXデザイ竹中民男夏麺フェア飯田淳介フロントエンドエンジニア八木智章ScrollmagicWebアクセシビリティVelocity.jsScrollMagicプログラムクイズCodePen衣台高校梅澤朝樹株式会社エイチーム山川綾那尾鷲高校出張講座D3.jsスクラップブック夏休みの課題ノートPC貸与鈴木雄太フォトアルバムProxyWCAN2017Springv4.0.1SyntaxHighlighter学校ターミナルスタジオディテイルズ服部友厚佐藤洋介出身高校AWARDS志維安藤WebアプリNCF2017堀川友章鈴木優太World)toWWW(Welcome信州アプリコンテスト[ゼロ]アプリコンテストofTableTOC2017Contents久保怜也ミス・ユニバース・ジャパン岐阜大会フォントおじさん関口浩之ES2015ES6日清食品グループタカガールサイト水曜日のカンパネラプラネタリアンジムナストコロン夏休み学生作品集沖縄トライデント祭り夏季閉館日ResurgenceDay:CodeplyPlunkerJSFiddleJSBinjsdo.it涼麺Independenceクイズ駅麺通りMonaca情報系appendChild()HTMLCollectionNodeList美大Webプログラミング初級講座マイクロソフトECMAScriptお母さんの二度見展学習芸大料理いな世驛麺通り再進学学園祭醐りょうドラマInstagramインスタグラムkeygen要素optgroup要素docomoドコモ2011年度迎春FutureStationBloosumTeamイマジンカップNHN敢闘賞ツインメッセ静岡東京ゲームショウ神戸神戸国際展示場ゲーム大賞アマチュア部門Ohana静岡県ロゴマークメールマガジンBloom*Block尾花大輔画像をチェックボタンにする張山大祐JQuery第50回MuseWeb制作合宿ウェブアクセシビリティモリサワFacebookたこ焼きパーティ結果長野GAMETOKYO東京ゲームショウ2012第7回若年者ものづくり競技大会SHOWベースキャンプ名古屋IllustratorSVGFacebookページ鈴木北川パーヤン円JOY!map卒業・修了制作展愛知県立芸術大学キルト展絵文字CustomSmilies英国王のスピーチ卒業制作・研究発表会2011ぬいぐるみのラパンKtaistyle日本の四季中部国際空港名古屋市中村区FLAVER3.0FLV8341-3:2010笈瀬本通商店街キルターズフェスティバル2011GAINAXSUBARU放課後のプレアデスUntitled!!!!!!!!トライデントカレッジDRAGONドラゴンゲート愛知淑徳大学みつけものGATEゴールデンウィークライアン・ウッドワードマーサ・グレアム5月11日Googleロゴ恵那市岩村プロジェクションマッピング伊達千代DTPの勉強部屋ablogcms北岡弘至Magnumバルサマン3JAPANWORLDCUPみんなのICT佐藤ねじ八鬼山熊野古道マカベン名古屋マークアップ勉強会串本本州最南端和歌山中華そば熊野三山大門坂那智の大滝tableテーブルconcrete5栗山聡一備忘録parseFloat()道家陽介中村健太宇野剛志石原愛実ランチアロチ本家丸高結団式愛知県選手団青山敬司山田拓生アイチータ授業type属性紅茶専門店Liyn-anアイテムカンパニーネイルサロンマウア加藤ひとみ西岡克真柏木祥太スパルタキャンプ岩出本店丸田屋名古屋市営地下鉄青空学区AnimationAO特別授業parseInt()DesignerWebデザイン演習あいちトリエンナーレ2013そこにいない。展PARTY第51回技能五輪全国大会嵐が如く麺屋ココイチフジ家55さかなや晴れやかPerfumebyThree.js木下健太郎就職東京プレゼンたにぐちまことinspiredRhizomatiks田代豊麺やOKカレーラーメン卒業研究制作展最優秀賞ジョルテKDDI10日でおぼえるLinuxサーバー入門教室トライデント合同企業説明会googleGWDF81教室HTML5スマートアプリ&クリエイティブコンテストモテ声ボーダー美術大学芸術大学AWARD高橋雅人NCF2013NTTドコモ東海支社list-itemdisplaylist-style-typeX

メールフォーム

名前:
メールアドレス:
件名:
本文:

東京コスモ
トライデントコンピュータ専門学校
Pagetop