投稿日：2020-05-28T22:23:21+09:00

HTML&CSS~上級編~

プログラミングの勉強日記

2020年5月28日　Progate Lv.61

レスポンシブデザイン

　画面幅を合わせてレイアウトが柔軟に切り替えられる。レスポンシブデザインが適用されていないと、画面幅を狭めるとコンテンツが収まらなくなってしまうことがある。
　レスポンシブデザインを適用するためには、<head>タグ内にviewportを設定する。また、responsive.cssの読み込みではstylesheet.cssにメディアクエリ用のCSSを記述しても問題ないが、整理しやすいようにCSSを分割しresponsive.cssにメディアクエリ用のCSSを記述する。※responsive.cssの読み込みは必ずviewportの設定よりも後に記述する
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"> //viewportの設定
  <link rel="stylesheet" href="responsive.css"> //responsive.cssの読み込み
</head>
メディアクエリ

　プラウザの画面サイズに応じてCSSのスタイルを設定できる手段のこと。@media(条件){...}という形で記述する。この条件に当てはまるときのみCSSが適用される。条件には最大幅（max-width）と最小幅（min-width）を指定できる。条件を指定するときの値の部分をブレイクポイントという。
@media(max-width:1000px){
  /*1000px以下の時に適用したいCSSを記述する*/
}
レイアウトの崩れを直す

　要素（水色の四角）がwidth:25％で指定されているのところで、左右のpaddingを加えると要素幅の要素の合計が100％を超えてしまい、レイアウトが崩れてしまう。そこで、右のようにするためにはbox-sizing:border-boxを使うと要素の幅の合計にpaddingとborderが含まれるようになる。しかし、marginはbox-sizingでの合計値に含まれない。
　また、指定するときには*（アスタリスク）ですべての要素に対してCSSを適用することが推奨されている。
　

floatと親要素の関係

　通常は親要素の高さは子要素を包む高さとなる。しかし、子要素がfloatのとき親要素の高さは0になってしまう。（float(浮いている)は親要素から見るとfloatの子要素は存在しないように見えてしまうから）
　→float:leftはclear:leftで浮いている状態を解除できる。
　　☆float:left;を適用するためだけの空タグを用意する。<div class="clear"></div>を入れる。

要素の表示/非表示

　要素の非表示：display:none;
　要素の表示： display:block;

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-28T21:37:25+09:00

【BootstrapVueコピペのみ】導入から画像一覧画面の実装まで

Vueバージョン確認
npm list vue
まずは上記コマンドでバージョンの確認
twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11
BootstrapVueの導入

BootstrapVueの導入がまだの方のために念のため導入方法書いときますね

とりあえずコピペして環境を整えてください
main.js
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
npm install vue bootstrap-vue bootstrap
以上でBootstrapVueの導入は完了です

画像一覧画面の実装

説明は抜きにしてコードを下に貼ってあるのでどんどんコピペして

自分のプロジェクトに合った修正を加えてみてください

一応先に完成イメージです（モバイルに合わせてコーディングしてます）
<template>
  <b-container>
    <b-row>
      <b-col>
        <div v-for="(item, i) in items" class="images" :key="i">
          <b-img thumbnail fluid :src="item.imageUrl"></b-img>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
export default {
  data () {
    return {
      items: [
        { imageUrl: require('@/assets/images/1.png') },
        { imageUrl: require('@/assets/images/2.png') },
        { imageUrl: require('@/assets/images/3.png') },
        { imageUrl: require('@/assets/images/4.png') },
        { imageUrl: require('@/assets/images/5.png') },
        { imageUrl: require('@/assets/images/6.png') },
        { imageUrl: require('@/assets/images/7.png') },
        { imageUrl: require('@/assets/images/8.png') },
        { imageUrl: require('@/assets/images/9.png') },
        { imageUrl: require('@/assets/images/10.png') }
      ]
    }
  }
}
</script>
いかがでしたでしょうか？
見た目はこれからですが画像一覧画面にはなったかと思います

以上です

こちらの記事にてstyleのコードまで詳しく参照できます
【Vue/BootstrapVueコピペのみ】Bootstarap導入からシンプルな画像一覧画面の実装方法までを徹底解説

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-28T20:01:25+09:00

Vue.jsでinputフォームの文字数制限をする

今回のゴール

Vue.jsで実装するinputフォームで入力できる文字数を制限し、特定の文字数以上は入力できないようにする

実際のコード

サンプル

