たねっぱ！ » Web制作

chromeのおすすめ拡張機能10選

futappa_staff — Tue, 06 Jul 2021 01:08:25 +0000

ブラウザの拡張機能を入れるだけで、あらゆる場面で本当に便利になります。今回は、chromeの拡張機能でオススメの10選を紹介します。

最後に

便利なものが多いですが、あれもこれもと全部入れると重くなるので、必要なものを厳選して使うのがおすすめです。

ブラウザのシェア率の調べ方

rurippa! — Tue, 04 Feb 2020 02:40:36 +0000

はじめに

ブラウザによって使えるCSSが異なったり、見栄えが変わります。また、どこまでのブラウザに対応するかで、工数にも差が生まれます。
適切に対応できるようにするためにも、シェア率を知っておくことは大事だと思いますので、自分でも調べられる方法を紹介します！(^^)

調べ方

トップページの中程に、画像と同じ一覧があります。そこで、左上の「Browser Market Share」を選ぶとブラウザのシェア率を調べることができます。
他にも、OSや解像度・ブラウザバージョン別のシェアなど色々調べることができます。

次に、下記の部分で「Japan」を選択すると、調査対象を「国内」に限定できます。

期間やグラフの種類など、もっと細かい設定はグラフ右上「Edit Chart Data」からでできます。

日本語訳したものも添付しました。
「Statistic」では調べたい項目を選択できます（ブラウザのバージョン、OS別など）。さらにデバイスでも絞れます。
「Region」では、全国や日本だけ、アジアだけなどの範囲を選べます。
「Chart Type」ではグラフの種類を選べます。
「Period」では、調べたい期間を選択できます。直近の３ヶ月や、昨年の情報など、必要に応じて選んでみてください。

好きな設定ができたら、View Chartを選ぶと、グラフが表示されます。

今回は、国内限定で、2019年4〜6月の３ヶ月間のブラウザシェア率（PC）を調べました。個人的に棒グラフがみやすいので、この設定です。

2019年4〜6月の３ヶ月間のブラウザシェア率（PC）

Chrome 57.93%
IE 14.16%
Firefox　9.75%
Safari 8.6%
Edge 7.57%
Opera 0.73%

IEのシェア率はきになるところですが、、、まだ14%ありますね(^^;)さらに、ブラウザのバージョンも調べられますので、興味があれば調べてみてくださいね。

まとめ

いかがでしたか？
ブラウザのシェア率を調べておくことで、どのブラウザまで対応するべきか、この記述は使えるのか…など、事前に調べておくことができます。ぜひご活用ください♪

３列のとき

サンプル

ポイント

ulのafter（一番後ろの位置）に、liと同じ幅（高さは不要）の擬似要素を入れることで、左寄せになります。

４列のとき

最後の行が２つのときのサンプル

最後の行が３つのときのサンプル

ポイント

３列のときと違うのは、afterだけでは要素が足りないので、beforeも使います。ここで気をつけないといけないのは、beforeにorderを指定して、順番を変えることです。

最後に

