タグ

2017年9月17日のブックマーク (5件)

  • Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」

    Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。 動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し

    Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
  • https://developers.google.com/web/tools/setup/workspace/setup-devtools

    Chrome でビルドする Chrome の仕組み、オリジン トライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。

  • ブレイクポイントは端末のサイズに依存させない - yuhei blog

    レスポンシブデザインの最適なブレイクポイントは何pxなのかという話題をよく見る。既存のデバイスのサイズを比較することで答えにたどり着こうとするアプローチがほとんどだが、それらは間違っている。 ブレイクポイントは、コンテンツの見た目が切り替わるべきタイミングを基準に設定されなければならない。特定のデバイスのサイズを基準にすべきではない。 主流のデバイスのサイズは時間が経てば変わるし、あるデバイスに合わせた設計にしていたら別のデバイスには嬉しくない結果になってるかもしれない。レスポンシブデザインはどんな環境においてもある程度の最適化をさせるために妥協可能な落としどころを目指す思想なので、それと対立してしまう。 改善策は、既存のデバイスのサイズを気にし過ぎずに、コンテンツ自身のためのブレイクポイントを考えること。コンテンツ自身に合わせたブレイクポイントの設計にすることで、結果的にどのデバイスでも

    ブレイクポイントは端末のサイズに依存させない - yuhei blog
  • HTML5って「/>」って不要だよね? 空要素の最後にスラッシュ必要か?

    ども、23年ぶりV逸にうなだれる dice(@dice_dDtea)です。 さて、 市場調査というか・・・、ライバルw調査というか・・・、 勉強のため色々と人様のソースコードを見ていると、 色々コーディング迷子なってるソースを見かけます。 Web制作会社でも時々見かけますwww その中で今回は、閉じタグ~終了タグ方面の話をします。 <meta charset="UTF-8"> <meta charset="UTF-8" /> どっちもHTML5では無問題なんです・・・ が、どっちもよく見かけます。 一体どっちが望ましいの? HTML って基的に… foo ってタグがあったとしたら <foo> と始め、 </foo> で閉じて終わります。 e.g. <h3>いいから追えッ!!</h3> <p><a href="http://a-catfish-in-winter.com/">冬のナマズ</

    HTML5って「/>」って不要だよね? 空要素の最後にスラッシュ必要か?
  • 黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ

    黄金比や黄金螺旋を使い、Webサイト、雑誌や同人誌の表紙、フライヤーなどのレイアウト、コンテンツの配置、余白のとり方、写真の構図、オブジェクトの形のデザインにうまく取り入れるデザインテクニックを紹介します。 以前に1,000ブクマ越えの「黄金比をサイトのデザインに取り入れる簡単な3つの方法」を記事にしましたが、黄金比の取り入れ方もいろいろ進化しています! What Is The Golden Ratio? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 黄金比(Golden Ratio)とは 1. 黄金比をレイアウトに使う 2. 黄金比をスペースに使う 3. 黄金比をコンテンツに使う 4. 黄金比を写真の構図に使う 5. 黄金比を形に使う エジプトのピラミッド、ダヴィンチのモナリザ、これらとTwitterやペプシのロゴとの共通点は何で

    黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