Click the button below to hide the contents of this page. Notice how the footer sticks to the bottom of the window even when there’s not enough content to fill the page. Toggle Contents Getting the footer to stick to the bottom of pages with sparse content is something just about every Web developer has tried to tackle at some point in his or her career. And, for the most part, it’s a solved probl
Lightweight and beautiful library <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">CDN | Download | GitHub Default HTML beautyThe native HTML elements get a boost so you don't need to write presentation classes mixed with your HTML. Picnic is completely modular so you can easily modify and test each part: Documentat
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
こんにちわ、メルカリアッテでFront-end Developerをしている@t32kです。 メルカリではセミナー参加補助制度があり、それを利用して海外カンファレンスに参加してきました。今回は11/30 ~ 12/01、オーストラリア・メルボルンで開催されたCSS/JSConf Australia 2016に行ってきたので、そのレポートを書きたいと思います。 今回はその中でも、CSSConfでのBarak Chamo氏が講演した内容が非常に興味深かったので紹介します。 Hey presto, CSS! 今日はお話する内容は魔法についてです。どのように自分が定義したCSSをブラウザ上で利用可能にするのかという魔法です。 その前に、魔法ではないこれまでのCSSについて振り返ってみましょう。日本には『珍道具』と呼ばれるものがあります。とても素晴らしい技術ですが、ちょっとオーバーエンジニアリングに
こんにちは。みんなのウェディングの平岡です。 みんなのウェディングでは自社開発したCSSフレームワーク「Esthe（エステ）」を利用して開発をしています。 今回はそのEstheの簡単な説明と導入までの流れを紹介したいと思います。 導入前までに抱えていた問題 案件が発生する都度すべてのデザインを作成していたため、デザイナーの作業が増えていく デザインガイドラインがないため、コンテンツ作成毎にトンマナがずれていく CSSのルールがないため、どこから読まれているのかわからず解読＆確認に時間がかかる サービスの急激な伸びによる影響でCSS周りの整備まで手が回らず、 コンテンツの拡充に比例して日々メンテナンスコストが上がっている状態でした。 なんとかしたい サイトとして共通化されたデザインパーツがほしい デザインガイドラインがほしい 管理されたCSS環境がほしい bootstrap？ bootstr
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site! I’d be nice if we could
この記事は CSS Advent Calendar 2016 の5日目の記事です。 W3C Houdini Task Forceで進められている「Houdini」と呼ばれるプロジェクトの話をします。 FlexBoxの例 突然ですが、FlexBoxの話をします。 モジュールの横並びには重宝しますよね。 今年になってだいぶ利用が進んだ印象がありますが、随分と前からFlexBoxの仕様は存在していました。 一番最初の草案に遡ってみると、なんと2009年。 7年前です。 2013年くらいからFlexBox良いぞという記事はちらほら出始め、おそらく皆認識はしていました。 が、ブラウザの対応状況などを考慮し実装できずにいたと思います。 仕様定義の議論から実際にここまで普及するまで7年間もかかっているわけです。 流れを整理してみると、以下のようになります。 提案、議論、仕様書作成あたりに時間がかかるのは
Misocaという会社でなんかしてる @merotan ともうします。 最近仕事でとある機能のUIリニューアルをおこなうことがありまして、僕はどうしてもPostCSSを使いたかったのと、現行のクソみたいになっているCSSからなんとしてでも脱却したかったので、どうすればクソなことにならずいい感じにCSSを書くことができるか考えて実践してみた結果を書いていこうと思います。 影響を受けているもの 参考・影響を受けているものとしてFLOCSS、BEM、AtomicDesignなどがあります。 意識はしてないものの何かでみてあーこれ良いなと思ったものもあるかもです。 命名規則 命名規則はBEMです。(BEMの説明はここではしないので、上のリンクから確認していただければと) ですが、Modifierはカスタムデータ属性を使用します。 またModifierはカスタムデータ属性を活用します。 こうすること
Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。 脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRuby on Railsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。 まず、Sprocketsで使われているRuby製のSas
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
28 November, 2016 Nesting Your BEM? Written by Harry Roberts on CSS Wizardry. Table of Contents Nesting in CSS Specificity Chain the First Class Simplifying with Sass Practical Upshot Downsides Use Cases To Use or Not to Use? Let me please start this post by saying that this is not a recommendation or new ‘best practice’. This is me thinking out loud. I’m a huge fan and proponent of BEM, and have
Why it's awesomeMilligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy! Do you want to star it, tweet it, or share it with anyone? So do it! This means a lot to me ♥ Getting St
入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の２月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く