Bootstrap 4 をカスタマイズする - Qiita
概要 Bootstrap 4 のソースコードをいじらずに、変数を変更してカスタマイズする方法のメモ。 Bootstrap 4を使うならSassを使って3倍幸せになろう で説明されているように、スタイルの上書きでカスタマイズするのは保守性がよろしくないので、Bootstrap4の変数を変更することで気持ちよくカスタマイズする。 また、Bootstrapのソースコードを変更すると、Bootstrapパッケージをアップデートすると変更が消えてしまうので、変更内容は分離する。 とは言え、特に難しいことをするわけではなく、これこそが公式ドキュメントで説明されている方法でもある。 下ごしらえ まず、自分のSCSSファイルを作成する。名前は何でもいいが、ここではcustom.scssとする。 中身は、Bootstarpのscssファイルへのパスを指定した@importだけ。 npmで入れた場合は ../
Bootstrap3で5等分のレイアウトを作成する - Qiita
Bootstrapは偶数での分割をする場合には使い勝手はいいのですが、奇数での分割をする場合はなかなかやりづらい部分があります。 特にwebサイトのコンテンツには5等分のレイアウトで作成されているもの（メニューとか）がよく出てくるので、使用頻度もそれなりかと思います。 私が5等分するにあたって、主に2通りの作成方法を採っています。 1. col-xx-offset-(n)を使用する 以下の方法です <div class="row"> <div class="col-md-2 col-md-offset-1"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> <div class="col-md-2"></div> </div> offsetを使用して左側
「Reboot.css」の特徴と使い方を解説
Bootstrapは既に多くの人が知っていると思います。 では、Bootstrapで採用されているCSSのリセットは知っていますか？ Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboot.css 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Reboot.cssとは Reboot.cssの使い方 「box-sizing: border-box;」がどのように定義されているか remを使用したサイズとスペースの指定 ネイティブのフォントファミリー margin-topは死んでいる 共通要素はクリーンなスタイル タッチ
WebデザイナーがBootstrapを使ってコーディングをしてみた｜クリエイターズメモ
こんにちは。Webデザイナーのふくだです。 Web制作をする人にはお馴染みのフレームワークBootstrap。 本来デザインが苦手なエンジニア向けのサービスですが、仕事で使う機会があったのでデザイナー目線から感想を述べたいと思います。 ■良い点すでにパーツが用意されている タブやアコーディオン、モーダルなど実装するのが面倒なパーツが揃っています。 >各パーツ グリッドシステム classの使い方を覚えれば思い通りのカラムを作れます。 >グリッドシステム 微調整も簡単 こちらもclassを覚えれば細かい調整が手軽に行なえます。 >微調整のclass レスポンシブに対応 基本対応しているのであまり深く考える必要はありません。 ■悪い点独自のclassを覚えるのが面倒 覚えれば便利ですが、それまでがちょっと面倒かも。 CSSの上書き オリジナルデザインを反映させるにはベースのcssとは別にcss
今更じゃない、Bootstrap！デザイナーの視点で、美味しい活用方法を紹介します | A.C.O. ブログ
今更じゃない、Bootstrap！デザイナーの美味しい活用方法 こんにちは。デザイナーの益田です。早いもので、2019年になってからそろそろ1ヶ月。今年の冬は、例年より暖かいですね。 皆さんは普段デザインするとき、CSSフレームワークを活用していますか。CSSフレームワークとは、Web制作におけるレイアウトやパーツのCSS・Javascriptがまとめられたライブラリのことで、制作の手間を省くことができます。HTMLを人参やじゃがいもなど”カレーの具”とするなら、CSSフレームワークはいわば”カレーのルー”のようなものです。どちらかというとエンジニアの方が馴染みがあるかもしれませんが、実はデザイナーにとっても便利なツールです。 今回は、数あるCSSフレームワークの中でも代表的なBootstrapについて、デザイナー視点での活用方法を、実際の例を交えながら紹介したいと思います。 CHAPTE
Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】| TechAcademyマガジン
Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】 HTML/CSSといったWebデザインの知識がない人でもわかる【Bootstrap】の使い方。Bootstrapのダウンロード方法、サンプルコードがあってすぐに実践可能。グリッドシステムやテーブルなどの使い方あり。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なB
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
