#1 居酒屋サイトを作る

企画書・提案書を見ながら、要件に沿ってサイトのトップページデザインをやってみましょう。
内容を読み解き、参考サイトを見つけ、最適なデザインを行いましょう。 Adobe XD でデザインし、レスポンシブコーディングまでやってみましょう。
コーディングはVisual Studio Codeを使い、CSSはBEM記法を使ってSCSS で組んでみましょう。

与件:ワイン居酒屋サイト

1. ターゲット: 20〜30代女性。女子会で使うことを想定
2. サイトイメージ: ワインと料理が美味しそうに見えるイメージ
3. サイトカラー
  ベースカラー: 白、茶
  メインカラー: 赤、オレンジ、こげ茶
4. フォント: タイトル(見出し)フォント:丸みのあるフォント,最小フォントサイズ:16px
5. 予約が簡単にできるデザイン的な仕掛け(UI・UX)がほしい。
完成したらSlack(CBC-STUDY)のメンターにレビューしてもらいましょう。

参考となる枠組み



BEMのメモ

block__element--modifier
  • ブロック   :親要素 塊、コンポーネント
  • エレメント  :子要素 ブロックの中にのみ存在できる要素
  • モディファイア:Block(Element)の装飾の変化 色違いなど

UAのメモ

またJavaScript(jQuery)をつかって、PCなのかスマホ(SP)でアクセスしているのかなどのデバイス(ユーザーエージェント)を見分けて、SPの場合は要素を削除したり、表示させたり…といった手法も活用しましょう。

/* アクセスユーザー情報からPCなのかSPなのかを調べ、変数getDeviceにいれる */
let getDevice = (function(){
  let ua = navigator.userAgent;
  if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
    return 'sp';
  }else{
    return 'other';
  }
})();

if(getDevice === 'sp'){
  $(".削除したい要素").remove();
  $(".表示させたい要素").css('display','block');
}else if(getDevice === 'other'){
  $(".削除したい要素").remove();
  $(".表示させたい要素").css('display','block');
}
コピーしました
RSS https://cbc-study.com/rss.xml 
質問などあればSlackで!無料です