なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
About this data We've been using Chrome's anonymous opt-in usage statistics to count the occurrences of certain CSS features in the wild. The numbers on this page indicate the percentages of Chrome page loads (across all channels and platforms) that use the corresponding CSS property at least once. Data is ~24 hrs old. Except as otherwise noted, the content of this page is licensed under a Creativ
Modals # Source: Codrops From Below From Above Slide In (right) Slide In (bottom) Newspaper Side Fall Sticky Up 3D Flip (horizontal) 3D Flip (vertical) 3D Sign Just Me 3D Slit 3D Rotate Bottom 3D Rotate In Left Blur Let Me In Make Way! Slip From Top From Top, Tilt Fall From Top to Bottom From Bottom to Bottom From Top to Top
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
CSS for clean and fast web apps. Soooo Fast!Performance is our #1 goal. Every component we design is benchmarked for performance. You can see our results. Components GaloreWe have the building blocks to get you up and running fast. Our growing set of components were born from CSS. ThemeableIs that even a word? It should be! We love our theme, but we don’t want to hit your brand over the head with
Sassを使ったり、人からパクったりして、極力失敗しない方法
123 CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. CodePen is a social development environment for front-end designers and developers. 👋 It’s the best place to build and deploy a website, show
実は以前に別の場所でも書いたのですが、今回Google Page Speedの方でも少しだけ触れられていたので、改めてまとめ。 自分でも経験があることなのですが、開発をやっているとどうしても、構造をモジュール化して複数のファイルに分割して管理したくなります。 StyleSheetにおいても同様で、プレゼンテーション層のコンポーネントにあわせてCSSを用意し、ページ構成にあわせて取り込むようなことをやりたくなるでしょう。 しかしその際、@import構文を使うのはパフォーマンスと挙動の両方に有害である可能性が高いと、「」の著者としても知られるSteve Souders氏が警鐘を鳴らしています。 使うべきでないポイント @importは、大きく分けて2つの観点で「使うべきでない」とされています。 ひとつは、パフォーマンスの問題。StyleSheetはほぼ全ての主要ブラウザでパラレルロードがサポ
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
CSS’ simplicity has always been one of its defining, most welcome features. CSS style sheets are just long lists of rules, each consisting of a selector and some styles to apply. But as our websites and applications get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity—so welcome as we first started to move away from font tags and table-based lay
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
Internet Explorer Testing Center をご覧いただきありがとうございます 開発者はもちろん、一般ユーザーや企業ユーザーにとっても、W3C と Ecma Internationalが取り組んでいるWeb技術の標準化はブラウザーの挙動を決めるという点でとても重要です。そして、この標準化を包括的に検証する仕組みは、透明性が高く、健全な標準化やしっかりした仕様書、マークアップの仕方によってレンダリングの差異が起こらないようなブラウザの相互運用性を推進する手助けとなります。 Webの作り手が検証の結果をチャプター別や仕様別に効率的に確認することができれば、彼らが本来取り組むべき、あるいは取り組みたいWeb エクスペリエンスの作り込みに集中できるはずです。そこで、マイクロソフトでは 99の新しいJavaScriptのテストケースを含む、138 のテストケースを新たに用意し、
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Shape Up Your Buttons with jQuery UI Dino Esposito | June 17, 2010 A graphical user interface wouldn’t be the same without buttons. On the Web, browsers offer a default rendering for push buttons and other types of buttons. By using CSS styles, you can m
つい最近まで第2回コーディングコンテストというのがCSSNiteの企画で行われていたのですが、なんとなーく面白そうなので参加してみた。 参加したといっても、出された課題（Webページを1ページコーディングする）をやって、それを期限までにメールで送るという簡単なモノなんです。 しかし、ダラダラ・ちまちまやっていたらいつの間にか期限が過ぎていました（まぁ締め切りの6時間前にデータをダウンロードしてるようじゃ当たり前だよなぁ）。なのでせめてブログで自分なりの答えを発表しようと思った次第です。 第2回コーディングコンテストの概要 まず開催目的。 「これから現場で困るだろうHTML5+CSS3の技術を先取りして実装してみることで問題点を洗い出し知識として共有する。この機会を利用してこれからのスタンダードを業界に示す。」 実はこれを読んで参加してみようかと思いました。HTML5とかCSS３って、もちろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
