作成日：2021/04/12　更新日：2023/07/10

#4 レスポンシブコーディングとは

レスポンシブコーディングの基礎知識

Responsiveレスポンシブとは「反応はんのうする」という意味です。 ユーザーがホームページを見る機器の環境デバイスはそれぞれ違うため、表示される範囲やサイズが全く異なります。 その都度htmlやcssを作り直して対応させるのは大変なので、スタイルシート（css）を環境ごとに反応させて、表示レイアウトを整えることを指します。

例の一つとして緑のheader部分の幅が、PCとSPスマートフォンで異なります。また、PCでは横並びになっている黄色とピンクのエリアが SPでは縦に並んでいます。
cssではウィンドウの幅によってプロパティや値を変える機能があります。 ウィンドウ幅が小さい場合や小さくなったタイミングで、 別のプロパティや値を適応させることで、 配置の順番やサイズや色または要素を非表示にするなど、様々に要素を変化させることができます。

#5 cssメディアクエリについて

cssメディアクエリの設定

要素のプロパティと値を、横幅サイズによって変えることができます。
対象となるcssのセレクタの下に
@media screen and ( 画面幅の条件 ) {
　　セレクタ{ プロパティ:値; }
}
として、同じセレクタ名を囲います。
レスポンシブコーディングは、このようにまず分岐点ブレイクポイントを設定してデザインをしていきます。
このときの条件はmax-width: 1024pxやmin-width: 768pxと言った具合に、 指定された***-width:***pxの範囲内では{ }の中のセレクタの内容が反映されます。 

.contents { /* 基準となるcss（PCかSPかを自分で決めます） */
  width:95%;
  font-size:14px;
}
/* 以下は画面サイズが1024px以上になったら適応されます */
@media screen and (min-width:1024px){
  .contents {
    display: flex;
    width:1200px;
    font-size:18px;
  }
}
/* 以下は画面サイズが768px以下になったら適応されます */
@media screen and (max-width:768px){
  .contents {
    width:100%;
  }
}
/* 以下は画面サイズが768px〜1024pxまでのあいだに適応されます */
@media screen and (min-width:768px) and (max-width:1024px){
  .contents {
    display: flex;
  }
}

メディアクエリを設定するときには「デスクトップ(PC)ファースト優先」か「モバイルファースト優先」といった、 どちらのデバイスで見た時を優先して作るのかを意識しながら作ります。 googleの検索エンジンは2018年4月より「モバイル ファースト優先 インデックス+ing索引登録(MFI)」という、 モバイルでの表示内容を検索順位に反映させるという機能を実装しました。

これをうけて基本的には、モバイルに合わせたデザイン設計が求められます。
スマホで見たときに、PCと同じレイアウトの縮小版で表示するようなことは避けるようにしましょう。

とはいえ、デザインするときには、制限の少ない大きな表示（PC）を基準にして、 幅の小ささなどの制限の大きなSPをメディアクエリに設定してコーディングすることが多いです。

#6 作ったhtmlをレスポンシブ化してみよう

レスポンシブ化の準備

以前作った入門3 #1 実践を踏まえたコーディングで作ったデータのフォルダをコピーし 名前を[フォルダ名_resp]に変更してください。（“フォルダ名”の名称は開発環境ごとに変えてください）
厳密に言えば実機テストが必要ですが今回はブラウザのレスポンシブデザインモードで確認します。

レスポンシブデザインモードについて

擬似的に画面の横幅を縮めて、スマートフォンやタブレットで画面がどのように見えるかを確認できる機能です。
レスポンシブコーディングをする時には必須の機能なので、使い方に慣れておきましょう。

chromeの場合は⌘+option+i。firefoxの場合は⌘+iでこの「デベロッパーツール」を表示できます。
このレスポンシブデザインモードを使えば、大体のレイアウトは確認できますが、実際にスマートフォンで確認(実機確認)をすると実は崩れていた、、、ということがありますので、実際の案件やプロジェクトでは必ず実機確認をするようにしましょう。

レスポンシブに対応するhtmlのmetaタグ

まずはhtmlのheadタグ内に、metaタグのviewportビューポート指定にし、 content内にプロパティ=値の形式で入れます。
スマホで見た際にPC用の文字のサイズ（小さい）になることを防ぎ、デバイスサイズに合わせた文字サイズになります。 

