20211127のHTMLに関する記事は6件です。

スマホで見るとレスポンシブが効かない。viewport入れてもダメな時は?

viewportを入れてるのに スマホで見るとレスポンシブデザインが効かない。 だけど パソコンで横幅をスマホサイズに小さくすると しっかりレスポンシブデザインが効いている。 こういうケースがあります。 わたしはこの問題にぶつかったのですが、 viewportのタグを入れてからしばらく時間を置いたら 問題が解決しました。 1viewportを入れてる 2パソコンで横幅を小さくしてみるとレスポンシブが効いている この二つをクリアしている場合 しばらく時間をおいてみてください。 おそらく問題が解決すると思います。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

flex grow, shrink, basis

flex-grow 子要素全ての幅を足しても親要素の幅100%にならない時、その余白を各子要素間でどの程度負担するかを表す。 デフォルト0。余白があってもほったらかし。負担しない = 伸びない 前提 子1にwidth 30% 子2にwidth 30% => 余白は40%。 子要素間の合計が1以上のケース 子1にflexGrow1, 子2にflexGrow3を設定すると、余白を1:3 で負担することになるので子1が10%, 子2が30%広がる 他の全ての子が0(デフォルト)で、子2だけに1以上が設定された時、余白の全てを子2が負担する事になるので、子2が40%広がり合計70%を占める。 子要素間の合計が1未満のケース 余白は40%なので、flexGrow0.5を設定すると、余白を1とした割合である20%伸びる。 子1がflexGrow0.1, 子2がflexGrow0.1だと、それぞれ4%増える。合計それぞれ34%になり余白はまだある状態。 もし、子1と子2にflexGrow0.8設定し合計が1を超える場合、子要素間の合計が1以上の時と同じ挙動になる flex-shrink 子要素全ての幅を足すと親要素を越える時、その越えた分を各子要素間でどの程度負担する = 縮む かを表す デフォルト1。子要素全てが1なので、超えた分を子要素間で均等に負担する。 例えば子1はwidth 80%,子2はwidth80%の時、Flex無しだと合計160%になり60%はみ出してしまうが、親要素にFlexを適用した途端、はみ出した60%を子要素がそれぞれ30%負担し、widthは80%-30%で50%になる 固定widthが設定されていない要素を含む親要素に対してFlexを設定すると想定外に縮むことがありハマることがある。Flexの子要素全てのwidthは固定されていることを確認するべき!!! <div>{ comment }</div> みたいな子要素があると、子要素が伸びて親要素を超えた分を子要素間で均等に負担し縮んでしまう。縮んでほしくないときも縮んでしまうことがある。 flex-shrink: 0は超えても負担しない = 「縮まない」ということ。他の縮むことができる子要素間で超えた分を負担して縮む。もし全部の子要素がflex-shrink0だとどれも縮まず超えた分は超えたままになる。 子要素間のflex-shrinkの合計が1以上の場合は、それらの比率によって負担割合が決まる。 子要素間のflex-shrinkの合計が1以下の場合は、超えた分を1とした時の割合分縮む。 flex-basis これまで、「本来の子要素の幅」を基準に考えてきたが、それをflexのプロパティとして設定できこれを基準にflexの計算がされる。本来のwidthを上書くイメージ。ただflexのdirectionが縦になるとwidthではなくなることがwidthとは違う。 デフォルトはauto。本来の子要素の幅がそのままflexの計算をする基準値になる 子1と2にflex-basis: 40%を設定すると、合わせて80%のため残り20%は余白になる 子1にwidthを80%, 子2にwidth 200%と設定後、それぞれflex-basis: 50%とすると結果のwidthは50%になり上書きされるイメージ pxの絶対値でも設定可能。 flex grow, shrink, basisを一度に設定できるプロパティ。 flex: <grow> <shrink> <basis> flex: 0 1 20% と書く 参考 https://fuuno.net/web02/flex/flex.html https://fuuno.net/web02/flex02/flex02.html https://developer.mozilla.org/ja/docs/Web/CSS/flex
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Angular Video自動再生されない問題について

