box-shadow を使って複数の border を付ける方法 - Qiita
CSS を使って 1 つの要素に複数の border を付ける上手い方法 1 はないものかと調べていたところ CSSで複数のボーダーを付ける方法 | Ri-mode Rainbow | No:1134 という素晴らしい記事を見つけたので実際に試してみました。 こんな感じの枠が作れます。(HTML 内の記述は div 1 つだけです) このテクニックは CSS3 で導入された box-shadow プロパティを使って擬似的に border を実現するというものです。box-shadow には複数の値を指定できるという仕様を応用します。 確認したブラウザは Google Chrome (42.0), Firefox (35.0), Opera (27.0), IE 9 ～ IE 11 です。 box-shadow で枠を付ける方法 以下のように box-shadow : 0 0 0 <幅> <
極めろ！！Google Chrome Devtools 52の関節技 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づ
知っておくと便利！CSSの小技・テクニックのまとめ -CSS Protips | コリス
:before, :after, :last-child, :nth-child, :not など疑似classを使った小技、レスポンシブ用のレイアウトやフォントのサイズ指定など、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 前回紹介した時は12個でしたが、アップデートされ、20個まで増えています。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区切りにする 5. ネガティブな「:nth-child」を使用してアイテムを選択 6. SVGファイ
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい ｜ Tips Note by TAM
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点
例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。 否定疑似クラス「:not」の便利な使い方と使う時の注意点（特に優先順位）を紹介します。 On :not and Specificity 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「:not」の便利な使い方 CSSセレクタの優先順位 101 「:not」を含む優先順位 「:not」を使う時の注意点 まずは、「:not」の各ブラウザのサポート状況。 2016年現在、どの環境でも特に問題なく、利用できると思います。 :not などセレクタの各ブラウザのサポート状況 「:not」の便利な使い方 否定疑似クラス「:not」は使い
![[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7854364c5c81764331231720a32437f4c3a3926/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016032501.png)
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
floatで並べたリストを中央揃えする - CSSデザインノート
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
Towards A Retina Web — Smashing Magazine
Reda Lemeden covers some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities, and invites Web designers and developers to offer a pleasurable viewing user experience regardless of the display they are using. With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the pr
display:inline-block; を使う | css | understandard.net
要素の横並びに float:left; ではなく display:inline-block; を使うためのメモ。 元ネタは、CSS display: inline-block: why it rocks, and why it sucks ※ 2011年4月12日追記: 暫定版ですが、新しい方法を書きました。display: inline-block を使う（修正版） float:left; で横並びにしようとしたとき、各要素の高さが違うと このようになってしまいます。 カッコ悪いですよね…。というよりデザイン通りになっていません。 display:inline-block; を使うと、 このようになります。素晴らしい！エクセレント！ display:inline-block; には、text-align および vertical-align が指定できるので、今まで面倒だったレイアウトが
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
自分的HTMLテンプレートの組み方 | Takazudo Clipping*
自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus
| こくみこのダメブロで…ざす！
MdN Design｜総合情報サイト
DN*BLOG » Blog Archive » text-indentを使わない画像置換テクニック
5509.me