サイト構築
コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
Post on:2019年1月23日
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！ STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツー […]
これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle
Post on:2019年1月22日
CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobjec […]
[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ
Post on:2019年1月21日
テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。 イラスト: Girls Design Mate […]
[JS]面白いスクリプトが登場！スマホのDeviceMotionイベントをサポートし、傾きを感知できる -Shiny
Post on:2019年1月21日
スマホの傾きを感知し、それに合わせてグラデーションを光の反射のようにシミュレートさせる軽量スクリプトを紹介します。 スクリプトは単体で動作し、MITライセンスで利用できます。 Shiny Shiny -GitHub
現在の制作環境に合うよう開発された、使い勝手がよさそうな新しいCSSリセット -Destyle.css
Post on:2019年1月18日
使い勝手がよさそうな新しいCSSリセットがリリースされたので、紹介します。 Destyle.cssは現在の制作環境に合うよう開発されたCSSリセットで、Eric MeyerのリセットとNormalize.cssの不満点を […]
イラストやデザインの参考資料に！人物・動物・植物・デジタル機器・建物・家具などを図版化 -Dimensions.Guide
Post on:2019年1月18日
人物・動物・植物をはじめ、デジタル機器、建物、家具など、日常で見かける標準的なさまざまなスペースとサイズを図版化したDimensions.Guideを紹介します。 人物だけでも、老若男女の立ち・座り・寝・歩き・運動、そし […]
CSSで実装されたローディング・スピナーのアニメーションのまとめ
Post on:2019年1月17日
シンプルなローディングのアニメーションから、複雑で楽しいローディングのアニメーションまで、CSSで実装されたローディングアニメーションを紹介します。 ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという […]
Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid
Post on:2019年1月16日
カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的 […]
最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニック
Post on:2019年1月15日
ここ一年でグラデーションの使い方がだいぶ進化してきました。使用するカラーだけでなく、使用する場所にも変化が見られます。 Webサイトやスマホアプリで最近増えてきたグラデーションのボーダーをCSSで実装するさまざまなテクニ […]
CSSリセット、2019年におすすめのカスタマイズ方法
Post on:2019年1月11日
Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場 […]
sponsors
