2021年09月22日(水曜日)
HTMLやCSSをはじめとする画面制作業務に特化した、制作レビュー・意見交換会を行いました。
・初期設計の注意点
・HTMLのタグのひとつ「iframe(インラインフレーム)」の概要・使い方
・その他フロント業務に関する技術・情報
以上について、座談会形式でざっくばらんに意見交換が行われました。
■初期設計の注意点
・一からコーディングする際に、CSSはパーツ化して作成する
→パーツ化はデザイン作成ツールで使われているパーツを
XDやFigmaを参考に作成していく
→デザインを見て共通化できるものを探して作成する
→各セクションに分けてレイアウトを色分けし、大枠を作る
→横幅の最大値を先に決める
・レスポンシブ対応は基本になるPCのデザインを作った後にスマホ版を作る
XD:デザインツール、Adobeのソフト
Figma:デザインツール、複数の人が編集できる
■「iframe(インラインフレーム)」の概要・使い方
・iframeとは外部のサイトを組み込んで表示させたい時に使用する
HTMLのタグのひとつ
・今回は、ガジュマルのオフィシャルサイト(HTMLベタ書きの静的ページ)に
iframeを使用し、外部のサイトから記事を持ってくるようにした
(画面の一部を組み込む場合によく使う現場ではSNSを引っ張ってくるのに使われている)
■フロント業務に関する技術・情報
・JQuery時代遅れ問題
→他に便利なjsが出てきた
→脆弱性がある
→現場に出ている方からは時代遅れではないかも?という声も
・フロントのトレンドはどう知る?
→ニュースサイトで情報収集
→Twitterでjsのどういうものが人気なのかなどで情報収集する
→求人サイトで募集されている項目を見る
・初期設計の注意点
・HTMLのタグのひとつ「iframe(インラインフレーム)」の概要・使い方
・その他フロント業務に関する技術・情報
以上について、座談会形式でざっくばらんに意見交換が行われました。
■初期設計の注意点
・一からコーディングする際に、CSSはパーツ化して作成する
→パーツ化はデザイン作成ツールで使われているパーツを
XDやFigmaを参考に作成していく
→デザインを見て共通化できるものを探して作成する
→各セクションに分けてレイアウトを色分けし、大枠を作る
→横幅の最大値を先に決める
・レスポンシブ対応は基本になるPCのデザインを作った後にスマホ版を作る
XD:デザインツール、Adobeのソフト
Figma:デザインツール、複数の人が編集できる
■「iframe(インラインフレーム)」の概要・使い方
・iframeとは外部のサイトを組み込んで表示させたい時に使用する
HTMLのタグのひとつ
・今回は、ガジュマルのオフィシャルサイト(HTMLベタ書きの静的ページ)に
iframeを使用し、外部のサイトから記事を持ってくるようにした
(画面の一部を組み込む場合によく使う現場ではSNSを引っ張ってくるのに使われている)
■フロント業務に関する技術・情報
・JQuery時代遅れ問題
→他に便利なjsが出てきた
→脆弱性がある
→現場に出ている方からは時代遅れではないかも?という声も
・フロントのトレンドはどう知る?
→ニュースサイトで情報収集
→Twitterでjsのどういうものが人気なのかなどで情報収集する
→求人サイトで募集されている項目を見る