今更だけれどSassぐらい知っとこうと思ったのでいろいろと自分用にメモ。 導入とかは省いて構文などのメモです。 SassにはSassとSCSSと言う2種類の記法があるらしいですけど、 ナウなヤングたちはSCSS記法って聞いたのでSCSS記法でメモってます。 基本的なこと 記号いろいろ 記号 意味
SCSSを導入しようかと検討する際に、このブログの記事を参考にしてくれた奇特な方が居たそうな。どうもありがとう。 で、声をいただくと書かない訳にはいかないので、条件分岐のIf文と反復処理の構文に絞った内容で書いてみようかと思う次第です。 SCSSとはCSSの拡張言語です。長くなったり、複雑になって管理できなくなったりするCSSを効率的に書けるようにします。効率的にする機能として、以前に紹介した変数やパーシャル、これから紹介する条件分岐のif文と繰り返し処理のfor文などがあります。他にも継承させる@extendや関数化できる@mixinなどがありますが、これは別の機会で。 条件分岐の使い方デザイナーならjavascriptとかで触れたことがある条件分岐、if文の使い方です。 公式サイトを見ると、基本的な記述例と以下内容が記載されています。 Note: Control directives
スクロールというのはユーザが好きな場所まで自分で指定できるのが基本です。しかしサイトの種類によってはスクロールさえも制御したいと思うことがあります。一つのページの中で複数の情報を分けて表示したい時などがそうです。 そこで今回はスクロールを制御できるsmartscrollを紹介します。 smartscrollの使い方 実行例です。ぴしっと上辺で止まるのが分かります。 高さを合わせてウィンドウ全体を一色にすることも簡単です。 smartscrollではスクロールに合わせてハッシュタグを自動的に変化させたり、そのハッシュタグを使ってアクセスした時に表示を再現することもできます。シングルページアプリケーションで使うと効果的なライブラリです。 smartscrollはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。 d4nyll.github.io
Pinterestで表示で一躍人気になったのがMasonryと言われる表示です。幅は固定しつつ、高さをずらして表示することで変化による印象付けを与えられます。女性向けのメディア、写真を多用するサイトで使われています。 多くがJavaScriptを使って表現するのですが、今回紹介するdrivewayはCSSだけで実現されています。 drivewayの使い方 デモの表示です。JavaScriptはオフになっています。 CSS3のアニメーションを使うことでフリップしたり、マウスフォーカスを実現しています。 drivewayが便利なのはJavaScriptがオフであっても利用できることです。もちろん、JavaScriptが自動的に行っていた部分は調整する必要があるかも知れません(画像の高さを予め割り当てるなど)。しかしdrivewayの方がデザイナーの方にとってはカスタマイズしやすく、使いやすいの
A/Bテスト 5 Ads Data Hub 1 AdSense 5 AdWords 19 AdWords 連携 21 AMP 4 Analytics 1 Analytics 基本 5 API 2 BigQuery 11 Cookie 1 CPA 1 DCM 1 DFP 3 DoubleClick 11 DoubleClick Campaign Manager 1 DoubleClick for Publishers 3 e コマース 2 Firebase 8 Firebase Analytics 4 Firebase 向け Google アナリティクス 2 ga.js 2 GA4 12 GACP 18 GCP 1 Google Ads 1 Google Cloud Platform 1 Google Consumer Surveys 2 Google Insights for Search
インターネットが進化することで、ウェブデザインの作成方法は変化してきていますが、デザインや配色など基本的な要素で悩んでしまうということも多いのではないでしょうか。 あらかじめ利用する素材を揃えたUIコンポーネントを使えば、より手軽にそしてスピーディーにデザインをウェブサイト制作を進めることができます。 今回は、あらゆるデザインコンセプトやプロジェクト案件に対応でき、無料ダウンロードできるUIコンポーネント素材をまとめてご紹介します。Photoshop で利用できるのはもちろん、最近人気の Sketch や Figma、Illustrator にも対応する素材が揃います。デザインアイデアが欲しいときなど、今後の参考にしてみてはいかがでしょう。 詳細は以下から。 魅力的なウェブデザインを素早く仕上げる、すごい無料UIコンポーネント素材まとめ iOS 10 GUI Kit Sketch / PS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く