webサイトデザインAI入門科授業用ブログ

池袋フェリカテクニカルアカデミーの求職者支援訓練の授業解説ブログです。

ページネーションの導入が簡単に出来る「paginathing.js」

ページネーション(pagination)とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。



f:id:yachin29:20190628135452p:plain


github.com


BootstrapCSS

今回のプラグインcssファイルを使用せずに「BootstrapCSS」というフレームワークを使用しています。ただしフレームワークは必要無いcssまで記述されているので注意が必要です。

bootstrap CDN
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css



getbootstrap.com



html

<ul class="list-group">
<li class="list-group-item">
<div class="box">
コンテンツ1
</div>
</li>
<li class="list-group-item">
<div class="box">
コンテンツ2
</div>
</li>
<li class="list-group-item">
<div class="box">
コンテンツ3
</div>
</li>
<li class="list-group-item">
<div class="box">
コンテンツ4
</div>
</li>
</ul>

jquery

$(function(){
$('.list-group').paginathing({
perPage: 4,
containerClass: 'panel-footer'
})
});

sassの便利な機能を使う

入れ子(ネスト)にできる

style.scss

header {
 width: 100%;
 height: 100px;
 background: #B6E3F4;
    >h1 {
      text-align: center;
    }
}

style.css

header {
  width: 100%;
  height: 100px;
  background: #B6E3F4;
}
header > h1 {
  text-align: center;
}
メデイアクエリーもネストで記述する事で、見通しが良くなります。

style.scss

body {
background: #F00;
  @media (max-width:640px) {
    background: #000;
  }
}

style.css

body {
  background: #F00;
}

@media (max-width: 640px) {
  body {
    background: #000;
  }
}
擬似クラスの場合

style.scss

a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;

  &:hover{
  background-color: gainsboro;
  color: #222;
  }
}

style.css

.g-nav ul li a {
  display: block;
  text-align: center;
  line-height: 50px;
  color: #FFF;
}
.g-nav ul li a:hover {
  background-color: gainsboro;
  color: #222;
}
擬似要素の場合

style.scss

a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;

  &::before{
  display: block;
  content: "";
  }
}

変数が使える

style.scss

$point-pc: 1240px;
$point-tablet: 959px;
$point-lsp: 767px;
$point-sp: 575px;

演算できる

style.scss

$space: 8px;

h1{
  margin-bottom:$space * 2;
}


style.css

h1 {
  margin-bottom: 16px;
}

関数で繰り返し等の処理が出来る

style.scss

 @for $i from 1 through 8 {
    $width: percentage(1 / $i);
    .col#{$i} {
      width: $width;
    }
  }


style.css

.col1 {
  width: 100%;
}

.col2 {
  width: 50%;
}

.col3 {
  width: 33.33333%;
}

.col4 {
  width: 25%;
}

.col5 {
  width: 20%;
}

.col6 {
  width: 16.66667%;
}

.col7 {
  width: 14.28571%;
}

.col8 {
  width: 12.5%;
}

@mixinと@include を使ってスタイルを定義して、後で呼び出せる

PCファーストの場合
style.scss

//PCファースト
$point-spc: 1239px;
$point-tablet: 959px;
$point-lsp: 767px;
$point-sp: 575px;

@mixin spc {
  @media (max-width:$point-spc) {
    @content;
  }
}
@mixin tablet {
  @media (max-width:$point-tablet) {
    @content;
  }
}
@mixin lsp {
  @media (max-width:$point-lsp) {
    @content;
  }
}
@mixin sp {
  @media (max-width:$point-sp) {
    @content;
  }
}
body {
  background: #ccc;
}
  @include spc {
    body{
      background: #cf619e;
    }
  }
  body{
    @include tablet {
      background: #f00;
    }
  }
  body{
    @include lsp {
      background: #0F0;
   }
  }
  body{
    @include sp {
      background: #00F;
    }
  }

style.css

body {
  background: #ccc;
}
@media (max-width: 1239px) {
  body {
    background: #cf619e;
  }
}
@media (max-width: 959px) {
  body {
    background: #f00;
  }
}
@media (max-width: 767px) {
  body {
    background: #0F0;
  }
}
@media (max-width: 575px) {
  body {
    background: #00F;
  }
}


モバイルファーストの場合

//spファーストの場合
$point-lsp: 576px;
$point-tablet: 768px;
$point-spc: 960px;
$point-pc: 1240px;

