CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmicrodataやMetaタグなどのコードを簡単に生成できるオンラインツールを紹介します。 コードごとに対応ブラウザも表示されるので、かなり便利です。
ResponsiveResponsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. <div class="row"> <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"> <div class="box">Responsive</div> </div> </div> FluidPercent based widths allow fluid resizing of columns and rows. .col-xs-6 { flex-basis: 50%; }Simple SyntaxAll you need to remember is
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事『Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ』を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 font-feature-settin
At LLCBuddy, we understand that forming a business can be an overwhelming experience. That’s why we have tailored our platform to provide accurate, easy-to-understand information and resources to help you navigate the complexities of business formation and management. Are you an aspiring entrepreneur or an established business owner looking to set up a Limited Liability Company (LLC) or another bu
こちらは Frontrend Advent Calendar 2014 19日目の記事です。 2014年 12月8日〜12月14日の間、カナダに滞在してきました。目的は12月9日〜12日に開催される Smashing Conference 2014 へ参加するためです。 海外のカンファレンスに参加するのはおろか、海外旅行もしたことがないので、今回１人でカナダに行くということで終始緊張の連続でした。（Frontrend の @hiloki さんが「僕も行こうかな」と言っていたので、心強く思っていたのですが、残念ながら叶わず。） 本記事は、カンファレンスが開催されたカナダという国にまつわるお話を Frontrend の話題を交えながら書きつつ、このカンファレンスで一番楽しみにしていたトピックである「Atomic Design」について書いていきます。 参加の理由 今まで海外カンファレンスなど参
概要 iframe で出力された Youtube 動画を CSS を使ってレスポンシブに対応させる。 参考にしたサイト：「Thierry Koblentz / A List Apart : Creating Intrinsic Ratios for Video」 サンプル Youtube から iframe の埋め込みコード（共有 → 埋め込みコード）を取得して、それを任意のクラス名を付けた div 要素（class=”youtube”）で囲む。 <div class="youtube"> <iframe width="640" height="360" src="//www.youtube.com/embed/dH3GSrCmzC8" frameborder="0" allowfullscreen></iframe> </div><!--end of .youtube-->
公開日2015-03-26タグCSS親要素に対して子要素を上下左右に中央配置する TRBL メソッドというものがある。 .wrap { position: relative; width: 300px; height: 300px; border: 1px solid magenta; resize: both; overflow: hidden; } .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 176px; height: 244px; background-color: grey; } .inner を img 要素にして、画像の大きさが不定の時でも頑張る方法は以前記事にしているので参考までに。 この TRBL メソッドでさらに頑張ると、背景指定ではなく
CSS Grid Layout Moduleについて調べたメモ CSSによるレイアウトの問題はFlexboxでほとんどが解決されたと言って良いが、複雑なグリッドレイアウトを実現するためにCSS Grid Layout Moduleの策定が進められている。display: grid;ないしdisplay: inline-grid;といったように、displayプロパティに値が追加されており、それらが指定された要素はブロック要素またはインライン要素のように振る舞い、内包されるコンテンツがグリッドモデルに従ってレイアウトされる。 Chromeは50から、Firefoxは46から対応しているが、Chromeは現安定バージョンの49でもchrome://flags/でExperimental Web Platform featuresを有効にすれば使える。 そんなdisplay: grid;について
CSSはずっとSassを使っていて、gulp-sassでコンパイルする感じの僕でしたがPostCSSに移行してみたのでそのときの工程をメモとして残しておきます。 PostCSSとは何か なぜSassからPostCSSに移行したのか むしゃくしゃしてやった。 ほんとは ただ単にSassを使っているということに飽きたってのが1点。 あとはSassの機能において僕はmixinとかextendとか正直必要ないなって考えていて、変数であるとかネストであるとかimportであるとか(CSSのimportじゃない方の)が使えればそれで良いってのがあって、そうなるとPostCSSの必要な機能だけ読み込んで使うっていうスタンスは良いなっていうのが2点目。 あと結局Sass使ってそのあとにautoprefixerとminifyは確実にやるのでそこでSass以外のツールでCSSのことをあれこれしちゃってるのでそ
Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。 折り返しを制御する2つのCSSプロパティ 幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいので
CSS Scoping Module Level 1 W3C First Public Working Draft, 3 April 2014 This version:http://www.w3.org/TR/2014/WD-css-scoping-1-20140403/Latest version:http://www.w3.org/TR/css-scoping-1/Editor’s Draft:http://dev.w3.org/csswg/css-scoping/ Feedback: www-style@w3.org with subject line “[css-scoping] … message topic …”(archives)Test Suite:None YetEditors: Tab Atkins Jr. (Google)Elika J Etemad (Invite
今回のソリューション：【Living Style Guide/リビングスタイルガイド】 〜株式会社リッチメディアは、デザイナーとエンジニアのコミュニケーションの効率化に課題感をもっていた。その解決策として選んだLiving Style Guide（リビングスタイルガイド）の使い方〜 UI/UXデザインを作り上げていく過程で多くの場合課題になるのは、フロントエンジニアとデザイナーの意思疎通をいかに上手くやっていくかということだ。デザイナーのイメージするものをコーディングによってどれだけ正確に再現するか、互いに共通認識を持つことで開発のスピードアップにも繋がる。 ヘルスケア領域、ビューティー・サロン領域におけるメディア事業を展開する株式会社リッチメディアで現在新卒2年目のエンジニアを務める古沢 宏太さんは、デザイナーとエンジニアのコミュニケーションをもっと効率化できるのではと考えていた。そして
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
