デザインパターン | 学校法人コア学園 秋田コア ビジネスカレッジ

デザインパターン

  • ※これは【パーツを追加】ボタンを押してどんなデザインパーツが作れるかを試したサンプルページです。

高度職業実践科 ＩＴスペシャリストコース（２・３年）

仮想空間と現実を繋げてみた

「kinect（キネクト）」というカメラを使い、「kinect」に写った人間の動きを認識して仮想空間のキャラクターと連動するというシステムを作ってみました！是非ご覧ください♪

メインタイトル（h2）

下線有りタイトル（h3）

緑背景のタイトル（h4）

左側に線のあるタイトル（h5）

テキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリアテキストエリア
トップページHTMLタグ自体は埋め込むことが可能です。

キャッチコピー【メインエリア20文字】

キャッチコピー【サブエリア】

leftPhotoImage
左側画像・右側テキスト【テキストエリア】
※画像は縦横1080pxベースだが、縦横296.4pxに強制縮小されている

左側画像、右側キャッチコピー・テキスト【キャッチコピーエリア】

左側画像、右側キャッチコピー・テキスト【テキストエリア】
※画像は縦横1080pxベースだが、縦横296.4pxに強制縮小されている

2カラムボックス（タイトル・画像・キャプション）【タイトルエリア（左）】

2カラムボックス（タイトル・画像・キャプション）【キャプションエリア（左）】
※画像は1080px→382.2pxへ強制縮小化

2カラムボックス（タイトル・画像・キャプション）【タイトルエリア（右）】

2カラムボックス（タイトル・画像・キャプション）【キャプションエリア（右）】
※画像は1080px→382.2pxへ強制縮小化

3カラムボックス（画像・キャプション）【キャプションエリア（左）】
※画像は1080px→249.6pxへ強制縮小化

3カラムボックス（画像・キャプション）【キャプションエリア（中央）】
※画像は1080px→249.6pxへ強制縮小化

3カラムボックス（画像・キャプション）【キャプションエリア（右）】
※画像は1080px→249.6pxへ強制縮小化

  • ※１注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト
  • ※２注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト
  • ※３注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト注意書きリスト
  • ※ここは何行でも増やせます。
  • 箇条書きリスト（数字付）【テキストエリア１】
  • 箇条書きリスト（数字付）【テキストエリア２】
    ここのリンクは手作業です。ハンドメイド
  • 箇条書きリスト（数字付）【テキストエリア３】
  • 箇条書きリスト（数字付）【テキストエリア４】
形式：〇〇｜-------【テキスト（左）エリア１】
形式：〇〇｜-------【テキスト（右）エリア１】
形式：〇〇｜-------【テキスト（左）エリア２】
形式：〇〇｜-------【テキスト（右）エリア２】
※行は何行でも増やせる
  • 囲み線あり、2カラムリスト【テキストエリア１】
  • 囲み線あり、2カラムリスト【テキストエリア２】ここのリンクは手作業です。ハンドメイド
  • 囲み線あり、2カラムリスト【テキストエリア３】
  • 囲み線あり、2カラムリスト【テキストエリア４】
  • 右側 箇条書きリスト、左側 画像【テキストエリア１】
  • 右側 箇条書きリスト、左側 画像【テキストエリア２】ここのリンクは手作業です。ハンドメイド
  • 右側 箇条書きリスト、左側 画像【テキストエリア３】何行でも増やせる※画像は1080px→296.4pxへ強制縮小化
  • 右側 画像、左側 箇条書きリスト【テキストエリア１】
  • 右側 画像、左側 箇条書きリスト【テキストエリア２】ここのリンクは手作業です。ハンドメイド
  • 右側 画像、左側 箇条書きリスト【テキストエリア３】
  • 右側 画像、左側 箇条書きリスト【テキストエリア４】何行でも増やせる※画像は1080px→296.4pxへ強制縮小化

左側画像、右側タイトル・テキスト（50：50）【タイトルエリア】

左側画像、右側タイトル・テキスト（50：50）【テキストエリア】
※画像は1080px→382.2pxへ強制縮小化

ここのリンクは手作業です。ハンドメイド

左側タイトル・テキスト、右側画像（50：50）【タイトルエリア】

左側タイトル・テキスト、右側画像（50：50）【テキストエリア】
※画像は1080px→382.2pxへ強制縮小化

ここのリンクは手作業です。ハンドメイド

（上）フルサイズ画像、（下）テキスト3カラム【テキストエリア１】必須ではない
※画像は1080px→780pxへ強制縮小化

（上）フルサイズ画像、（下）テキスト3カラム【テキストエリア２】必須ではない

（上）フルサイズ画像、（下）テキスト3カラム【テキストエリア３】必須ではない

ここのリンクは手作業です。ハンドメイド

表（テーブル）【項目エリア１】
表（テーブル）【内容エリア１】
表（テーブル）【項目エリア２】
表（テーブル）【内容エリア２】
表（テーブル）【項目エリア３】
表（テーブル）【内容エリア３】
※行は何行でも増やせる

  • Ｑ

    質問１

    • Ａ

      回答１

↑