もし５列以上ある場合は、floatを使うか、javascriptで調整できます。
flexboxは便利なところもあり、今回のように調整が必要なところもあるのでうまく使っていきたいですね(´▽`*)♪

ダミー画像を生成できるサービス５選

rurippa! — Mon, 01 Jul 2019 00:42:13 +0000

とりあえずダミーで画像を入れたい！ってこと、よくありますよね？
そんなときに使える、ダミー画像を生成できるサービスを紹介します♪

シンプルなダミー画像

文字や背景のカラー、サイズなど自由に変更できます。

サンプル

		/* １枚目 */
		

		/* ２枚目 */
		

		/* ３枚目 */

Placehold.jp

５つのジャンルから選べる

５つのジャンル（Animals、Architecture、Nature、People、TECH）から選べます。
グレースケール、セピア調にもできます。

サンプル

		/* １枚目 */
		

		/* ２枚目 */
		

		/* ３枚目 */

PlaceIMG

ランダムな写真

写真はランダム（好きな画像に固定もできる）で表示され、グレースケール・セピア調・ぼかすこともできます。

サンプル

		/* １枚目 */
		

		/* ２枚目 */
		

		/* ３枚目 */

Lorem Picsum

子猫のダミー画像

子猫の画像オンリーのサイトです。

サンプル

		/* １枚目 */
		

		/* ２枚目 */

{placekitten}

顔写真のダミー画像

顔写真をたくさん使いたいときにオススメです。
XDとSketch用のプラグインやAPIも用意されています。

UI Faces

まとめ

いかがでしたか？
わざわざダミー画像を探したり作るのに手間をかけるより、お手軽にできた方がいいと思いますので、うまくご活用ください♪

ダミーテキストが生成できるおすすめサイト６選

rurippa! — Mon, 03 Jun 2019 05:17:08 +0000

サイト制作のときに、仮でテキストを入れたいときありませんか？
そんなときに使えるサイトを紹介します♪

まとめ

いかがでしたか？
ダミーテキストが必要な時もあると思いますので、ぜひ利用してみてくださいね(^^)b

XDでスライスしてみよう（初心者&コーダー向け）

rurippa! — Wed, 15 May 2019 00:56:48 +0000

最近はXDを使っているところも、少し増えてきたように思います。
XDでスライスするのに必要な、基本的なやり方をまとめておきます！

基本的なスライス手順

１、上のメニューから、表示＞レイヤー（⌘Y）もしくは、左下のマークをクリックして、レイヤーパネルを表示します。

２、スライスしたい写真を選択する

３、写真のレイヤーを選択されているのを確認し、ファイル＞書き出し＞選択済み（⌘E）で書き出しの設定画面が出ます。

４、お好きな設定で書き出してください。

書き出すときの設定

jpg書き出し

フォーマット:JPG
画質：100%（任意）
書き出し先：デザイン
設定サイズ：1x
※等倍と２倍サイズ両方必要な場合は、書き出し先：Web、設定サイズ：1xにしてください。

png書き出し

フォーマット：PNG
書き出し先：デザイン
設定サイズ：1x
※等倍と２倍サイズ両方必要な場合は、書き出し先：Web、設定サイズ：1xにしてください。

svg書き出し

フォーマット：SVG
画像を保存：埋め込み
ファイルサイズを最適化

余白込みや、好きなサイズでスライスする手順

１、長方形ツールで、書き出したいサイズの四角を作る。

２、レイヤーの順序を、四角（上）、写真（下）にする。

３、四角と写真を両方選択して、オブジェクト＞シェイプでマスク（⌘+shift+M）する。

４、ファイル＞書き出し＞選択済み（⌘E）で書き出しの設定画面が出ます。

５、お好きな設定で書き出してください。

最後に

いかがでしたか？
今回紹介したことをおさえれば、なんとかスライスはできるかな？と思います。
XD案件が今後も増えるかもしれませんので、慣れていきましょう(*^^*)

コーディング時間を短縮するための、スライスで気をつけたいポイント

rurippa! — Thu, 09 May 2019 01:03:10 +0000

画像書き出しの段階で、コーディングを意識したスライスができていますか？

というのも。早い段階でコーディング部分までイメージしておかないと、後々余分なCSSを書くことになったり、スライスをやり直すことになりかねません。
今回は、コーディングしやすいスライスのポイントをまとめてみます。
※フォトショップをベースに書いています。

スライス作業に入る前に

コーディングをするのは誰？

もし、他の方がコーディングをする場合は、自分とは違うコードの書き方かもしれません。スライスする前に要望など確認しましょう。

スライスツールかアセット書き出しか

アセット書き出しはとても便利ですよね！デザインが確定していて、アセット書き出しを想定して作られたデータならオススメです。

でも、例えば余白込みでスライスしたいとか、のちに写真差し替えがある場合などは、アセット書き出しを使わない方が効率が良い場合もあります。

それぞれのメリット・デメリットを確認しておくのがベストです。

画像書き出しするときのポイント！

同じ種類の画像は、「横幅」や「高さ」を揃える

例えば、ナビに使っているアイコンなど　サイズが統一されているものは、高さだけもしくは横幅だけ統一する。もしくは高さも横幅も両方揃えておくと、CSSで一括指定ができたり、画像が扱いやすくなります。

ファイル名はわかりやすく、規則性を持ってつける

ファイル名をみて、「メインビジュアルに使われている写真」、「メニューに使われいてる矢印」ということが、予測できるファイル名がおすすめです。
ファイル名のつけ方にルールを作っておくと、ファイル名をつける時に悩みませんし、画像が探しやすくなります。

例）nav_icn_home.png（画像が使われる場所+画像の種類+補足+拡張子）
ナビのホームのアイコン画像かな？と予想がつきますよね。このように、ルール化しておくのがオススメです。

ファイルの種類（jpg、png、svgなど）は正しく選ぶ

透過が必要な場合はpngを使う。写真はjpgにするなど、必要に応じて適したファイル形式を選びましょう。データ量の節約にもなります。

コーディングで実装する箇所を、事前に考えておく。

「ここの文字は画像だけど、この文字はデバイステキストで実装する。」という具合に、
矢印やハンバーガーボタン・角丸・シャドウ・グラデーションなども、CSSで実装するのか否か、事前確認しておきましょう。

リピートできるものは、リピートできる最小サイズで書きだす

大きな画像でリピートすると重くなるので、リピートできる最小サイズでスライスしましょう。

スライスしたデータ（PSD・AIなど）は残しておく

後から、修正や差し替えがあったり、再度書き出しが必要になることもあります。もとのスライスデータを流用できる場合もあるので、データは残しておくのがベストです。

レスポンシブやスマホ対応するときのポイント！

画像サイズは偶数にする

奇数になっていると、ブラウザによって画像の見え方が変わるため、例えば１px見切れたり、画像が滲む原因になります。割り切れるサイズ（偶数）にしておくのがオススメです。

画像の書き出しサイズを確認しておく

レティーナ対応で２倍、３倍サイズなどで書き出すのか？事前に確認しておきましょう。

最後に

いかかでしたか？
今回紹介したことが、スムーズにコーディングするためのヒントになれば幸いです。それでは、よきコーディングライフを♪

シャドウ・光彩などの角度を個別に指定する方法

rurippa! — Wed, 30 May 2018 01:02:10 +0000

Photoshopでハマっちゃうかもしれないシリーズ！？

ドロップシャドウや、光彩など、個別で影の向きを設定したいのに、
全部一緒の向きになってしまって、困っている方いませんか？

こんなお悩みの方は、レイヤースタイルにある
「包括光源を使用」のチェックをはずしてください！
それだけです！

包括光源にチェックするとどうなるの？

“包括光源にチェックが入っているもの全て、
Photoshopに設定している角度が適用されます。”

まとめ

設定してたはずのシャドウが、他で設定したものに引っ張られて
すごい向きになってる・・・なんて恐れもあるので、
包括光源についてチェックにはお気をつけくださいね。笑

CSSで三角形をつくる方法

rurippa! — Wed, 23 May 2018 04:21:51 +0000

吹き出しに使われている三角の部分や、矢印など、今まで画像でやってた方もCSSでやってみませんか？
今回は一番シンプルな三角形を作ってみます！

三角がどこで使われているか見てみよう

例えばボタンの三角矢印だったり、動画などの再生ボタンで使われていたり。
この例以外のところでも三角が使われています。

borderの特性を知ろう

まずは、空のボックスを作って、太さ30pxの枠線をひいてみましょう。


    

    .sample01{
      width: 80px;
      height: 80px;
      border-width: 30px;
      border-style: solid;
      border-color: #fdd35c #00ac97;
    }

線と線の交わる部分が、斜めに区切られているのに気づきましたか？
これが重要なポイントです。

三角を作ってみよう

次に、先ほど指定した「高さ・横幅」をそれぞれ0にしてみます。
すると、三角が4つになります。

  

  .sample02{
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    border-color: #fdd35c #00ac97;
  }

あとは、不必要な部分の三角を消すだけです。
今回は右向きの三角を作りたいので、border-top,right,bottomのカラーを透明(transparent)にすると、完成！

  

  .sample03{
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    /* 上　右　下　左　の順番で指定  */
    border-color: transparent transparent transparent #00ac97;
  }

まとめ

うまくできましたか？
基本がわかれば、角度を変えてみたり、各辺のサイズを変えて微調整もできます。
CSSの場合は、色の変更やサイズ調整にも強いので、ぜひ覚えてみてください。

たねっぱ！ » Web制作

chromeのおすすめ拡張機能10選

目次

おすすめ一覧

Wappalyzer

One Tab

SearchPreview

Awesome ScreenShot

Save to Pocket

Clear Cache

PerfectPixel

EditThisCookie

ColorPick Eyedropper

Fontface Ninja

最後に

ブラウザのシェア率の調べ方

目次

はじめに

おすすめのサイト

調べ方

2019年4〜6月の３ヶ月間のブラウザシェア率（PC）

まとめ

おすすめのセミナー・イベント

おすすめのセミナー

CSS Nite

Re:Creator’s Kansai

イベント

WordCamp

フロントエンドカンファレンス

PHPカンファレンス

セミナーを検索できるサイト

connpass – エンジニアをつなぐIT勉強会支援プラットフォーム

Peatix (ピーティックス）| グループ・イベント管理、チケット販売・集客サービス | Peatix

セミナー・勉強会・イベント管理ツール | Doorkeeper

Meetup

TECH PLAY［テックプレイ］ – IT勉強会・セミナーなどのイベント情報検索サービス

Facebook・Twitter

最後に

均等配置したリストの最終行を、左寄せにする方法（ justify-content: space-betweenを使った場合 ）

目次

はじめに

ベースになるHTML・CSS

３列のとき

サンプル

ポイント

４列のとき

最後の行が２つのときのサンプル

最後の行が３つのときのサンプル

ポイント

最後に

ダミー画像を生成できるサービス５選

目次

シンプルなダミー画像

サンプル

５つのジャンルから選べる

サンプル

ランダムな写真

サンプル

子猫のダミー画像

サンプル

顔写真のダミー画像

まとめ

ダミーテキストが生成できる おすすめサイト６選

目次

おすすめサイト一覧

Dummy HTML snippets for webdesigners

すぐ使えるダミーテキスト – 日本語 Lorem ipsum

Lorem Ipsum

Web制作小物ツール

WEB制作時に役立つ！ダミーテキストに使える定型文まとめ | 東京上野のWeb制作会社LIG

なんちゃって個人情報

まとめ

XDでスライスしてみよう（初心者&コーダー向け）

目次

基本的なスライス手順

書き出すときの設定

jpg書き出し

png書き出し

svg書き出し

余白込みや、好きなサイズでスライスする手順

均等配置したリストの最終行を、左寄せにする方法（ justify-content: space-betweenを使った場合）

ダミーテキストが生成できるおすすめサイト６選