背景 時間が経つのは早いもので、そろそろ年末ですね。年末年始といえば、忘年会や新年会などのイベントが多いです。新型コロナはまだ続くと思いますが、感染者数は少なくなり、ようやく居酒屋で一緒に楽しめるようになりました。懇親会を盛り上げるよう、面白い余興を行いますね。その中でもビンゴゲームは定番です。ビンゴカード配り、番号抽選、当選チェック、景品渡し等、幹事さんは大変ですね。特にオンラインの場合、もっと大変です。最近Angularを勉強し始めて、何か作れるかと思って、幹事さん向けのオンラインビンゴゲーム(bingome.net)を作成しました。一般のビンゴ機能以外、受付終了/再開、参加一覧、ビンゴチェック、参加者削除、景品渡しチェック等の機能もあります。ビンゴをやる場合、オンライン、オフラインに関わらず、ぜひご活用ください。 環境 $ng --version v16.13.0 noriharuishi@rgsis bingo % ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 12.2.13 Node: 16.13.0 (Unsupported) Package Manager: npm 8.1.0 OS: darwin x64 Angular: 12.2.13 ... animations, cdk, cli, common, compiler, compiler-cli, core ... forms, material, platform-browser, platform-browser-dynamic ... router Package Version --------------------------------------------------------- @angular-devkit/architect 0.1202.13 @angular-devkit/build-angular 12.2.13 @angular-devkit/core 12.2.13 @angular-devkit/schematics 12.2.13 @schematics/angular 12.2.13 rxjs 6.6.7 typescript 4.3.5 課題 ホームページには説明動画(mp4)があります、ごく普通のvideoタグを使っていますが、chromeでビデオが自動再生されないです。Angularのソースコードは下記の通りです。 app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'sample'; } app.component.html <video muted autoplay playsinline loop> <source src="/assets/bingome.net.mp4" type="video/mp4"> </video> 対策 色々調べてみましたが、原因がわからず、最終的に下記のように修正しましたら、自動的に再生できました。 app.component.html <video [muted]="true" autoplay playsinline loop> <source src="/assets/bingome.net.mp4" type="video/mp4"> </video>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Webの勉強はじめてみた その4 ~JavaScript編 宣言と指数表現~

今日は1コマだけ。 今日やったこと JavaScriptのデータ型、計算、変数 気付いたこと 1. 指数表現 2. 変数 1. 指数表現 Xe + Y 初めて知った表現。 X × 10 の Y 乗 ( X×10**Y ) コンソールなんかで、値が大きすぎるとこういう表示になるらしい。 そういえばエクセルでも同じだったような気がする。 1.5e+20 ⇒ 1.5 × 10**20 Xにあたる数字は桁数を増やさずに小数で表現するのが一般的? 15e+10 ⇒ 1.5e11 2. 変数 var let の違い const は名前的にも定数では? と思うものの、var と let の違いはなんとなく。 letで宣言したほうがチームでの開発とかでは無難なのかも。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Webの勉強はじめてみた その4

今日は1コマだけ。 今日やったこと JavaScriptのデータ型、計算、変数 気付いたこと 1. 指数表現 2. 変数 1. 指数表現 Xe + Y 初めて知った表現。 X × 10 の Y 乗 ( X×10**Y ) コンソールなんかで、値が大きすぎるとこういう表示になるらしい。 そういえばエクセルでも同じだったような気がする。 1.5e+20 ⇒ 1.5 × 10**20 Xにあたる数字は桁数を増やさずに小数で表現するのが一般的? 15e+10 ⇒ 1.5e11 2. 変数 var let の違い const は名前的にも定数では? と思うものの、var と let の違いはなんとなく。 letで宣言したほうがチームでの開発とかでは無難なのかも。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

動きのあるホームページ アイディア

動きのあるおしゃれなWebページを作るときのアイディアの参考 自分用備忘録です。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む