2018年08月 - ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

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

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

2018年08月

2018.08.16 [木] 冨田伴成さん［株式会社イークリエイト］（業界研究2018）

最終更新:2018.08.16学校生活業界研究授業

前期最後の業界研究授業は株式会社イークリエイトのプログラマ、冨田さんにお越しいただき、マークアップエンジニアの仕事についてお話ししていただきました。

株式会社イークリエイトは、名古屋駅から徒歩10分ほどにある、Webサイト制作、Webシステム開発、ITエンジニア派遣などのサービスを行っている会社です。
トライデントコンピュータ専門学校からもすぐ近くです。

株式会社イークリエイト

企業理念は、
「わたしたちに関わるすべての方達をSMILEに
そしてわたしたち自身もSMILEに」
目の前の人を大切にし行動するをモットーにしています。
冨田さんは、Webサイト制作部門で、入社3年目のプログラマーをされています。

入社3年目、話を聞いている学生と年も近いという事もあって、具体的な今後の自分たちの姿をイメージできる話でした。
学生時代の冨田さんからWeb制作という仕事に出会い現在までに学んだ事、身に付けたスキルなどを丁寧に話していただきました。

入社1年目

マークアップエンジニアとして、先輩のコードをみて技術を学ぶ事などWeb制作に関する事以外にも、報相連の重要性や電話応対など社会人としての基礎を身に付けていきます。

「冨田伴成さん［株式会社イークリエイト］（業界研究2018）」の続きを読む≫

Tag : イークリエイト冨田伴成業界研究トライデントコンピュータ専門学校マークアップエンジニア

17:45 Trackback : 0 Comment : 0 Top

2018.08.15 [水] CSS Grid Layoutの時代がやってくる。［その3］

最終更新:2022.02.11Webサイト制作Tips Web技術

ずいぶん時間が経ってしまいましたが、3月の記事「CSS Grid Layoutの時代がやってくる。［その2］」の続きで、Internet Explorer11での対応を調べてみました。

さて、前回CSS Grid Layoutで組んだ、ウェブDeBLOGを模ったレイアウトをInternet Explorer11で確認してみましょう。

HTMLとCSS

htmlは大まかな構造として、header, main, footerを準備します。

<body>
   
      ヘッダー
      
          
            メニュー①
            メニュー②
            メニュー③
            メニュー④
          
      
   
   
      コンテンツ
   
   
      サイドバー
   
   
      フッター
   
</body>

CSS Gridで、グリッドの横の格子と縦の格子を設定し、各要素に割り当てます。
navの部分はflex-boxで横並びにしてあります。

body{
  width: 100%;
  box-sizing: border-box;
  background-color: #1861AE;
  display: grid;
  grid-template-rows: 80px 150px 80px;
  grid-template-columns: 1fr 120px ;
  grid-gap: 1em;
}
header{
  grid-column: 1/3;
  background-color:#d186de;
}
main{
  grid-column: 1/2;
  background-color:#bae3f9;
}
aside{
  grid-column: 2/3;
  background-color:#00CCFF;
}
footer{
  grid-column: 1/3;
  background-color:#f5d951;
}
nav ul{
  list-style-type: none;
  margin: 0;
  padding: .5em 0 0 0;   
  display: flex;
  justify-content: flex-end;
}
nav ul li{
  margin: 0 1em 0 0;
  padding: 0;
  font-size: .7em;
  line-height: 1.5;
}

Chrome, Firefox, Safari, Edgeなどのモダンブラウザでは下記のように表示されていると思います。