@mixin lsp {
  @media (min-width:$point-lsp) {
    @content;
  }
}
@mixin tablet {
  @media (min-width:$point-tablet) {
    @content;
  }
}
@mixin spc {
  @media (min-width:$point-spc) {
    @content;
  }
}
@mixin pc {
  @media (min-width:$point-pc) {
    @content;
  }
}

自身のスキルを丁寧に説明する

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。

html5

htmlの授業ではhtml5を中心に学習しました。HTMLはマークアップ言語であり文書構造(アウトライン)を示す物です。html5ではheader要素やnav要素といった新しい要素を使用する事で、より明確に文書構造を示すことができるようになりました。また、h1~h6を使用し、適切な見出しの設定も行いました。これらはW3Cの仕様に準拠した形で記述しています。


また以下の項目も学びました。

  • picture要素を使い、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分ける「アートディレクション」が可能。
  • video要素やaudio要素を使用することで、動画データや音声データをシンプルに扱う事が出来る。
  • フォーム関連の新しい属性を使う事で、今までJavaScript等で行う事が一般的だった入力補助や入力チェックなどの機能を簡単に導入でき、短い作業時間でユーザーにとっても解り易いフォームを作る事が出来る。
  • HTML APIを使う事で様々は事が出来るようになります。授業ではHistory APIを使用して、ページ毎にユニークなタイトルやh1要素を指定出来る無限スクロールを作成しました。

developer.mozilla.org



css3

cssの授業ではcss3を中心に学びました。css3を使う事で今までビットマップ画像でしか表現出来なかった事がベクター形式であるcssで表現出来るようになりました。この事で、どんな解像度にも対応出来るマルチデバイス対応が容易になりました。

flexboxやgridレイアウト

今まではfloatやpositionを使ったレイアウトが一般的でしたが、マルチデバイスに対応させる為に煩雑な対応が必要でした。この新しいレイアウト方法を使用する事で、マルチデバイスに対応でき、かつ自由なレイアウトが容易に出来るようになりました。

様々な単位

vh、vwや%、remなどを使用する事で、様々なレイアウトをマルチデバイスに対応出来るようになりました。

ビットマップ画像の表示

フルードイメージやobject-fitを使用する事で、画像のアスペクト比に囚われない自由な画像表示が可能になります。

ブラウザ対応

上記で挙げた技術はブラウザーによっては未対応な物もあるので、「can i use」等のサイトで細かく対応ブラウザーとバージョンをチェックする必要があります。

チーム作業を見据えた命名規則

他人が見てもざっくり命名規則がわかる、保守性を考えた命名規則を使用したコーディングが出来ます。

カスタムプロパティを使用したデザイン設計

メインカラーや余白の基準値などを予め変数として保存しておき、必要なところで使用する


SVG

SVG画像を使用する事で、拡大縮小に強く、どのような解像度のデバイスにも対応出来ます。またSVG画像はXML形式で記述されている為CSSで簡単に操作が出来、CSS3のアニメーション機能とも相性が良く、webサイトに簡単にマイクロインタラクションを導入する事が出来ます。
さらに、Ajaxを使う事でhtmlファイルにインラインで挿入した冗長なSVGアニメーションの記述を外部ファイル化し、htmlファイルをシンプルにする事が出来ます。

Javascript/jQuery

  • DOMの操作
  • if文、for文
  • ランダムを使ったおみくじ
  • Ajaxでのファイル操作
  • clcikイベントやscrollイベントの設定
  • css3のアニメーション機能と連動(ハイブリッドアニメーション)
  • 様々なライブラリーを利用

PHP/Wordpress

  • xampp/mampを使った仮想サーバーの構築
  • get/postを使ったデータ通信
  • データベースとの接続およびデータの挿入や検索
  • includeを使ったテンプレート化
  • sessionを使ったデータ保存
  • バーチャルホストを設定して、ルートパスを有効にする
  • wpのオリジナルテーマの作成
  • wpを本番環境にデプロイする

photoshop

  • アートボードを使用して、カンプやバナーを複数サイズ展開させる
  • アセット機能を使った画像書き出し
  • 調整フィルターを使用した画像補正
  • フィルター機能を使用した画像作成

SASS

  • SCSS記法でのSASS
  • @importを使ってパーシャルファイルを読み込む
  • 演算をする
  • if文を使う
  • 関数を使う
  • @mixinを使ったメディアクエリの設定
  • Dart SASSで@useを使ってパーシャルファイルを読み込む
  • コンパイラーを使ってcssコンパイルする

