メモです
最終課題二日目
トップページを担当

検索機能をつける際に検索ボタンを画像に引っ付けたい
https://teratail.com/questions/60004
参考サイト
button_tagもしくはimage_submit_tagを使うと解決

画像の大きさを自由に変えた（ブロックに合わせた大きさ）
https://qiita.com/jag_507/items/79af40e12a2e50bbc04e
https://teratail.com/questions/39407
参考サイト
まず大きさを変えたい画像のimgにクラスをつける
そこに
max-width: 100%;
height: auto
を記述する

検索機能にクラスを書きたいがエラーが出た
多分form_tagの書き方が悪い
form_withで解決した

Formにcssの要素をつけたい
form{}で要素をつけれる

html li リストマーク（・）消す方法
list-style: none;

ブロック全体に画像を貼る時に使う
background-image: url(pict/bg-mainVisual-pict_pc.jpg)

まとめ（全体）
トップページ
部分テンプレート完成

デバイス
サーバーサイドの新規は完成
見た目も90％ほど完成

マイページ
ビューを作りました
サイドバーの中身をみんなで考えたいです

商品の出品ページ
見た目のみ

「疫病が流行ったら私を描きなさい」

と言われているそうなので、CSSでアマビエを描いてみました。

できた画像

色みは画像検索で出てきた参考画像で可愛かった組み合わせにしてます。
ちょっとファンシー。

できたコード

index.html

<p class="amabie">
<span class="eki">疫</span>
<span class="byo">病</span>
<span class="tai">退</span>
<span class="san">散</span>
</p>

style.css

.amabie{
    margin: 5em auto;
    padding: 0;
    position: relative;
    width: 280px;
    height: 600px;
    text-indent: -9999px;
    border-radius: 100px 100px 0 0;
}
.amabie span{
    display: block;
    text-indent: -9999px;
    position: absolute;
}
.amabie .eki{/* 髪 左側 */
    content: '';
    display: block;
    width: 230px;
    height: 480px;
    position: absolute;
    top: -20px;
    left: -40px;
    border-radius: 100px 120px 0 0;
    background-color: #eec6f5;
    z-index: 30;
}
.amabie .byo{/* 顔 */
    width: 280px;
    height: 200px;
    background-color: #faebd6;
    border-radius: 100px 100px 0 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}
