タグ

2020年1月9日のブックマーク (9件)

  • RailsでCSSを書かずにマテリアルデザインにする話 - Qiita

    背景 bootstrapも見るの飽きてきて、とはいえcssゴリゴリアレンジして書くのだるいので、 ちょっと調べたところMaterialDesign良さそう。 マテリアルデザインを調べてみた Material Design公式サイト https://material.io/design/introduction/# 下記がよくまとまってて、わかりやすかった。 よくわかるマテリアルデザインの設計コンセプト http://fladdict.net/blog/2015/05/material-design.html Material Designを最速で使いこなす https://note.mu/kenichiikeuchi/n/nc697dd8ad639 選定理由 勝手にレスポンシブになる フラットデザインだからレイアウトが組みやすくカードっぽいデザインを取り入れれば綺麗に見えそう サンプルを探

    RailsでCSSを書かずにマテリアルデザインにする話 - Qiita
  • Googleマテリアル・デザインをはじめよう!参考にしたい無料素材やアイデアまとめ

    [fancy_box]海外デザインブログDesignModoで公開された「Material Design Resources and Inspiration」の著者 Paula Borowskaより許可をもらい日語抄訳しています。Thank you so much again, @paula & @designmodo![/fancy_box] マテリアル・デザイン(英: Material Design)は、Googleが発表した新しいビジュアル言語で、より良いユーザー体験を実現するための新しいテクノロジーに、どんな環境でも使える理想的なデザインを組み合わせようとしています。マテリアル・デザインのコンセプトはまだまだ新しく、参考になる資料やサイトが少なく、手が出しにくいのではないでしょうか。 今回は、マテリアル・デザインをはじめるきっかけになりそうな、HTML/CSSやPSD,AIファイ

    Googleマテリアル・デザインをはじめよう!参考にしたい無料素材やアイデアまとめ
  • Material Designの設計思想を探る|usagimaru

    この記事は、2018年5月25日に開催された Google I/O Extended 2018 Shibuya での講演内容を文章に起こしたものです。当時はGoogle I/O 2018の直後、Material Designガイドラインがいくらかアップデートされ、Material Themingや柔軟な基盤の構築といった新たな考え方が明示されたばかりでした。この講演は、アップデートされた内容の背景にある思想や意図を考察し、Material Designの動向を探ろうという趣旨になります。この記事では当時のスライドを交えながら内容の解説と考察を行います。 今回は、I/Oで明らかになったMaterial Designの新しい部分を中心に、iOSのデザインと比較しながらその設計の仕組みや思想を探っていきたいと思います。異なる観点から向き合うことで共通点と他との差異を見極めるという方法をとります。

    Material Designの設計思想を探る|usagimaru
  • Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

    実は、bootstrapの知識だけでは足りません(涙) 気でweb制作仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか? 便利ですよね。その便利さを物語るように、当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て

    Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
  • Bootstrap テーマ

    Bootstrap テーマ Sass 変数を使って, 簡単なテーマやコンポーネントの変更して Bootstrap をカスタマイズします。 イントロダクション Bootstrap 3 では, LESS, カスタム CSS および dist ファイルに含まれていたテーマ用スタイルシートの変数を上書きすることによってテーマを設定していました。Bootstrap 4 は Bootstrap 3 とは少し異なるアプローチで使い慣れた方法を提供します。 Bootstrap 4 は Sass 変数, Sass マップおよびカスタム CSS によってテーマを設定します。テーマ専用のスタイルシートはありません。代わりに, 組み込みのテーマでグラデーションやシャドウを追加することができます。 Sass Sass のソースファイルで, 変数, マップ, ミックスインなどを活用してください。 ファイル構造 Boo

    Bootstrap テーマ
  • Bootstrap4のテーマをカスタマイズする3つの簡単な方法

    Bootstrap4のテーマカスタマイズ方法をまとめてみました。 Bootstrap4はそのままでもそれなりのデザインを作れるのですが、少し物足りないんですよね。 ここではBootstrap4のテーマの作り方と合わせて、簡単にテーマカスタマイズできるツールなども紹介します。 Bootstrap4のテーマカスタマイズ、3つの方法 Bootstrap3ではLESSを使って別にテーマファイルを作り、数多くの変数をカスタマイズするというややこしいことをしていましたが、Bootstrap4ではSASSに変更されてカスタマイズもやりやすい構造になっています。 Bootstrap4でテーマをカスタマイズする方法は大きく分けて、「CSSを書く」「Sassを書く」「ツールを使う」の3つ。 ではひとつずつ解説していきます。 CSSを書いて上書きする CSSファイルにCSSコードを書いてスタイルを上書きすること

    Bootstrap4のテーマをカスタマイズする3つの簡単な方法
  • マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選 

    この記事は、2016年4月13日の記事を再編集したものです。 これからWebデザイナーとして働く方に確実に知っておいてほしい知識の1つに「マテリアルデザイン」があります。 2014年6月にGoogleが発表したマテリアルデザインは、現在Googleのほとんどのサービスに適用されており、採用する企業も徐々に増えています。 参考: Google の新しいデザインガイドライン「Material Design」|クラスメソッドブログ AndroidやYouTubeなど身近なサービスに適用されているため、殆どの方が目にしたことがあるかと思いますが、マテリアルデザインの定義について、明確に理解できている方はどのくらいいるのでしょうか。 「わかりやすさ」を追求した結果生み出されたマテリアルデザインは、デザイン設計において非常に参考になる要素が多数含まれています。 マテリアルデザインを採用するしないに関わ

    マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選 
  • Bashの邪悪なコマンド9選 - Qiita

    rm -rf /やったことある人。 私はないです。 以下はAndreas Müller( Twitter / GitHub / LinkedIn / Medium )による記事、9 Evil Bash Commands Explainedの日語訳です。 9 Evil Bash Commands Explained 初めてターミナルを使って、そしてそれを理解したときのことを覚えています。 あらゆるファイルにアクセスし、全てのプログラムを実行し、黒い画面に何かを入力するだけでシステムの全てを完全に掌握できることに気がついた、あの感覚。 そしてもちろん、致命的ミスを犯して全てを失った、あのときの恐怖も。 私は当はシステム管理者ではありませんが、長年にわたってLinux/UNIXベースのシステムで作業してきたので、コマンドを実行しようとしてEnterキーを打つことを躊躇う状況に何度も遭遇しまし

    Bashの邪悪なコマンド9選 - Qiita
  • RailsアプリをRuby 2.7.0で動かして分かったこと | Recruit Tech Blog

    はじめに (背景) 昨年のクリスマスにRuby 2.7.0がリリースされました。 Ruby 2.7は今年リリース予定のRuby 3への移行を見据えたバージョンであり、多くの新機能や変更点があります。そこで、弊社が企画制作する『Babyプラス』のRailsアプリをRuby 2.6.5 -> 2.7.0に上げて動かしてみたところ、約1,000件のテストケース実行に対して6件のエラーと2,700件ほどのワーニングが発生しました。この結果の分析によりRuby 2.7移行について傾向と対策が見えてきたので、現時点 (2020/01/08) で分かったことを共有します。 結論 (Ruby2.7移行についての傾向と対策) 傾向として、多くのgemRuby 2.7.0からワーニングとなる言語仕様変更の影響を受ける 具体的には、ブロック無しProc.new/proc/lambdaおよびキーワード引数 (k

    RailsアプリをRuby 2.7.0で動かして分かったこと | Recruit Tech Blog