<meta name="viewport" content="width=device-width, initial-scale=1">
属性タグcontentに入れるプロパティ=値
width=device-width表示幅 = デバイスの幅に合わせる
initial-scale=1.0初期の表示 = 1倍に
minimum-scale=1.0最小倍率 = 1倍以上に縮小させない
user-scalable=noズームが可能か = できない

メディアクエリの書き方

cssで適度なセクションごとにメディアクエリを適応させていきます。
今回はわかりやすくするために、ひとつのセレクタ毎にメディアクエリを作っていきます。
SP用とPC用の両方で、同じプロパティの同じ値がある場合はメディアクエリ側を削除します。

[フォルダ名_resp]内のcss/style.cssを開いて編集していきます。

(例) セレクタ.header__wrapをレスポンシブ化する場合

.header__wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 86%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) { /* メディアクエリの場所 */

}
メディアクエリの場所を作り、適応させる指示を記述していきます。

.header__wrap { /* PC表示を基準にしてます */
  width: 85%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {  /* 最大768pxまで */
  .header__wrap {
    width: 85%;                      /* SPの時は横幅100%にしたいのでwidth:100%;に書き換える */
    margin: 0 auto;                  /* PC用と同じで良いので削除 */
    display: flex;                   /* PC用と同じで良いので削除 */
    justify-content: space-between;  /* PC用と同じで良いので削除 */
    align-items: center;             /* PC用と同じで良いので削除 */
    flex-direction: column;          /* SPの時だけに適用したいので新しく記述 */
  }
}
コメントのとおりに、PCと変えない部分は不要なので、プロパティを削除していきます。
0px〜768pxまでの画面幅のとき、主にSPサイズになるとここのプロパティと値が適応されます。リストをロゴの下に置きたいのでプロパティを追加します。 

/* PC用コーディング */
.header__wrap {
  width: 85%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* SP用コーディング */
@media screen and (max-width:768px) {
  .header__wrap {
    width: 100%;
    flex-direction: column;
  }
}
完成形としてはこのようになります。

メディアクエリを適応させたCSS

今回は下記のCSSをそのまま書き写しつつ、画面でどのような表示になるのかをつど確認しながら勧めていきましょう。 メディアクエリの挙動を理解できるようにしましょう（所要時間：2〜4時間） 

@charset "UTF-8";
/******************************
 初期設定
******************************/
body {
  color: #060606;
  font-size: 16px;
  font-family: sans-serif;
  letter-spacing: 0.06em;
}
a{
  text-decoration: none;
  color: #060606;
}

/******************************
 header CSS
******************************/
.header {
  width: 100%;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,.15);
}
@media screen and (max-width: 768px) {
  .header {
    padding: 10px 0;
  }
}

.header__wrap {
  width: 85%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .header__wrap {
    flex-direction: column;
    width: 100%;
  }
}

.header__logo {
  width: 54px;
  height: 76px;
}
@media screen and (max-width: 768px) {
  .header__logo {
    width: 40px;
    margin-bottom: 20px;
  }
}
.header__logo a {
  display: block;
}

.header__menu{
}
@media screen and (max-width: 768px) {
  .header__menu{
    width: 100%;
  }
}

.header__menu ul {
  display: flex;
}
@media screen and (max-width: 768px) {
  .header__menu ul {
    width: 100%;
  }
}

.header__menu ul li {
  width: 80px;
}
@media screen and (max-width: 768px) {
  .header__menu ul li{
    width: calc(100% / 4);
  }
}

.header__menu ul li a {
  display: block;
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .header__menu ul li a{
    font-size: 13px;
  }
}

/**********************************
 main
**********************************/
.main{
}
@media screen and (max-width: 768px) {
  .main {
    padding-top: 110px;
  }
}
.main section {
  width: 85%;
  margin:0 auto 60px;
}

.main__kv {
  width: auto;
  height: 70vh;
  display: flex;
  align-items: center;
  background: url(../images/top_kv.jpg) center/cover no-repeat;
  font:normal 24px/1.8 sans-serif;
  padding-left: 10%;
}
@media screen and (max-width: 768px) {
  .main__kv{
    height: 50vh;
    font-size: 18px;
  }
}

.main__about {
  padding: 0 10px 80px;
}
@media screen and (max-width: 768px) {
  .main__about {
    padding: 40px 0 120px;
  }
}

.main__about--ttl {
  margin-bottom:60px;
  text-align: center;
  color: #060606;
  font-size: 28px;
  letter-spacing: 4px;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .main__about--ttl {
    margin-bottom: 30px;
    font-size: 20px;
  }
}

.main__about--logo {
  width: 40%;
  margin:0 auto;
}
@media screen and (max-width: 768px) {
  .main__about--logo {
    width: 30%;
  }
}

.main__about--txt {
  margin: 45px 0 60px;
  text-align: center;
  padding:0 20px;
  font:normal 16px/2 sans-serif;
  letter-spacing: 4px;
}
@media screen and (max-width: 768px) {
  .main__about--txt {
    width: 80%;
    margin: 30px auto 40px;
    font-size: 13px;
  }
}

.main__service {
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .main__service {
    padding-bottom: 60px;
  }
}

.main__service--message {
  margin-bottom: 95px;
  display: flex;
}

.main__service--message h2 {
  flex: 1;
  flex-direction: column;
  font-size: 50px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .main__service--message h2 {
    font-size: 30px;
    text-align: center;
  }
}

.main__service--message p {
  flex: 2;
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: 2px;
}
@media screen and (max-width: 768px) {
  .main__service--message p {
    font-size: 14px;
    margin-top: 30px;
  }
}

.main__service--list {
  display: flex;
}
@media screen and (max-width: 768px) {
  .main__service--list {
    flex-direction: column;
  }
}

.main__service--list li {
  flex:1;
  margin-right: 2%;
}
@media screen and (max-width: 768px) {
  .main__service--list li {
    width: 100%;
    margin-bottom:30px;
  }
}

.main__service--list li a {
  display: block;
}
.main__service--list li img {
  width: 100%;
  display: block;
}
.main__service--list h3 {
  margin: 50px 0 30px 0;
}
@media screen and (max-width: 768px) {
  .main__service--list h3 {
    margin: 10px 0;
    font-size: 16px;
  }
}

.main__service--list li p{
}
@media screen and (max-width: 768px) {
  .main__service--list li p{
   font-size: 13px;
  }
}

.main__news {
  padding: 0 20px 0;
}
@media screen and (max-width: 768px) {
  .main__news {
    padding: 50px 0 0;
  }
}

.main__news--ttl {
  margin-bottom: 16px;
  font-size: 48px;
}
@media screen and (max-width: 768px) {
  .main__news--ttl {
    font-size: 30px;
    text-align: center;
  }
}

.main__news--list {
  padding: 40px 12px;
}
.main__news--list li {
  border-bottom: 1px solid #e8ecee;
}
.main__news--list li:first-child{
  border-top: 1px solid #e8ecee;
}
.main__news--list li a {
  display: block;
  padding: 50px 20px;
}
@media screen and (max-width: 768px) {
  .main__news--list li a {
    display: block;
    padding: 24px 12px;
  }
}
.main__news--list li a:hover{
  background: #e8ecee;
}

.main__news--item{
  display: flex;
}
@media screen and (max-width: 768px) {
  .main__news--item {
    flex-direction: column;
    line-height: 1.6;
  }
}

.main__news--day {
  width: 264px;
  display: flex;
  align-items: center;
  margin-right: 32px;
}
@media screen and (max-width: 768px) {
  .main__news--day {
    width: 100%;
    margin-bottom: 8px;
  }
}

.main__news--date {
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .main__news--date {
    margin-right: 0;
  }
}


/**********************************
 footer
**********************************/
.footer{
  padding: 90px 0 70px;
  border-top: 1px solid #e8ecee;
}
@media screen and (max-width: 768px) {
  .footer {
    padding-top: 50px;
  }
}

.footer__logo {
  width: 100px;
  margin: 0 auto;
}

.footer__copyright {
  margin-top: 30px;
  text-align: center;
  color: #b5b5b5;
  font-size: 11px;
}
Webでの表示はこのようになります

カウント系の擬似クラスについて

入門2 #6で擬似クラスで軽く紹介しましたが、ここでもう少し詳しく説明します。
このnthエヌス系の指示を使うと、指定したセレクタに当てはまる要素で、 n番目の要素にだけ指示を出す事ができます。
例えば以下のようなHTMLとCSSがあったとします。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>


ul li:nth-child(3){
  background-color: #000;
}
上の例では、CSSでulの中のli要素という条件を指定し、その中で3番目の要素にだけ、指示をだすという意味です。
nthエヌスとはn（natural number = 自然数、1,2,3..みたいな整数。小数点じゃないよの意味）とth（番目）をくっつけた言葉で、 まだ決まっていない整数の番目という意味です。

カウント系の擬似クラスの使い方

:nth-child(n)エヌス チャイルド
:nth-of-type(n)エヌス オブ タイプ 



  
P①

  
P②

  
P③

  
div

P①

P②

P③

div

こんな感じの要素の列を用意しました。
中身に違う種類のタグがあるかどうかで使う疑似クラスが変わってきます

 

p:nth-child(3){
  background-color: #fcc;
}

P①

div

P②

P③

要素の種類は関係なく指定の番目に適応されるが、

P①

P②

div

P③

指定番目が違う要素の場合はエラー


p:nth-of-type(2){
  background-color: #fcc;
}

P①

div
div

P②

P③

指定の子要素（この場合pタグ）のみのカウント。途中の異なる要素は無視される


p:nth-child(odd){
  background-color: #fcc;
}

P①

P②

P③

P④

P⑤

P⑥

P⑦

odd=奇数　even=偶数


p:nth-child(3n){
  background-color: #fcc;
}

P①

P②

P③

P④

P⑤

P⑥

P⑦

3の倍数だけを指定してみた場合


p:nth-child(n+5){
  background-color: #fcc;
}

P①

P②

P③

P④

P⑤

P⑥

P⑦

0+5、1+5、2+5...のように5番目以降の要素に指示を出す
:first-childファースト チャイルド

最初に子要素をカウントし、指定の番号に指定の要素があれば適応させる。


:first-of-typeファースト オブ タイプ

指定された子要素のみをカウント

 

p:first-child{
  background-color: #fcc; ←ピンク
}

P①

P②

P③

div

最初からpタグなので問題なく適用されます

div

P①

P②

P③

最初が指定のpでなくdivなのでエラーになる


p:first-of-type(1){
  background-color: #fcc;
}
div

P①

P②

P③

指定の子要素（この場合pタグ）のみのカウントなので、最初のdivは無視される
:last-childラスト チャイルド
:last-of-typeラスト オブ タイプ
:nth-last-child(n)エヌス ラスト チャイルド
:nth-last-of-type(n)エヌス ラスト オブ タイプ 

p:last-child{
  background-color: #fcc;
}
div

P①

P②

P③

最後はpタグなので問題なく適用されます

P①

P②

P③

div

最後が指定のpでなくdivなのでエラーになる


p:last-of-type{
  background-color: #fcc;
}

P①

P②

P③

div

指定の子要素（この場合pタグ）のみのカウントなので、最後のdivは無視される


p:nth-last-child(3){
  background-color: #fcc;
}

P①

P②

P③

div

P④

要素の種類は関係なく指定の番目に適応される


p:nth-last-of-type(3){
  background-color: #fcc;
}

P①

P②

P③

div

P④

指定の子要素（この場合pタグ）のみのカウント。途中の異なる要素は無視される
:not()ノット 



  
P①

  
P②

  
P③

  
P④

  
P⑤

P①

P②

P③

P④

P⑤

 

p:not(:first-child){
  background-color: #fcc;
}

P①

P②

P③

P④

P⑤

指定の子要素（この場合pタグ）のみのカウント。途中の異なる要素は無視される


p:not(.nth-not){
  background-color: #fcc;
}

P①

P②

P③

P④

P⑤

指定のクラスを外すという指定方法

htmlに書かずにCSSで文字や画像をつける

擬似要素 ::before/::afterについて

::beforeや、::afterを使うと、指定した要素の前後に新しく要素を作ることができます。
beforeビフォーは前、 afterアフターは後の意味です。
擬似要素は全てCSSで記述するため、HTMLファイルに直接書かない = 実体がないので擬似要素と呼ばれています。擬似要素は装飾で使われることが多いです。
疑似要素（before、after、first-letterなど）の前にコロン（:）が2つ（::）つきますが、これはcssのバージョンであるcss3から使えます。 古いブラウザ（IE8など）を切り捨てる場合は、新しい書き方のコロン2つでかきましょう。
※ただ、擬似クラス（nth-childなど）に2つコロンをつけないように気をつけましょう。
疑似要素、::before/::afterを使う時の注意点
  1. contentプロパティをつける(とても重要、これがないと表示されません)
  2. 最初はインライン要素として扱われる(幅と高さを指定するときはブロックレベルにする)

::before/::afterでよくある装飾

アイコンをつける

<div class="arrow">矢印文字です(::before要素)</div>
<div class="men">男性です(::before要素)</div>
<div class="woman">女性です(::after要素)</div>


.men, .woman, .arrow {
  display: flex;
  align-items: center;
}
.arrow::before {
  content: '→';
}
.men::before {
  content: '';    /* 擬似要素を使う時は必ず必要(決まり文句) 文字は入れないので空白 */
  width: 20px;    /* 横幅指定 */
  height: 20px;   /* 高さ指定 */
  background-image: url(images/men.svg);  /* 背景画像としてアイコンを指定 */
}
.woman::after {
  content: '';
  width: 20px;
  height: 20px;
  background: url(images/woman.png) center/cover no-repeat;
}
矢印文字です(before要素)
男性です(before要素)
女性です(after要素)

線で作った矢印をつける

<ul class="list">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>


.list > li{
  position: relative;
  border-bottom: 1px solid #222;
}
.list > li:first-child{
  border-top: 1px solid #222;
}
.list > li::before{
  display: block;
  content: '';     /* 文字は入れないので空白 */

  /* 矢印を作る */
  width: 6px;
  height: 6px;
  border-top: 2px solid #7a0;    /* 上の線 */
  border-right: 2px solid #7a0;  /* 右の線 */
  transform: rotate(45deg);      /* 線を回転 */

  /* 位置の指定 */
  position: absolute;    /* 自由に位置を指定できる */
  top: calc(50% - 3px);  /* 上からの位置 */
  right: 10px;           /* 右からの位置 */
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4

マウスオーバーしたら矢印が出る

<ul class="list-hover">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
</ul>


.list-hover > li{
  position: relative;
  border-bottom: 1px solid #222;
}
.list-hover > li:first-child{
  border-top: 1px solid #222;
}
.list-hover > li:hover::before{  /* :hoverを追加しただけ */
  display: block;
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  right: 10px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #7a0;
  border-right: 2px solid #7a0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
  • リスト1
  • リスト2
  • リスト3
  • リスト4
入門入門

入門1（コーダー初級）

  1. Webサイトを作る準備
  2. Webサイトはhtmlとcssで作る
  3. htmlとcssの決まりごと
  4. htmlは枠というブロックのパズル
  5. htmlでの枠の使い方と特性
  6. cssでデザインしてみる
  7. cssでデザインする時のプロパティ
  8. 簡単なWebサイトを作ってみよう
  9. 枠をなぞってhtmlを作る
  10. 枠に名前をつけて個別にデザインする
  11. 枠を中央に配置する方法
  12. 2つの枠を横並びにする方法
  13. 枠だけのホームページが完成
  14. 枠の中に画像や色を入れる
  15. 枠の中にテキストを入れる
  16. 簡単なwebサイトの完成
  17. 完成したレイアウトを拡張する

入門2（コーダー中級）

  1. 枠のことを「要素」と呼ぶ
  2. 要素のレイアウトに便利なflexボックス
  3. 要素の種類を変えるdisplayプロパティ
  4. 要素の位置を調整できるpositionプロパティ
  5. 要素を回り込みさせるfloatプロパティ
  6. いろんなcssのセレクタ指定方法

入門3（コーダー上級）

  1. 実践を踏まえたコーディング
基礎基礎

基礎1（マークアップ 初級）

  1. インターネットの仕組み
  2. FTP接続
  3. SEOについて
  4. レスポンシブコーディングとは
  5. ビューポート、cssメディアクエリについて
  6. 作ったhtmlをレスポンシブ化してみよう
  7. レスポンシブコーディングでサイト制作①
  8. レスポンシブコーディングでサイト制作②

基礎2（マークアップ 中級）

  1. エクセル関数について
  2. エクセル関数（売上票を作る）
  3. エクセル関数（成績表を作る）
  4. jQueryってなに？
  5. jQueryライブラリの読み込み
  6. 簡単な機能をjQueryで実装しよう
  7. 変数を使う
  8. 関数を使う
  9. コンソールでデータの確認
  10. モーダルウィンドウを作る

基礎3（マークアップ 上級）

  1. jQueryプラグインを実装してみる
  2. CSSでアニメーション(transform,transition)
  3. デザインでよく使うtransitionスニペット
  4. Sassを使ってCSSを効率的に記述する
  5. SCSSの使い方
応用応用

応用1（フロントエンドエンジニア 初級）

  1. ローカルにWeb開発環境を作る(LAMP)
  2. PHPについて
  3. PHPの変数
  4. PHPで条件によって処理を変える（条件分岐）
  5. PHPで繰り返し処理を行う（ループ処理）
  6. PHPの配列変数（変数に複数データ）
  7. PHPで配列のループ処理
  8. PHPを便利にするいろんな記号
  9. データベース（DB）を作る

応用2（フロントエンドエンジニア 中級1）

  1. PHPとjsで簡単なアプリを作ってみよう
  2. PHPのエラーをブラウザに表示させる
  3. データベース(DB)に接続する
  4. DBデータをhtmlで表示させる
  5. formタグから入力したデータをDBに登録
  6. jQueryで要素をドラッグ移動させる
  7. データをAjaxでPHPに送信しDBに登録
  8. PHPで簡単にできるデバッグ方法
  9. 作ったプログラムを拡張してみる
  10. リレーショナルデータベース
  11. PHPのクラスを理解するための準備
  12. PHPアプリケーションをクラス化してみよう

応用3（フロントエンドエンジニア 中級2）

  1. CMSについて
  2. WordPressのインストールと初期設定
  3. 独自テーマを作る
  4. 共通部分をテンプレート化
  5. TOPページを作る
  6. 下層ページを作る
  7. 固定ページにNEWS投稿を読み込む
  8. 便利なプラグインを使う
  9. カスタムフィールド機能を使う
  10. その他の便利なWordPressの機能
  11. カスタム投稿機能を使う
  12. カスタムタクソノミー機能を使う
実践フロントエンド実践フロントエンド

実践1（フロントエンジニア 中級3）

  1. コマンドラインを使おう
  2. Homebrewのインストール
  3. Gitでファイルのバージョン管理
  4. Gitを視覚的に確認
  5. Gitでファイルを共有する
  6. Gitでファイルの取り込み

実践2（フロントエンドエンジニア 中級4）

  1. Vue.jsをインストールして動作確認
  2. 静的なページをVue.jsを使って構築する
  3. Veu.jsをCDNで読み込み画面表示させる
  4. PHPの代わりにVue.jsでHTML表示
  5. VueコンポーネントでHTML表示させる

実践3（フロントエンドエンジニア 上級1）

  1. VueとWebAPIでアプリを作る
  2. APIファイルを自作する
  3. Vueでドラッグ&ドロップ
  4. Vue.js + WordPressでヘッドレスCMSを作る
実践バックエンド実践バックエンド

実践3（バックエンド Laravel）

  1. PHPフレームワークのLaravel(ララベル)をつかおう
  2. Laravelをローカル環境に導入する準備
  3. Laravelの環境構築の方法
  4. Laravelでアプリケーション作成の準備
  5. Laravelでブラウザに表示されるかを確認する
  6. Laravelの仕組み〜MVCの理解〜
  7. Laravelでデータベースのデータを表示する方法
  8. Laravelアプリでデータを新規登録する方法
  9. LaravelでAjaxのデータを登録する方法
  10. Laravelでアプリを作ってみよう
デザインデザイン

入門（デザイン概論）

  1. デザインを科学する
  2. 観察（与件の整理）
  3. 実験（別案の作成）
  4. 数字（裏付けとなる数字）
  5. デザイン（配置の優先順位）
  6. デザイン（余白をつくる）
  7. デザイン（目を引く方法と目線の流れ）
  8. デザイン（書体を考える）
  9. デザイン（立体感を出す）

基礎（デザイン実践）

  1. バナーをデザインする

応用（クリエイティブ）

  1. 居酒屋サイトを作る
  2. クリニックサイトを作る
  3. キャンペーンLPを作る
キッズキッズ
コピーしました
RSS https://cbc-study.com/rss.xml　
質問などあればSlackで。誰でも無料でできます
cbc-study.slack.com 質問の仕方はこちらをごらんください
powerd by logo