.amabie .byo:before{/* 唇 */
    content: '';
    display: block;
    width: 60px;
    height: 40px;
    position: absolute;
    top: 110px;
    left: -35px;
    z-index: 55;
    background-image:linear-gradient(180deg, #faebd6 0, #faebd6 60%, transparent 60%, transparent 72%, #faebd6 72%);
    border-radius: 30px;
}
.amabie .byo:after{/* 目 */
    content: '';
    display: block;
    width: 45px;
    height: 50px;
    position: absolute;
    top: 90px;
    left: 30px;
    z-index: 55;
    background-image:
        radial-gradient(ellipse , #fff 0, #fff 70%, transparent 70%),
        linear-gradient(50deg, transparent calc(25% - 1px), #444 calc(25% - 1px), #444 calc(25% + 1px), transparent calc(25% + 1px), transparent calc(75% - 1px), #444 calc(75% - 1px), #444 calc(75% + 1px), transparent calc(75% + 1px)),
        linear-gradient(-50deg, transparent calc(25% - 1px), #444 calc(25% - 1px), #444 calc(25% + 1px), transparent calc(25% + 1px), transparent calc(75% - 1px), #444 calc(75% - 1px), #444 calc(75% + 1px), transparent calc(75% + 1px)),
        radial-gradient(ellipse , #444 0, #444 70%, transparent 70%);
    background-size: 5px 7px , 45px 50px , 45px 50px , 15px 25px;
    background-position:40% 40% , center center, center center, center center;
    background-repeat: no-repeat;
}
.amabie .tai{/* 耳 */
    width: 40px;
    height: 90px;
    position: absolute;
    top: 60px;
    left: 125px;
    z-index: 65;
    background-image:
        linear-gradient(-210deg, transparent 49%, #67c5db 50%, #67c5db 55%, #9added 60%),
        linear-gradient(210deg, #9added 49%, #67c5db 50%, #67c5db 55%, transparent 60%),
        linear-gradient(-180deg, #9added 42%, #67c5db 50%, #67c5db 58%, #9added 60%);
    background-size: 50px 40px, 50px 40px, 50px 30px;
    background-position: right top, right bottom, right center;
    background-repeat: no-repeat;
}
.amabie .tai:before{ /* 髪 右側 */
    content: '';
    display: block;
    width: 270px;
    height: 480px;
    position: absolute;
    top: -80px;
    right: -140px;
    border-radius: 100px 120px 0 0;
    background:
        linear-gradient(180deg, #eec6f5 50%, transparent 100%),
        linear-gradient(180deg, transparent 40%, #eec6f5 90%),
        linear-gradient(90deg, transparent 0, transparent 54%, #eec6f5 55%, #eec6f5 67%, #d7a2e0 67.5%, #d7a2e0 68.5%, #eec6f5 69%, #eec6f5 77%, #d7a2e0 77.5%, #d7a2e0 78.5%, #eec6f5 79%, #eec6f5 87%, #d7a2e0 87.5%, #d7a2e0 88.5%, #eec6f5 89%),
        radial-gradient(circle at bottom left, transparent 40%, #eec6f5 40%);
    background-position: 155px 0, 155px 330px, bottom left, 0 -100px ;
    background-size: 130px 150px, 130px 150px, 270px 420px, 270px 250px;
    background-repeat: no-repeat;
    z-index: 100;
}
.amabie .tai:after{/* 身体 */
    content: '';
    display: block;
    width: 280px;
    height: 310px;
    position: absolute;
    top: 140px;
    left: -125px;
    z-index: 55;
    background-color: #9added;
    background-image: 
        linear-gradient(180deg, #9added 0, #9added 50%, transparent  50%),
    radial-gradient(ellipse at top center, transparent 0, transparent calc(70% - 3px), #67c5db 70%, transparent 70%);
    background-size: 35px 50px, 35px 25px;
}
.amabie .san{/* 足 中央 */
    width: 100px;
    height: 160px;
    position: absolute;
    bottom: -40px;
    left: 90px;
    z-index: 60;
    background-image:
        linear-gradient(-180deg, transparent 0, #9added 20%, #9added 84%, transparent 100%),
        radial-gradient(circle at bottom center, transparent 40%, #faebd6 40%, #faebd6 70%, #9added 100%),
        radial-gradient(circle at bottom center, transparent 40%, #faebd6 40%, #faebd6 70%, #9added 100%);
    background-size: 100px 130px, 50px 50px, 50px 50px;
    background-position: right top, left bottom, right bottom;
    background-repeat: no-repeat;
    border-radius: 10px;
    transform: rotate(-1deg);
}
.amabie .san:before{/* 足 左 */
    content: '';
    display: block;
    width: 100px;
    height: 160px;
    position: absolute;
    bottom: 5px;
    left: -99px;
    z-index: 58;
    background-image:
        linear-gradient(-180deg, transparent 0, #9added 20%, #9added 84%, transparent 100%),
        radial-gradient(circle at bottom center, transparent 40%, #faebd6 40%, #faebd6 70%, #9added 100%),
        radial-gradient(circle at bottom center, transparent 40%, #faebd6 40%, #faebd6 70%, #9added 100%);
    background-size: 100px 130px, 50px 50px, 50px 50px;
    background-position: right top, left bottom, right bottom;
    background-repeat: no-repeat;
    border-radius: 10px;
    transform: rotate(12deg);
}
.amabie .san:after{/* 足 右 */
    content: '';
    display: block;
    width: 100px;
    height: 160px;
    position: absolute;
    bottom: 5px;
    right: -100px;
    z-index: 58;
    background-image:
        linear-gradient(-180deg, transparent 0, #9added 20%, #9added 84%, transparent 100%),
        radial-gradient(circle at bottom center, transparent 40%, #faebd6 40%, #faebd6 70%, #9added 100%),
        radial-gradient(circle at bottom center, transparent 40%, #faebd6 40%, #faebd6 70%, #9added 100%);
    background-size: 100px 130px, 50px 50px, 50px 50px;
    background-position: right top, left bottom, right bottom;
    background-repeat: no-repeat;
    border-radius: 10px;
    transform: rotate(-9deg);
}

/* アニメーション */

.amabie:after{
    content: '';
    display: block;
    width: 600px;
    height: 600px;
    position: absolute;
    top: -70px;
    right: -150px;
    z-index: 20;
}
.amabie:hover:after{
    background-image:
        radial-gradient(circle closest-side, #fff 40%, #fff5a8 70%, #fff5a8 80%, transparent 100%);
    background-position: left top;
    background-repeat: no-repeat;
    animation: anime1 3s linear .1s infinite;
}
.amabie:hover .san{
    animation: anime2 3s linear .1s infinite;
}
@keyframes anime1 {
    0%{
        transform: scale(1, 1);
    }
    30%{
        transform: scale(.7, .7);
    }
    70%{
        transform: scale(1.2, 1.2);
    }
    100%{
        transform: scale(1, 1);
    }
}
@keyframes anime2 {
    0%{
        transform: rotate(-1deg);
        left: 90px;
        bottom: -40px;
    }
    30%{
        transform: rotate(-4deg);
        left: 93px;
        bottom: -35px;
    }
    70%{
        transform: rotate(4deg);
        left: 85px;
        bottom: -35px;
    }
    100%{
        transform: rotate(-1deg);
        left: 90px;
        bottom: -40px;
    }
}

一番難しかったのは、身体のウロコ模様ですね。
倍サイズの半分ベタで、円形の一部を隠すことで実現してます。

background-imageは最初に描いたオブジェクトが一番上になるのを覚えておくと便利です。

hoverで後光が入り、足が動くアニメーションをつけました。
radial-gradientのいろんな可能性を見出した感じがします。

実際のサンプル

See the Pen amabie - CSSDrawing by Mei Koutsuki (@mei331) on CodePen.

CSSカウンターとは

文書内の位置に基づいてコンテンツの表示方法を調整することができます。
例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。
出典 : https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters

ランキングや目次などで「ナンバリングしたい」って時に、CSSカウンターを使うとよい感じにできます
※以下、pugとstylusで書いています

ul
  - for(var x = 0; x < 5; x++)
    li sample

li
  list-style: none
  counter-increment: num
  &:before
    content: counter(num) "."

counter-increment : 要素の連番（カウンタ）の値を進める。値にカウンタ名を定義することでページ内にその要素が現れるたびに、定義したカウンタの値が進められます。
プロパティを適用する要素に:beforeや:after擬似要素をつけ、contentプロパティでカウンタ名を指定することで、要素の直前または直後にカウンタの値を挿入することができます。

数字形式の表示方法の変更

content: counter(num, 表示形式)

decimal	数字（初期値）
lower-roman	ローマ数字（小文字）（例：ⅰ、ⅱ、ⅲ）
upper-roman	ローマ数字（大文字）（例：Ⅰ、Ⅱ、Ⅲ）
lower-alpha	アルファベット（小文字）（例：a、b、c）
cjk-ideographic	漢数字（例：一、二、三）
hiragana	ひらがな（例：あ、い、う）
katakana	カタカナ（例：ア、イ、ウ）
hiragana-iroha	いろは順（例：い、ろ、は）
katakana-iroha	イロハ順（例：イ、ロ、ハ）

※cjk-ideographicから下はIE非対応

カウンターの前後に文字列を挿入する

content: "第" counter(num) "章 "

counters() 関数

counters() 関数を使って入れ子になったカウンターの階層間に文字列を挿入することができます。
その際、子要素にcounter-resetプロパティでカウンタの値をリセットするのがポイント。

ul.parent
  - for(var x = 0; x < 3; x++)
    li sample
      ul.children
        - for(var y = 0; y < 2; y++)
          li test

li
  list-style: none
  counter-increment: num
.parent
  li
    &:before
      content: counter(num) "."  
.children
  counter-reset: num
  li
    &:before
      content: "第" counters(num, "-") "章 "

（編集途中で下書き保存したまま放置していた記事をようやく書き上げましたw）

Flexboxって様々なことができるのに全て覚えている人って少ないのではないでしょうか？
そこでFlexboxのプロパティをまとめてみました。

Flexboxの使い方

まずはFlexboxの使い方から
よく使う横並びの方法

flexbox.html

<div class="container">
  <div class="item">子要素 1</div>
  <div class="item">子要素 2</div>
  <div class="item">子要素 3</div>
</div>

親要素にあたるcontainerにdisplya: flexbox;を指定してあげるだけです。

flexbox.css

.container {
  display: flex;
}

これで子要素が横並びになるはずです。

Flexboxのプロパティ一覧

Flexboxには親要素にかけれるものと子要素にかけれるものの２種類あります。
まずは親要素にかけれるプロパティから。

親要素に指定するプロパティ

プロパティ	効果	使える値
flex-direction	子要素の並ぶ向きを指定することができる	row（初期値） : 子要素を左から右に配置 row-reverse : 子要素を右から左に配置 column : 子要素を上から下に配置 column-reverse : 子要素を下から上に配置
flex-wrap	子要素の折り返しを指定することができる	nowrap（初期値） : 子要素を折り返しせず、一行に並べる wrap : 子要素を折り返し、複数行に上から下へ並べる wrap-reverse : 子要素を折り返し、複数行に下から上へ並べる
flex-flow	flex-directionと、flex-wrapをまとめて指定することができる(ショートハンド・プロパティ )	-
justify-content	横並びの位置を指定することができる	flex-start（初期値） : 行の開始位置から配置。左揃え。 flex-end : 行末から配置。右揃え。 center : 中央揃え space-between : 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置 space-around : 両端の子要素も含め、均等に間隔をあけて配置
align-items	縦並びの位置を指定することができる	stretch（初期値） : 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置 flex-start : 親要素の開始位置から配置。上揃え。 flex-end : 親要素の終点から配置。下揃え。 center : 中央揃え baseline : ベースラインで揃える
align-content	複数行になった時に縦並びの位置を指定することができる	stretch（初期値） : 親要素の高さに合わせて広げて配置 flex-start : 親要素の開始位置から配置。上揃え。 flex-end : 親要素の終点から配置。下揃え。 center : 中央揃え space-between : 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置 space-around : 上下端にある子要素も含め、均等に間隔をあけて配置

子要素に指定するプロパティ

プロパティ	効果	使える値
order	並び順を指定をすることができる	初期値は0。 マイナス値を含む数値のみ指定することができる
flex-grow	子要素が画面幅に満たない場合に伸びる比率を指定することができる	数値のみ指定することができる。 初期値は0。 マイナス値は無効
flex-shrink	子要素が画面幅より小さい場合に縮む比率を指定することができる	数値のみ指定することができる。 初期値は1。 マイナス値は無効
flex-basis	子要素の基準幅を指定することができる	パーセントやピクセル値で指定することができる 初期値はautoでautoと指定した場合は子要素のコンテンツのサイズが適応される。
flex	flex-growと、flex-shrink、flex-basisをまとめて指定できる(ショートハンド・プロパティ)	-
align-self	子要素の縦方向を指定することができる	auto（初期値） : 親要素の align-items の値を継承 stretch : 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置 flex-start : 親要素の開始位置から配置。上揃え flex-end : 親要素の終点から配置。下揃え。 center : 中央揃え baseline : ベースラインで揃える

共に働くWebエンジニアを募集しています!

不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。

よく使うので忘備録として・・

パターン１

一番シンプルなやつ
＃は環境に応じて使い分ける。

<ul class="blog-list">
  <li><a href="pathToTheBlog">ブログ始めました。</a></li>
  <li><a href="pathToTheBlog">詳細ページあります</a></li>
  <li><a href="#">詳細ページないです。</a></li>
</ul>

.blog-list {
  >li >a[href="#"] {
    pointer-events: none;
  }
}

パターン２

一番ありがちなやつ

<ul class="blog-list">
  <li>
    <a href="pathToTheBlog"><!-- 透明なアンカータグを要素全体の上に配置 --></a>
    <div class="img-wrap" style="background: url(pathToDefaultImg) no-repeat center/cover">
      <img src="pathToImg" alt="ユーザー投稿した画像です。">
    </div>
    <div class="txt-wrap">
      <p>テキスト入ります。</p>
    </div>
  </li>
  <li>
    <a href="#"><!--  --></a>
    <div class="img-wrap" style="background: url(pathToDefaultImg) no-repeat center/cover">
      <img src="pathToImg" alt="ユーザー投稿した画像です。">
    </div>
    <div class="txt-wrap">
      <p>テキスト入ります。</p>
    </div>
  </li>
</ul>

$(function() {
  $('.blog-list > li').each(function(){
    if ($(this).children('a').attr('href') == '#') {
      $(this).css('pointer-events', 'none');
    }
  });
});

.news-list {
  display: flex;
  justify-content: space-around;
  width: calc(100% + 15px);
  >li {
    width: calc(50% - 15px);
    margin-right: 15px;
    position: relative;

    >a {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .img-wrap {
      overflow: hidden;
      height: 200px;
      width: 100%;

       >img {
         height: 100%;
         width: 100%;
         object-fit: cover;
         transition: .3s transform;
       }
     }

     .txt-wrap {
       font-size: 16px
     }

     &:hover {
        .img-wrap {
          transform: scale(1.05);
        }
        .txt-wrap p {
          text-decoration: underline;
        }
     }
  }
}

割とよく使うので忘備録として・・。

スクロール時にヘッダーの背景色を変える

1. タブレット画面幅以下の時のみ
2. ヘッダーが固定
3. ヘッダー透明でトップビジュアルの上にあるが、スクロールしたら透明は見難いから色をつけたい。

<header>
  <p><a href="/"><img src="pathToLogo" alt="ロゴ"></a></p>
  <button><img src="pathToImg" alt="メニューボタンなど"></button>
</header>

$(function(){
   var breakPoint = 768;
   if ($(window).innerWidth() <= breakPoint) {
     var mainVisualHeight = 420;
     var header = $('header');
     $(window).scroll(function () {
       $(this).scrollTop() > mainVisualHeight ?  header.css('background', '#fff'): header.css('background', 'inherit');
      });
     }
});

やりたいこと

web上で動画を再生したい

問題

.mp4や.movの拡張子がついているファイルを再生しようとした時に再生できるものとできないものが存在する。

結論

ファイル形式(拡張子)で判断するのではなく、コーデックをブラウザが対応するものに変換する。

---

動画の構造

動画は大きく映像と音声という2つの構造でできている。
動画は容量が大きいファイルなので圧縮してやる必要がある。
(基本的に動画を録画した時点で勝手に圧縮されたファイルが作成される)

コーデック

圧縮する行為をエンコード
圧縮したままでは再生できないので、圧縮をもとに戻すのがデコードと呼ぶ。
エンコードとデコードの2つを組み合わせてコーデックと呼ぶ。
動画の場合は映像と音声の2つのコーデックが必要になる。

コーデックの種類

代表的な映像コーデック
MPEG-4・ MPEG-1・MPEG-2・ Xvid・Divx・H.263・H.264・HEVC(H.265) など

代表的な音声コーデック
MP3・AAC・AC-3・FLAC・LPCM・WMA　など

動画が再生されない原因

映像が再生されないということは映像コーデックが対応していないブラウザである可能性がある。
映像コーデックをChromeなどブラウザの規格に合わせる必要がある。
逆に音声が流れないという場合は音声コーデックを見直す必要がある。

コンテナ

.mp4や.movはコーデックの組み合わせるためのコンテナと呼ばれるもの。
コンテナごとに扱えるコーデックが決まっている。

.mp4
映像: MPEG-4、H.263、H.264 など
音声: MP3、AC3、AACなど

.mov
映像: H.263、H.264、HEVCなど
音声: MP3、AAC 、FLAC など

具体的なケース

自分のケースで言うと、.movのコンテナで H.264とAACのコーデックだと正常に再生されるけど、.movコンテナ HEVCとAACのコーデックだと映像が再生されないということが起きた。

この場合はHEVCのコーデックを変換して、H.264などにする必要がある。

まとめ

1つのコンテナでも複数のコーデックを扱うことができるので、.mp4だからと言って全て再生できるとは限らない。コーデックがなんなのか？ブラウザはどのコーデックに対応しているのか？を確認する。

参考

コーデックとは？ 動画を扱うなら知っておきたい基礎知識｜ネットワークビデオレコーダー（NVR）

メモで
最終課題１日目
ER図法
テーブル、カラム、タイプ、オプション
ターミナル
Bundle install
Rails s

問題:Git hubでmasterに記入するが共有されない
解決? :Masterに記述する場合は親に当たる人（masterを作った人）が書かないと共有されないかも？
セッティングで招待？しないと共有されない

問題:親じゃない人がプルリクエストした場合にその人がマスターのブランチに戻した時に
記述したところが消えてしまう

前のところのまま更新されていない？
変なエラー？プルリクエストとした後にセッティングした時におかしくなった？
一回招待を取り消してみて再招待してみる
ファイルが消えてしまったためもう一度git cloneしていく
やり直し
解決：やり直し

☑️環境設定

ER図法を提出
問題点、修正点を探す
宅配のアドレスにカラムは１つで十分
サイズのテーブルを消してユーザーに書いてもらう形にする、ユーザーのテーブルにカラムとして追加

まとめ　次どうするか
トップページを二人でやる
トップページは金曜日
ユーザーのログインページ1人だと厳しいかも
新規登録が大変
テストもある

誰が何をするかを決める

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿________________
調べた事
●Desktopのブランチ消す時は上のバー（アップルのマークある方）にブランチとあるのでそこのデリートで消せる
●has_one
従属する側のモデルに belongs_to を記述し、
従属させる側のモデルに has_one を記述する。
１体１の関係の時使うかも？
かってにidを取って来てくれる
belongs_toも一緒

• 対象を1つ持っているなら、has_one
• 対象を複数持っているなら、has_many
• 自分が対象に所属しているなら、belongs_to ●clear fix https://qiita.com/mariofujisaki/items/2ad1de8432d7249afadc 参考ページ Flootを使った時に浮いて回り込んでしまったのを防ぐ ●mixing @mixin に続いてお好みの名前を定義し、@include で呼び出します。何度も使うようなスタイルがあるなら、あらかじめ定義しておくと便利です。 https://www.webcreatorbox.com/tech/sass-mixin 参考ページ

100日チャレンジの266日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
266日目は、

おはようございます
265日目
・webサイト模写　2.0h
・以前購入した模写教材のコンテンツ～フッター作成
・下層ページ1ページめのトップ作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 18, 2020

成果物

https://yuzuru2.github.io/neta0/dist/

リポジトリ

https://github.com/yuzuru2/yuzuru2.github.io/tree/master/neta0

環境

• node.js 12.14.0
• parcel 1.12.4

UI