1. /
  2. デザイン

デザイン

【photoshop】アニメーションGIFの制作方法

PhotoshopCCでアニメーションgifを作る！

https://uxmilk.jp/23938

 

【まとめ】

・タイムラインウインドウなるものを開く

・下に出てくるので、コマを追加して、複製したり秒数いじったりして制作

・アセットでは書き出せないっぽいので、ファイル→書き出し→書き出し形式→gifだとうまくgifが動かないことがあったので、慣れているweb用に保存（従来）でやったらできました。

【アイコン】スマホのブックマークアイコンの設置について

スマホのブックマークアイコン用画像を指定する方法

アイコンのジェネレーター

https://iconifier.net/

 

【まとめ】

・下記の４種類作ってアップすればOK

<!– スマホ用基本 –>
<link rel=”apple-touch-icon-precomposed” href=”画像のURLをセット”>
<!– iPad用基本 –>
<link rel=”apple-touch-icon-precomposed” sizes=”76×76″ href=”画像のURLをセット”>
<!– スマホのRetina用 –>
<link rel=”apple-touch-icon-precomposed” sizes=”120×120″ href=”画像のURLをセット”>
<!– iPadのRetina用 –>
<link rel=”apple-touch-icon-precomposed” sizes=”152×152″ href=”画像のURLをセット”>

【CSS】文字列の折り返しに使うプロパティは？

【参考】

https://qiita.com/gcyata/items/353658a7bdc1e7395337

 

文字列を強制的に改行させるCSSのプロパティ

【まとめ】

word-break : break-all;が有名だけどoverflow-wrap : break-word;が望ましい

・word-break : break-all;は単語の途中でも強制的に改行

・overflow-wrap : break-word;は単語の途中で改行するかどうかを指定する

overflow-wrapは 単語の途中で改行するかどうかを指定するためのプロパティです。改行方法を指定するword-breakとは用途が異なります。そのため、親要素に対してtable-layout: fixed;を指定する必要があります。

 

【Instagram】ウィジェットを無料でサイトに設置する方法

おすすめを紹介

https://www.go-ride-news.com/technology-instagram-widget/

自作派

 

【まとめ】

  1. SnapWidget(スナップウィジェット)

    お手軽だが、無料だとsnapwidgetの用意したページに飛ばされる

  2. Instagram API　＋　instafeed.js

    無料＆公式。しかし認証制で埋め込むだけの理由だと通らない可能性が高い

  3. Snapppt(スナップト)

    Snappptはウィジェットから商品の購入が可能にさせるECサイト向けのツール

  4. InstaWidgetを使う

    これが一番簡単かも。デメリットとしてはフォローボタンのInstaアイコンが古いバージョンのものになっていることと、写真のリンク先がInstaWidgetに飛んでしまう

【css】CSS3でアニメーションをつけるジェネレーターまとめ

CSS3アニメーションのサンプルまとめ

http://rakuten-tips.com/htmlcss/generator/

使いやすいの

http://cssanimate.com/

ぐりぐりドラッグでテストしながらアニメーションを作成できる

http://jeremyckahn.github.io/stylie/

動作デモを確認しながらお気に入りの動きを見つけることができます。色々と試してみてください。

 

jQueryでanimationを制御

http://www.webopixel.net/javascript/507.html

イケてる海外サイトまとめ

海外のアワードサイト

アワードサイトで何を見ているかというと、「トレンド」と「発想」です。

レイアウトと配色とフォントサイズ、UI、写真のアスペクト比、マージンルールやグリッド幅などにはトレンドがあり、かなり早いペースで移り変わっていきます。

海外で流行ったものは少し遅れて日本にやってくるので、チェックしておくと流行に乗れてナウいデザイナーになれますね。

フロントエンドの「想定外」に対応、ちょっとしたTips

フロントエンドの「想定外」に対応する考え方とTipsいくつか

https://necomesi.jp/blog/tsmd/posts/229

お恥ずかしながら記事内の「Autoprefixer」が何のことやら？

だったので調べました。。

https://parashuto.com/rriver/tools/using-custom-data-for-autoprefixer

要はその地域でユーザーが使用しているブラウザの割合で「ベンダープレフィックス(-webkit-や-ms-)」をつけるつけないが設定できるってことでいいのかな！？

■ベンダープレフィックスとは↓

https://qiita.com/tonkotsuboy_com/items/377913c51b1ac00deffe