脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
bootswatchのインストール手順 - Qiita
私的メモ 今度もう少しわかりやすいように書き直す予定 実行環境 cloud9 rubyRails 4.2.5 ruby 2.3.0p0 bootswatchのインストールの流れ やる内容によって作業ルートが変わります。 既存のapplication.htmlerbを使って1から作り上げていく用 1→2→3-1→4-1→5 予めテーマで用意されたレイアウトをドンっと使う場合 1→2→3-2→4-2→5 1. Gemへの追記 Gemfileに必要なものを追記する。 #bootswatch用 gem 'twitter-bootswatch-rails', :github => 'scottvrosenthal/twitter-bootswatch-rails' gem 'therubyracer' gem 'execjs' からの bundle install Important:You may
CSSにおけるコンポーネント設計 - Qiita
前提 cssを書いていくうえで、昨今コンポーネントの重要性が言われているので、コンポーネントについてまとめてみました。 コンポーネントとは コンポーネントについてまとめるうえで、深掘りすると非常に深く難しい概念なので、ここではcssを書いていく上で最低限知っておくべき範囲でコンポーネントについてまとめます。 関心の分離 コンポーネントには、前提として「関心の分離」という概念があります。例えば、railsにおいてMVCがあるように、htmlではマークアップ構造、cssではスタイリング構造など、特定の役割・機能・振る舞いなどを厳密にわけることを指します。 カプセル化 そして、分離という機能を実現するうえで、「カプセル化」の概念も重要となってきます。カプセル化とは、外部からの影響を許可したもののみに限定し、また内部の変更等による影響を外部に与えないものとでもいっておきましょう。これをcssで当て
良いCSSとは - Qiita
CSSはスタイルシート言語です。 プログラミング言語のように記述的(imperative)ではなく、宣言的(declarativ）な言語です。 では良いCSSとはどのようなものでしょうか ？ それはプログラミング言語で良いコード、クリーンコードと言われるものと同じではないかと思います。 クリーンコードは、単純で直接的です。 クリーンコードは、うまく書かれた散文のようにも読めます。 -グラディ・ブーチ CSSはセレクタの命名とその記述方法によってのみ制御されるものです。 その制御はクリーンコードのように「うまく書かれた散文」を目指すべきです。 CSSの原則と設計 CSSはHTMLの見た目を制御する宣言が書かれた文書です。 そしてその設計にはHTMLも含まれるべきです。 CSSの仕組みは単純です。 要素を選択し、定義されたスタイル宣言を適応して見た目を変える。 原則も１つしかありません。CSS
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
CSSで要素を横に並べる主な3つのやり方（ブラウザ対応表のおまけつき） - Qiita
はじめに 本記事では ul > li でリスト要素を作ったときによしなに横に並べてもらう方法について見ていきます。 できるもの 見た目的にはこんな感じ。 タイトルではこんな風にいってますが、実は６つのやり方があります。 この記事ではその中でも私がよく見てきたやり方に絞ってご紹介します。 基本のhtml 基本となるhtmlのソースは以下のindex.htmlです。これをCSSで飾っていきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>ぐろーばるめにぅ〜</title> </head> <body> <h3></h3> <ul class = "foo"> <li><a href="#">HOME</a></li>
CSSで中央寄せ。全体、あるいはコンテンツだけ中央寄せする2つの方法。 - Qiita
これをすると、bodyの横幅が指定されて、そこが中央にくるように左右の幅を均一に保ちながら中央寄せをしてくれます。 全体を中央寄せする方法 全体を中央寄せする時は、bodyに指定します。 完成図 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="keywords"content="html,css,javascript"/> <script type="text/javascr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