CodeSandboxに実際に動くもの作りました。
https://codesandbox.io/s/input-form-chara-limit-o9qp1?fontsize=14&hidenavigation=1&theme=dark
<template>
  <div id="app">
    <p>5文字以上入力ができないinputフォーム</p>
    <input type="text" v-model="inputText">
    <p>{{ inputText }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      inputText: ""
    };
  },
  watch: {
    inputText(inputText) {
      this.inputText = this.charaLimit(inputText);
    }
  },
  methods: {
    charaLimit(inputText) {
      return inputText.length > 5 ? inputText.slice(0, -1) : inputText;
    }
  }
};
</script>
watchによってv-modelで文字列inputTextが新しく入力された時に、methodのcharaLimitが動くようにします。
cahraLimmitではinputTextが5文字より多い場合は文字列の末尾を削除し、そうでなければ入力された文字列をそのまま
returnしてinputTextに代入するようにします。

inputTextが入力される度に文字列の末尾を削除するので実質的に、文字列が5文字より多い場合はinputTextに値が入らなくなります。

所感

入力された文字のバリデーションは正規表現に任して、入力文字数はsliceで対応すると簡単でした。

参考

Array.prototype.splice() - JavaScript | MDN

フォーム入力バインディング — Vue.js

算出プロパティとウォッチャ — Vue.js

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-28T16:19:30+09:00

＠media ミス備忘録

メディアクエリでどうしてもサイズがフォントサイズが変更されない時に
分かった対処方法
.p-header__nav-menu__closelist .c-header__nav-menu__closelist a {
    color: #FFFFFF;
    font-size: 12px;
}
このようなCSSの施一計をしている場合は、
@media (min-width:768px) {
.c-header__nav-menu__closelist a {
    font-size: 12px;
}
}
このように設計してまうと、どこの親要素のaタグなのか理解してもらえず
反映されない。
@media (min-width:768px) {
.p-header__nav-menu__closelist .c-header__nav-menu__closelist a {
    font-size: 12px;
}
}
この書き方じゃないと反映されない。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-28T11:00:35+09:00

floatとflexboxとgrid比較

前置き

floatとflexboxとgridはそれぞれ、要素を横並びにすることができるCSSのプロパティや値です。
Webページを作る上で最も大事なこととなるので、使い分けできるようにしましょう。

この記事で分かること

テキストの回り込みをしたい場合は、floatを使う

横並びのレイアウトをしたい場合は、flexboxを使う

格子状のレイアウトをしたい場合は、gridを使う

それぞれの特徴

float

指定した要素を左または右に浮動させ、後ろの要素を回り込みます。
ブログなどで、文字の途中に画像を入れる時にしか今は使わないかもしれません。

flexbox

指定した要素の子要素を整列させます。
子要素の配置を調整しやすいので、横並びの中でもちょっと段を変えたりなども可能です。

grid

指定した要素の子要素をテーブル状(行・列)に配置します。
子要素の幅や高さを親要素(gridを指定している要素)で指定することができます。

それぞれのコード

float

See the Pen CSS_compare_float by engineerhikaru (@engineerhikaru) on CodePen.

flexbox

See the Pen CSS_compare_flexbox by engineerhikaru (@engineerhikaru) on CodePen.

grid

See the Pen CSS_compare_grid by engineerhikaru (@engineerhikaru) on CodePen.

それぞれの特徴を生かしたコード

float

See the Pen CSS_compare_float_ex by engineerhikaru (@engineerhikaru) on CodePen.

flexbox

See the Pen CSS_compare_flexbox_ex by engineerhikaru (@engineerhikaru) on CodePen.

grid

See the Pen CSS_compare_grid_ex by engineerhikaru (@engineerhikaru) on CodePen.

まとめ

ただ横並びにするだけであれば、どれを使っても問題はありませんが、
記事の最初に書いた通り、私の場合は下記のように使い分けています。

テキストの回り込みをしたい場合は、floatを使う

横並びのレイアウトをしたい場合は、flexboxを使う

格子状のレイアウトをしたい場合は、gridを使う

特にflexboxは、モダンなレイアウトなサイトを作る時に有効ですので、まずこれを習得したいです。

float flexbox grid

特徴要素を浮動させる子要素を整列させる子要素をテーブル状に配置させる

使う場面テキストの回り込み横並びのレイアウト格子状のレイアウト

応用性 △ ◎ ○

	float	flexbox	grid
特徴	要素を浮動させる	子要素を整列させる	子要素をテーブル状に配置させる
使う場面	テキストの回り込み	横並びのレイアウト	格子状のレイアウト
応用性	△	◎	○

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-28T09:56:25+09:00

Bootstrap4のnavbarカスタマイズ方法

レスポンシブで使いやすいnavbarですがカスタマイズの方法忘れやすいのでメモ

Bootstrap4の基本形navbar

項目はいろいろありますが最低限なら下記でいけるでしょう

タブレットサイズでメニュー展開

メニューを右寄せ

タイトルを文字

色をlight
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">タイトル</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">link1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">link2</a>
      </li>
    </ul>
  </div>
</nav>
よく使うカスタマイズを見てみましょう

navタグをみてみる(1行目)
<nav class="navbar navbar-expand-md navbar-light bg-light">
メニューを展開するポイントを設定する

navbar-expand-○○

