table タグの cellspacing 等を CSS のみで指定する
プロパティの解説 border-collapse がボーダーの隙間を作るかどうかのプロパティで、値に collapse を指定することで隙間が無くなります。 これが table タグの cellspacing="0" に相当します。 border-collapse - CSS: カスケーディングスタイルシート | MDN また、例えば 2ピクセルの隙間を作りたい場合は、下記のように指定します。 border-collapse プロパティに separate を指定することで隙間が出来るようになり、border-spacing プロパティでその隙間の幅を指定します。 border-spacing: 2px 1px; 等とすることで、上下左右別に幅を指定することも可能です。 border-spacing - CSS: カスケーディングスタイルシート | MDN その他、table タグの bo
box-sizing－CSS3リファレンス
box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。 値にcontent-boxを指定すると、 widthとheightで指定する幅と高さが内容領域に対して適用されます。 幅と高さにはパディングとボーダーは含まれません。 これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。 値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。 内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、 パディングとボーダーの分だけボックスサイズが小さくなります。 DOCTYPEスイッチの互換モードのような表示になります。 ■値 content-box パディングとボーダーを幅と高さに含めない（初期値） border-box パディングとボーダーを
CSSレイアウトを学ぶ
position さらに複雑なレイアウトをつくるには、position プロパティについて理解する必要がある。取り得る値はたくさんある。名前には意味がないので、覚えるのはなかなか難しい。１つずつ見ていこう。だけど、このページをブックマークしておくのが無難かもしれない。 static .static { position: static; } <div class="static"> static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる。 </div> relative .relative1 { position: relative; } .relative2 { position: relative; top: -2
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
:nth-child()疑似クラス (E:nth-child(n))｜セレクタ｜CSS HappyLife ZERO
CSS3で定義された:nth-child()疑似クラスは、ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。 尚、n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントしてn番目にスタイルが適用されます。 この疑似クラスは、偶数と奇数で指定を変えしましまにするとか、何番目だけ指定を変えるといった事ができます。 対応ブラウザ :nth-child()疑似クラスのサンプル ol li:nth-child(2n) { color: green; } ol li:nth-child(5) { color: purple; font-weight: bold; } <ol> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト
clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！
clearfixが登場してから早10年が過ぎ、お世話になった人もたくさんいると思います。 そんなclearfixさんの必要性がなくなる新しいCSSのプロパティが、2017年1月25日にW3Cのワーキングドラフトで定義されました。まだ一部のブラウザにしか対応していませんが、たった一つの指定でフロートを簡単にクリアできます。
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
2017年、CSSでこれをやりたかったが実現できる新しい3つのテクニック
CSSには数多くの新しい機能が準備されています。その中でも2017年の今年に学んで、身につけておきたい3つのテクニックを紹介します。 3つはすべて有用で、Webサイトやアプリを作成する際に必ず役立つと思います。 3 New CSS Features to Learn in 2017 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 @supportsを使った条件付きCSS Float, Flexboxの後継者「CSS Grid Layout」 プロパティを変数で指定 すべてのブラウザにサポートされていない場合 @supportsを使った条件付きCSS @supportsを使用したCSS Feature Queries（W3C）は、特定のCSSのスタイルを指定したユーザーエージェントに対してのみ適用することができる条件付きのCSSを
CSS 設計の長い夢 - ペパボのフロントエンドスタンダード
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！ * prasm（プラズム）
ほんと、便利なんですよ。 ぶっちゃけCSS3って最高やな！と思うんですが、ある意味それ以上に疑似クラスって奴を理解して使えるようになると、今までイライラしてたこととか、やりたかったコトとかが可能になるんですよね。 次回のブロネクがブログの見た目デザインについてなので、それに引っかけて、疑似クラス・疑似要素を理解しちゃうと、かなり捗るし、いろいろ表現が増えますので、ちこっと紹介したいと思います。 とにかく、疑似クラス・疑似要素ってなんだろうか？？CSSまったくわからん！という方にはさっぱり難しいかも知れませんが。個人的に一番有名な疑似クラスは リンクタグのaa:hover a:visited この:hoverや:visitedの部分が疑似クラスです。 aタグ（アンカー要素）はリンクの色や見た目を修飾するためのモノですが、リンクの中でもホバー状態のとき、訪問済みリンクの時と、同じaタグでも条件
Sassに慣れてきたら、mixin集「Bourbon」を使ってみよう！ ｜ Tips Note by TAM
みなさん、楽しいSassライフを送っていますか？ 「とりあえず.cssを.scssに変えて、ネストにしたりして使ってるよ！」という方、そろそろmixinを取り入れてみませんか？ Sassってなんでしょ？という方は、以前「Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！」という記事を書いたので、ぜひそちらをお読み下さい。 Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！ mixinとは？ スタイルを定義するのは通常のCSSと同じですが、使い回しを前提とした、JSで言うところの関数のようなものを作れるのがmixinです。 言葉だけではよくわかりませんね。mixinはこういう書き方をします。 hoge.scss の中身 /* @mixinで始まって半角スペース＋半角英数。.（ドット）や#（シャープ）はつけない */ @mixin myborder { border-bot
Sassで@mixinを作る時に知っておきたい基礎知識 - Qiita
はじめに Sassの@mixinはメンテナブルなCSS設計にも役立つ強力な機能です。 一方でゆるくも書けてしまうため、気をつけないと不格好なCSSが簡単に出力されてしまいます。 そこで@mixinを自作するにあたって、知っておきたい（おきたかった）基本知識をまとめました。何かの参考にでもなれば幸いです。 前提条件 ソースコードは.scss形式で記述しています Sass 3.4.4で動作を確認しています 使用しているModifierという単語は以下の通りです BEMと呼ばれる命名規則で使われる、基本的なスタイル（セレクタ・class）に追加する形で装飾を調整するclassのこと 目次 @mixinのおさらい 基本的な使い方 @contentの使い方 Modifierに無駄なスタイルを適用させたくない... @contentを使ってみる 制御用の引数を用意してみる 引数に配列（リスト）を使って
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
CSS3アニメーションをらく～に実装！オンラインツール7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近の流行は「トシムリン」です。あぁ次こそ生で見たい・・・。 CSS3でアニメーションを作成するとコードが肥大化して複雑になるため、ライブラリやオンラインツールを使用して作成している方も多いと思います。 簡単なアニメーションで言えば、「transition」でボタンのマウスオーバーに背景色をアニメーションさせたり、画像をフェードさせたり拡大・縮小させたり・・・などなど。 「animation」を使えばさらにできることが広がるのですが、まだまだwebkitブラウザ以外では正常に動作しないのが難点です。 今回は、CSS3アニメーションを一瞬で設定できちゃうオンラインツールをまとめて紹介します。もう知っている人もたくさんいるとは思いますが、まだ使ったことのない方はぜひ一度試してみてください。 CSS3アニメーションを実装！オンラインツール7選 Animate
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.mismithportfolio.com/web/20150212css_caption
Webサイト制作におけるフロントエンドの必須スキル＆開発環境はこれで決まり！ - North-Geek
html5-memo.com
