1. /
  2. WEB制作

WEB制作

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

海外のアワードサイト

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

レイアウトと配色とフォントサイズ、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

 

【editor】AtomでSass（SCSS）を自動コンパイルできるようにする

SCSSの自動コンパイル機能がAtomにもあると知って設定してみる

【2019/12/28追記更新】

ATOMのコンパイル機能「sass-autocompile」をちゃんとインストールができるようになった！！

↓こちらを参照して解決！

https://qiita.com/akane8747/items/f72cf307354ffe10b91d

https://asamone.com/2018/04/01/atom-sass-windows/

↑こちらを参考に設定

エディターを

ドリ→Atom→ドリ（SCSSの自動コンパイルが便利と聞いて）

このように渡り歩いてきましたが、Atomにもあると知り、もう一度出戻りしよう！

と思っていたら、node-sassがインストールできない

↓この方のブログをみると、なにかできないらしい。。。

ということで、こちらを参考に再チャレンジ！

https://manablog.org/codekit/

codekitは有料ですが。。

ついでにAtomの設定も見直してみた

https://asamone.com/2018/04/01/atom-sass-windows/

スクロールすると出て来るボタン

スクロールすると出て来るページトップボタンのサンプルなど

https://cotodama.co/pagetop/

参考にさせていただきました。

ボタンのデザインから出てくる動きまで、html、css、jsのコードと一緒にわかりやすいサンプルで紹介されています。

ボクはページトップの実装ではなく、横から出てくるjqueryの動きだけ探していたので、「横から出てくるボタン」を参考にカスタマイズして使いました。