[B! CSS][css] hpptmsのブックマーク

一気に教えるプログラマーのためのレスポンシブHTMLコーディング

レスポンシブデザインのHTMLコーディングに悪戦苦闘しているデザイナーは多いと思う。絵的な意味でのデザインと、あまりにかけ離れたロジカルな処理が必要だからだ。そこでプログラマーにお鉢が回ってくることがあるのだが、今一つCSSがわからず苦戦することが多いと思う。プログラマーだからこそ扱いやすいレスポンシブそんな状況に陥っても、あわてる必要はない。ほんの少しのコツをつかめば、レスポンシブデザインなんて恐れるに足りないのだ。まず正しくは【レスポンシブ】だよく「レスポンシブ ( responsive ) 」と「レスポンシブル (responsible) 」の混同を見かけるが、レスポンシブが正解だ。レスポンシブ ( responsive ) 形容詞　反応するレスポンシブル ( responsible ) 形容詞責任のあるレスポンシブル・デザインだと、だいぶ意味が違ってしまうようだか

hpptms 2017/01/25

リンク

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろを読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS

hpptms 2017/01/24

リンク

テキストの背景色を半透明にしつつ、文字色は不透明にするCSS - スタイルシートTipsふぁくとりー

《2017年6月25日 13:00 公開/更新》テキストの背景色を半透明にしつつ、文字色は不透明にするCSS [CSS3,テキスト,色] スタイルシートを使って対象の要素を半透明にしたい場合(透明度を指定したい場合)はopacityプロパティを使えば良いだけです。テキストでも画像でも半透明になります。しかし「対象の要素の全体」が半透明になってしまいます。そうではなく、「背景色は半透明にして背後を少しだけ透過させたいが、文字色は不透明にしてハッキリ見えるようにしたい」という場合もあるでしょう。その場合はRGBAカラーモデルでの色指定を使うと望みの配色が作れます。テキストの背景色を半透明にしつつ、文字色は不透明にしたい場合もある ▼背景色は半透明だが、文字色は不透明にした例 ▼背景色も文字色も合わせて半透明にした例背景色も文字色も合わせて半透明にしたければ、opacityプロパティ背景

hpptms 2017/01/18

リンク

Ultimate CSS Gradient Generator from ColorZilla

background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */

hpptms 2016/10/21

リンク

【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。

株式会社オンズ開発ブログ【CSS3】親要素の大きさに依存して画像の表示方法を変える［object-fit］プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説明だけでは理解しにくいと思うので、実際に「object-fit」を使ったサンプルをご覧ください。 object-fit：サンプル・デモ ※サンプルは、Safari、Google Chrome、Firefox等のモダンブラウザでご確認ください。親要素のボックスの表示領域に依存して、画像の大きさが変更されているのをご確認できると思います。このプロパティ［object-fit］で指定できる値は５つ。 object-fit: f

hpptms 2016/10/19

CSS3
css

リンク

HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA

日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約47%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方レスポンシブイメージとは一体何か？レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り

hpptms 2016/09/27

リンク

CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ

CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。フォントのサイズを変化縦と横の比率を維持したボタン縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さアイコンの幅と高さ、そして間隔もキャプション付き画像装飾された背景アイコン付き検索フォームチェックボックスで実装されたトグルブロックの一行の長さボタ

hpptms 2016/09/23

cssも難しくなってきてるとうか、使いこなせていないテクニックがどんどん出てきてる。引き出しを増やしたい。

css

リンク

「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選

多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。 https://speakerdeck.com/ixkaito/bian-tai-de-css-torituku ということで、「変態的CSSトリック」が流行っているようなので、JavaScriptや画像を使わない変態的なCSSテクニックを探してみました。何を持って変態的とするかは個人の性癖によるところが大きいので、あくまでも主観ですが。 CSS counterで数字を計算実はCSS 2からあるcounter系のプロパティ。順番に番号を振れる便利なプロパティですが、意外とマイナーな存在では？　次のデモは、リンクの数だけページネーション番号を自動的に付与するもの。うん、便利ですね。え、でもこれだとノーマルっぽい？　じゃあこちらでどうでしょう。

hpptms 2016/09/01

リンク

★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス

高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装その1 2. ネガティブマージンを使ってフッタを最下部に実装その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装その1

hpptms 2016/08/29

フッターを最下部に配置するテクニック。CSS難しい。

リンク

変態的 CSS トリック

多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。

hpptms 2016/08/29

リンク

CSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.net

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。たまに使うので自分用にメモします。 css3のtext-shadow等を使用したテキスト装飾のサンプルコードの備忘録です。工夫すればいろいろと作れるんでしょうけど、とりあえずよく使うものをピックアップします。自分用のコピペ用サンプルです。用途は限られますけど、iPhone用サイトなどでも使えるので覚えておいて損は無いかなと思います。テキストだけだと管理が楽でいいですよね。 CSS3 text-shadow sample いろいろ。フォントはGoogle font APIを使用しています。付けてるネーミングは無いと不自然だから付けた的なものですので気にしないで下さい。 Default

hpptms 2016/08/13

使わせて頂きました。画像無しでもここまで出来るんですね

リンク

CSSで要素を横並びにする方法まとめ | HALAWATA.NET

CSSで要素を横並びにする方法をまとめてみました。それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;

hpptms 2016/08/13

リンク

CSS3のセレクタ全42種まとめておさらい使い方リファレンス | WP-E (仮)

こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときにあれ？コレなんだったっけ？というセリフを何度心のなかでつぶやいたか分かりません。また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。なお、仕様書の日本語訳は以下のページをご参照ください http:/

hpptms 2016/06/23

css

リンク

http://www.ituore.com/entry/html-css-basic

hpptms 2016/05/23

記事を読んでて9割型扱えるので、結構覚えてるもんだなーと思ったけど、floatとpositionがごっちゃになってたので目からウロコでした。

HTML
css

リンク

CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル