CSS GridがBootstrapよりレイアウト作成に向いている理由（翻訳）
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Why CSS Grid is better than Bootstrap for creating layouts 原文公開日: 2017/12/03 著者: Per Harald Borgen CSS GridはWebレイアウト作成の新しい手法です。ブラウザでネイティブに動作するまともなレイアウトシステムが登場したのはこれが初めてです。 CSS Gridのメリットは、かの有名なBootstrapと比較することでいっそう際立ちます。以前ならJavaScriptを導入しなければ到底不可能だったレイアウトを作れるようになっただけではなく、コードのわかりやすさやメンテのしやすさも向上します。 本記事でその理由を解説します。 筆者は現在無料のCSS Grid上級編講座の準備も進めており、12月中に立ち上げを予定しています。 今のうちに講
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
Webデザインシステムはじめの一歩
CSS フレームワーク活用のタイミング Bootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザ
Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | Recruit Tech Blog
前置き - CSS 設計が難しい件について 誤解を恐れずに言うならば、CSS は変数も関数も条件分岐もない、ある種ゆるふわな言語（仕様）といえます。そのためプログラミング言語のように記述ミス一つで全ての挙動が止まるなんてことはありませんし、いくら冗長に記述しようがブラウザ上での挙動に差異が生まれることも殆どありません。ちょっと嗜めばそれっぽいものが作れてしまうので、マークアップエンジニアのいない小規模体制の組織であれば、サーバーサイドエンジニアやデザイナーが片手間で習得して実装してしまうというのも珍しいことではないでしょう。それでも良かったのかもしれません。これまでは…。 片手間で学習した知識というのはなかなか体系化されないものです。CSS も御多分に漏れずプログラミングのテクノロジーは日進月歩なため、その時は最新だった技術が僅か一年も経たないうちに廃れてしまい、バッドノウハウ化してしまう
[CSS]スクリプトに依存せずに、「:checked」でできるテクニックをBootstrapに組み込むプラグイン -Bootleg.css
タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。 Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学ぶのにも役立ちます。 Bootleg.css 仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック状態でコンテンツを表示・非表示します。 デモと共に、「:checked」擬似要素の使い方を紹介します。 モーダル ボタンをラジオボタンにし、そのチェック状態でモーダルを表示・非表示します。 HTML <-- Button to trigger modal --> <label for="modal1" role="button" class="btn">Launch demo modal</lab
BootstrapのCSSを簡単にいい感じにカスタマイズできる厳選サービス２＋１つ紹介 | DevelopersIO
Bootstrapいいよね Bootstrapです。大人気の見た目系フレームワークですね。いろんなサイトで見かけます。 自分もそうなのですが、エンジニアでコードは書くけどデザインの事はよく知らない。だけど「使いやすくて、いい感じにしたい」という欲求を満たしてくれてます。ただ、デフォルトは見やすいんだけど、ちょっとカスタマイズしたいなとか、色指定があった場合など困りますね。例えばありそうなのが「コンテンツ管理画面を作りたい、デザインは特にこだわらない、けど使いやすいのがいいな。」とかさらに「イメージカラーが青だからそれベースで」とか。 そんなあなたにぴったりな厳選ツールを紹介しちゃいまっくすぅ〜！ Lavish 〜 画像から配色を生成してくれます 〜 このサービスは画像を解析してBootstrapの配色を捻り出します。 何処かの企業向けに作る場合に企業のロゴなどから配色してみるといい感じにな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Twitter Bootstrap のCSSをコンテンツ部分のみに適用できるWordPressプラグインつくったー！ | Firegoby