Git

  • gitの基本設定
  • githubとの連動(ローカルにクローンを作成)
  • ブランチモデルに沿ったバージョン管理
  • githubでissue管理
  • github pagesを使ったホスティング

ポートフォリオの制作

  1. ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。
  2. 次にwebのポートフォリオを何で作るかを決めましょう。選択肢としては、htmlとcssで制作するか、wordpressを使って作るか、またテンプレートを上手く使う事も視野に入れておきましょう。
  3. ポートフォリオ自体の仕様が決まってきたら、次に中に入れるコンテンツの見せ方を考えてみましょう。もちろん色々な見せ方がありますが、授業でやった「作品のサムネイル」→「作品の詳細ページ」→「自身で制作した作品」という順に見せていく方法は有効な方法の1つです。また、ディレクター志望の場合、photoshopillustratorだけで無く、パワーポイントやエクセルといったoffice系のソフトを使ってポートフォリオを作っても良いと思います。
  4. 次にポートフォリオ全体のデザインイメージとファーストビューのデザインを決めていきましょう。既存のサイトなどを参考にツカミのあるファーストビューを作ってみましょう。また面接等で「なぜこのファーストビューにしたのか?」と質問された時に答えられるように答えを準備しておきましょう。



webdesigner-go.com


www.creativevillage.ne.jp




ポートフォリオのフォーマット

ポートフォリオを作るに当たって、Bootstrapなどのフレームワークを使用する事も視野に入れておきましょう。
それぞれのメリット・デメリットを理解し、自身にとって最も有効だと思う物を選択する事が大事です。


bootstrapのテンプレート

templatemag.com

templatemag.com



要件定義書の提出

要件定義とは、Web サイトやアプリケーションなどの開発初期段階において、発注者と受注者の情報共有のために、実装すべき機能や満たずべき性能を第3者でも分かるように明確化しておく作業のことです。
要件定義は、Web サイトやアプリ開発において非常に重要な役割を担っていて、要件定義のでき次第で開発の成功が左右されるとも言われています。
一般的に要件定義の主導権は受注側(開発側)のディレクターが担い、要件定義にどこまでこだわり、どこで完成とするか、判断する必要があります。でき上がった要件定義は、要件定義書として発行し、受発注間で管理します。
事前に要件定義をしっかり作って置く事で、クライアントに安心感を与える事も出来るので、必ず最初の顔合わせの前に自身でまとめておきましょう。



要件定義書サンプル


template.k-solution.info



uxmilk.jp



要件定義で明確にしたいポイント

システム部分
  • 新規or改修
  • 新規の場合、サーバー・ドメインをどうするか
  • 改修の場合はサーバーのFTP情報の確認
  • 埋め込むSNSの有無
  • お問い合わせフォームの必要性
  • 作業のタイムスケジュール
デザイン部分
  • メインターゲット
  • おおまかなデザインコンセプト
  • コーポレートカラーの有無
  • 出版物や販促物などの有無
  • 画像・文章の確認
  • 参考にしたいサイト


などをクライアントとミーティングを重ねて、明確にします。特に費用が発生するものは費用感もこちらで把握し、クライアントに提示しましょう。


各自まとめて欲しい内容

  • サイトの概要(どういったサイトを作るか)
  • クライアントの情報
  • クライアントの要望
  • サーバー・ドメイン情報
  • ページ構成・サイトマップ
  • 各ページのコンテンツ
  • ターゲットとなるユーザー
  • カラーマネジメント
  • デザインコンセプト


docs.google.com

jQueryでのcookieの指定

Cookie(クッキー)とは?

Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したときに ユーザーを特定し、情報を入力する手間が省けます。ショッピングサイトに訪問したとき、すでにログイン状態になっている、以前カートに入れた商品がそのまま残っているのは、Cookie機能がはたらいているからです。


似たような機能でSessionという機能がありますが、Cookieはクライアント側にデータを保存するのに対して、Sessionはサーバー側に保存されてるため機密性の高いデータを扱う場合はSessionを使った方が良いでしょう。



github.com



$(function(){
//jquery.cookie.jsの設定
if($.cookie('access')){
//既にアクセス済みの場合はカーテンを非表示
$('.curtainr').css({'display':'none'});
}else{
//初アクセスの場合はカーテンをfadeOutさせる
$('.curtain').delay(5000).fadeOut(400);
}
//ファイルがロードされたら
$(window).on('load',function(){
$.cookie('access',$('body').addClass('access'));
});
});