sm:モバイル md:タブレット lg:デスクトップなど

ナビゲーションの色変更

navbar-○○

primary, light など

ナビゲーションの背景色変更

bg-○○

primary, light など

タイトルに画像を使用

aタグ内にimgタグをいれる
<a class="navbar-brand" href="#"><img src="" alt=""></a>
バーガーアイコンの枠を消す
.navbar-toggler{
  border: none;
}
.navbar-toggler:active{
  outline: none;
}
button:focus{
  outline: none;
}
バーガーアイコンの色と先の太さを変える
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
CSSで変更

stroke-width='2' の数値を変えて太さ変更

stroke='rgba(0, 0, 0, 0.5)' のrgbaの値変更で色変

変更できますが個人的にはFontawesomeに入れ替えてしまったほうが好みですね

すこしややこしいですし

バーガーアイコンを変更
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
  <i class="fab fa-apple"></i>
</button>
font-sizeなどで変更できるのでオススメです

メニューとタイトルの位置を逆にする
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">タイトル</a>
buttonタグとaタグの場所を入れ替えるだけです

メニューの並びを変更する
    <div class="collapse navbar-collapse justify-content-start" id="navbar-content">
左寄せ : justify-content-start

中央寄せ : justify-content-center

右寄せ : justify-content-end

navbarをスクロールしても上部に貼り付ける
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
fixed-topを追加する

まとめ

navbarのカスタマイズでどれだけつまずいたことか！
レスポンシブ対応は難しいから勉強しはじめの頃にnavbarの存在知って「すごい！」と思ったものの、カスタマイズがよくわからずたくさんの時間をほうりだしました(笑)
助けになればとおもいます

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-28T08:26:15+09:00

フォントサイズのレスポンシブ

フォントサイズレスポンシブについて書かれていた構造を忘れないようにメモ
https://qiita.com/katsunory/items/3bede89cee8e2ded8426

<!-- @includeでpxになった値が$sizeに代入され、pにreturnされる -->
@function get_vw($size, $viewport:320){
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

@mixin fz_vw($font_size:10){
  font-size: $font_size * 1px;
  font-size: get_vw($font_size);
}

<!-- @includeに@mixinの設定が入る -->
p{
  @include fz_vw(12);
  @media screen and (min-width: 760px) {
    font-size: 30px;
  }
}

    font-size: 12px;
    font-size: 3.75vw;

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-28T06:34:16+09:00

imgとbackground-imageのレスポンシブ設定の違い

imgとbackground-imageのレスポンシブ設定

img画像 width:100%; , height:auto;
background-image width:100%; , padding;50%;

    <div class="container">
        <h1>Background</h1>
        <div class="container__bkimg"></div>
    </div>

    <div class="container">
        <h1>Img</h1>
        <img class="container__frimg" src="画像" alt="">
    </div>

img{
    max-width: 100%;
}
.container{
    max-width: 1100px;
    min-width: 375px;
    margin: 0 auto;
    &__bkimg{
        width: 100%;
        padding-top: 50%;
        background-image: url(画像);
        background-size: cover;
        background-repeat: no-repeat;
    }
    &__frimg{
        width: 100%;
        height: auto;
    }
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-28T05:31:09+09:00

初心者によるプログラミング学習ログ 328日目

100日チャレンジの328日目

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

おはようございます
328日目 2h
・ポートフォリオ作成2h#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) May 27, 2020

　 Tweet
Qiitaで続きを読む

20200528のCSSに関する記事は9件です。

HTML&CSS~上級編~

プログラミングの勉強日記

レスポンシブデザイン

メディアクエリ

レイアウトの崩れを直す

floatと親要素の関係

要素の表示/非表示

【BootstrapVueコピペのみ】導入から画像一覧画面の実装まで

Vueバージョン確認

BootstrapVueの導入

画像一覧画面の実装

Vue.jsでinputフォームの文字数制限をする

今回のゴール

実際のコード

サンプル

所感

参考

＠media ミス備忘録

floatとflexboxとgrid比較

前置き

この記事で分かること

それぞれの特徴

float

flexbox

grid

それぞれのコード

float

flexbox

grid

それぞれの特徴を生かしたコード

float

flexbox

grid

まとめ

Bootstrap4のnavbarカスタマイズ方法

Bootstrap4の基本形navbar

navタグをみてみる(1行目)

タイトルに画像を使用

バーガーアイコンの枠を消す

バーガーアイコンの色と先の太さを変える

バーガーアイコンを変更

メニューとタイトルの位置を逆にする

メニューの並びを変更する

navbarをスクロールしても上部に貼り付ける

まとめ

フォントサイズのレスポンシブ

imgとbackground-imageのレスポンシブ設定の違い

imgとbackground-imageのレスポンシブ設定

初心者によるプログラミング学習ログ 328日目

100日チャレンジの328日目

日付別

タグ一覧