2018年のfont-family指定 - Qiita
サンセリフ編です。 目標 欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。 和文その1: 游ゴシックを使う(実はまだ厳しい気がしている) 和文その2: Winにはメイリオ, Macにはヒラギノを使う。(推奨) 1. 欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。 それぞれ次のように指定すれば実現可能 font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 和文フォント指定, sans-serif;
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
レスポンシブWebデザインのための２つのCSSテンプレート
最近では、Webデザイナーとして仕事をしていく上でレスポンシブ対応は必須のスキルになってきています。 スマホの普及率も高まっているので、今後も必要とされるスキルでしょう。 もちろんですが、レスポンシブ対応がきちっとできるだけで仕事の単価も上がります。 CSSのテンプレートを知る Webデザインの勉強を始めたばかりの時は、レスポンシブというと何か魔法のように聞こえることもあることでしょう。 とにかく耳にする機会は多いし、できたほうがいいという気はするんだけど、なかなか手をつけられない。 難しそうというイメージがかなりあるんですね。 ただ、実はレスポンシブ対応とはいってもCSSのメディアクエリというものを使って、1つのページについて3ページ分のCSSを書いているみたいなものなのです。 つまり、CSSが普通に書けるようになってしまえばレスポンシブだろうとあまり関係ないわけです。 簡単にメディアク
Modernizr: the feature detection library for HTML5/CSS3
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
CSS3のFlexBoxで実装する、知っておきたい5つのレイアウトテクニックまとめ
Flexbox は、もともとウェブサイトやモバイルアプリのUIをデザインするために最適化された CSS です。 Flexbox のさまざまなプロパティを利用することで、これまでは CSS のみで難しかったレイアウトや配置を実現できるようになりました。またスクリーンサイズに応じてレイアウトが変化する、レスポンシブデザインとの相性もよい点もポイントです。 この記事では、よくあるCSSによるレイアウトの問題5つを、Flexbox で解決できるテクニックを見ていきましょう。動作確認用のデモページと一緒に、実際にこれらのテクニックを適用した実践サンプル例もまとめています。 目次 対応ブラウザ環境は？ 高さの揃ったサイドバーを作成する方法 要素の表示順番を変更する方法。 どんな要素も天地中央揃えにする方法 レスポンシブに対応する、グリッドレイアウトを作成する方法 フッター要素を常に固定する方法 対応ブ
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
Yellow Lab Tools: サイトを色々深く解析して改善を提示してくれるツール
B! 5 0 0 0 Google DevelopersのPageSpeed Insightsを参考にしてサイトを高速化 を書いた後に、 Twitterでこれ知ってる？と言われた Yellow Lab Tools が結構高機能で色々面白かったのでその紹介。 Yellow Lab Tools Yellow Lab Tools Yellow Lab Tools はWebページを入力するとそのページを解析して、 HTML, JavaScript, CSS等について改善案を出してくれるWebツール。 Google DevelopersのPageSpeed Insightsを参考にしてサイトを高速化 を書いた後に、作者の人がTwitterでこれ知ってる?という感じでメッセージを送ってきたので見てみました。 (フランス人で多分日本語は読めないので単にPageSpeed Insightsという ワードを
SMACSSによるCSSの設計 | 前編 ベースとレイアウト
はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース：要素そのもののデフォルトスタイル レイアウト：ページをエリアごとに分割 モジュール：再利用可能なパーツ 状態（ステート）：レイアウトやモジュールの特定の状態を示す テーマ：サイトのルック＆フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS（日
脱カオスなCSSのために実践している7つの事 - Toro_Unit
突然ですが、CSSってカオスですよね。 CSSはすべてを命名で統制をとる紳士協定 #frontrend — (╯°□°）╯︵ uɐʇoɔod (@pocotan001) 2014, 6月 21 まぁそうですよねー。紳士協定とはうまいこと言ったもんです。言語仕様としてどうしようもない。全部グローバル。JavaScriptとかでやったらまずクソコードって言われるやつです。 そうはいっても、レスポンシブだとかでどんどん肥大化していく一方なので、何とかしないと身の破滅です。 とりあえず結論として、FLOCSSやれば良いんじゃないですかね。と言ってしまうのもあれなので、とりあえず実行している事を箇条書きで。 とりあえず何かしら公開されているCSS設計思想を取り入れる。 何かしら入れましょう。SMACSSでもMCSSでもFLOCSSでもモジュール組みでも、とりあえずなんでも良いかと思います。大事なのは
CSSコーディングで泣かないためのSassの基礎知識と10の利点
CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ） 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr
TheSassWay.com – All SaSS Related Stuff
Among the myriad of resources available to entrepreneurs and industry professionals, podcasts have emerged as a potent medium for knowledge dissemination and community building. Within this podcasting landscape, one niche stands out prominently: Software as a Service (SaaS) podcasts. These audio platforms have garnered significant attention and acclaim, serving as invaluable sources of insights, s
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
MUI: The React component library you always wanted
Ready-to-use foundational React components, free forever.
HTMLメール CSSガイド
14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017
On Scroll Header Effects | Codrops
Some inspiration for headers that animate when scrolling the page. You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animatio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nominees Gallery - CSS Web Design Awards - CSSDA
cssbuttons
GitHub - hiloki/flocss: CSS organization methodology.
CSSの実用的なテクニックから素晴らしいアイデアまで！スタイルシートの最新テクニックのまとめ
スマホアプリのUIを再現できるCSSフレームワークまとめ
