touch-action: manipulation; が聞かない問題

2021-03-10 09:02web

touch-action: manipulation;


確認環境
iPhone X
Safari

manipulationにしてもダブルタップで拡大、縮小されてしまう。
効いてないのと同じである。

nomeにしても、ダブルタップで拡大される。ただし拡大時のダブルタップは無効になっている。

拡大を無効にできない件…

auto
自動（default）
manipulation
ダブルタップ 水平 無効
none
全て無効

touch-action: auto;
touch-action: manipulation;
touch-action: none;





apple

配色ツール

2021-03-08 15:21web
https://jxnblk.github.io/hello-color/
https://www.palettable.io/

Atom 覚書 参考サイト等

2020-05-15 16:18web
【Atom】作業効率UP！Webデザイナーに特にオススメのパッケージ19選
https://www.kerenor.jp/atom-packages-for-web-designer/

Lessで配色を変更する。

2020-04-19 04:32webCSS
Lessで配色を変更する。

lighten(@color, 10%); //明度を@colorより10%明るく
darken(@color, 10%); //明度を@colorより10%暗く
saturate(@color, 10%); //彩度を@colorより10%高く
desaturate(@color, 10%); //彩度を@colorより10%低く
fadein(@color, 10%); //透明度を@colorより10％減らす
fadeout(@color, 10%); //透明度を@colorより10％増やす
fade(@color, 50%); //透明度を@colorの50%にする
spin(@color, 10); //色相を@colorより10度大きく
spin(@color, -10); //色相を@colorより10度小さく
mix(@color1, @color2); //@color1と@color2の配色を混ぜる

Flexbox CSSレイアウトの主力選手

2020-04-14 02:11webCSS
floatやabsoluteにさようなら。
横並び、縦並び、グリット表示、なんでも来いの救世主です。
ブラウザの対応も今なら問題無し。
どんどんflexboxを活用して行きましょう。

flex-direction 子要素の並ぶ向き


row（default）
子要素を左から右に配置
row-reverse
子要素を右から左に配置
column
子要素を上から下に配置
column-reverse
子要素を下から上に配置

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;






flex1
flex2
flex3

justify-content 水平方向の揃え


flex-start (default)
行の開始位置から配置。左揃え。
flex-end
行末から配置。右揃え。
center
中央揃え
space-between
最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
space-around
両端の子要素も含め、均等に間隔をあけて配置

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;







flex1
flex2
flex3

flex-wrap 子要素の折り返し


nowrap (default)
子要素を折り返しせず、一行に並べる。
wrap
子要素を折り返し、複数行に上から下へ並べる。
wrap-reverse
子要素を折り返し、複数行に下から上へ並べる。

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: center;





flex1
flex2
flex3
flex4
flex5
flex6
flex7

align-items 垂直方向の揃え


stretch（default）
親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置。
flex-start
親要素の開始位置から配置。上揃え。
flex-end
親要素の終点から配置。下揃え。
center
中央揃え。
baseline
ベースラインで揃える。

align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

Font Awesome 使い方

2020-04-11 03:28webFont Awesome

アイコンを表示する


基本の表示方法はhtmlタグを挿入するだけ。

<i class="fas fa-arrow-alt-circle-right"></i>



アイコンの色を変更する


スタイル属性を付与する

<i class="fas fa-arrow-alt-circle-right" style="color:#ff0000;"></i>



アイコンをくるくる回す


アイコンを回転させる fa-spin
アイコンを8ステップで回転させる fa-pulse

<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>


回転に適したアイコンは、「Spinners」カテゴリーのアイコンです。
Spinnersアイコンの一覧はこちら。
Font Awesome Spinners アイコン 一覧

アイコンをfloat表示する


float属性を付与してテキストを回り込み表示させることができます。

float:leftfa-pull-left
float:rightfa-pull-right

<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<i class="fas fa-quote-right fa-2x fa-pull-right"></i>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Google Page Speed Insights 比較

2020-04-10 02:32web
.htaccessファイルに各種ブラウザキャッシュの設定を行い、設定前と設定後の数値を比較してみた。

設定した内容は以下の通り。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
</IfModule>

設定前のスコア

設定後のスコア

ん？

スコア減少＿|￣|○



ちなみに設定前のパソコンスコア

でた！99点。
100点はあるのかな？

今日（2020/04/09）のページスピードインサイト

2020-04-09 14:06web
モバイルのスコアー

PCのスコアー

Googleが提供しているPage Speed Insights。
WEBページの表示スピードや構造上の問題などの評価を教えてくれます。

以前の記事にも書きましたが、ページスピードにこだわりすぎるのはNG。
でも、中間試験と同じで、点数が良いと嬉しいですね。
次へ

WEB制作に役立つ情報を発信（関係無い記事もちらほらありますが...）