initialとautoでmin-width,max-width(height)をリセット – webdev
スタイルシートの、最大の幅や高さ、最小の幅や高さを指定する max-width、max-height、min-width、min-height をリセットするときは initialとautoを併用します。 アスペクト比（縦横比）を維持したまま200×200の枠内に収まるよう画像を縮小する設定と それをリセットするスタイルのサンプルです。 .thumbnail img { max-width: 200px; max-height: 200px; width: auto; height: auto; } .free .thumbnail img { max-width: initial; max-width: auto; max-height: initial; max-height: auto; } initialはスタイル適用前の状態へ設定するための値で、CSS3世代の比較的新しいものです
CSS3のborder-imageで、しましまの目立つ枠線を作る [ホームページ作成] All About
CSS3では、枠線の描画に画像を使う「border-image」プロパティが追加されました。枠線は、従来からCSSの「border」プロパティを使って引けましたが、線種は「実線・破線・点線・二重線」の4種類しかありませんでした。 この「border-image」プロパティを使えば、枠線を任意の画像で構成できるため、右図のように、目立つ「しましま」(ストライプ)柄の枠線など、様々な枠線が実現できます。 CSS3のborder-imageプロパティを使えば、枠線に自由な画像が使える 例えば、下図のように「しましま柄の画像」を用意しておけば、それを枠線に指定することで、「しましま柄の枠線」を作ることができます。
![CSS3のborder-imageで、しましまの目立つ枠線を作る [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/d59c9acbd3259c34d17ea32c3d92a212f41149b1/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F4%2F1%2F0%2F2%2F5%2Ftopimg_large.png)
CSS3のtransformを使ったフォントの変形
CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文に使うのは無理があるが、見出しなどには良さそう。特に@font-faceで気軽に変更できない(してもあまり効果的ではない)日本語の見出しには面白い試みなんじゃないかと思ったが、一番綺麗にしたいIE8で残念なので微妙。 Verdana Narrow? Demo: Verdana Narrow 単純に細くしたいブロックでtransform: scaleX(num);を使えば良い。 .narrow { -webkit-transform: scaleX(0.8); -moz-transform: sca
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
Blueprint: Vertical Timeline
Ricebean black-eyed pea Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea sprouts wattle seed rutabaga okra yarrow cress avocado grape radish bush tomato ricebean black-eyed pea maize eggplant. Cabbage lentil cucumber chickpea sorrel gram garbanzo plantain lotus root bok choy squash cress potato summer purslane salsify fennel horseradish dulse. Winter
IE9とIE10のCSS対応の違いまとめ | q-Az
2016年1月12日にいよいよ InternetExplorer8 を含むの各 OS での最新ブラウザ以外の公式フォローが終了します。 「IE9も終了だよ！」という間違った情報を聞いたりもしますが、IE9 に関しては Windows Vista（2017年4月まで利用可）で使える最新ブラウザとなるため InternetExplorer9 のフォローが終了するわけではありません。Vista は InternetExplorer10 以降のインストールが出来ません。 参考：Internet Explorer サポートポリシー変更の重要なお知らせ 参考：VistaへのIE10のインストールはできるのですか？ ただ、IE9 をフォローすべきかどうかという問題はまた別の問題になります。現状 Vista 利用者はほぼおらず、よって IE9 利用者もほぼいないわけです。 しかし、公式がまだフォローしてい
Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説 -How Flexbox works
Flexboxの基本原則は、CSSでのレイアウトを柔軟かつ直観的にすることです。 Flexboxでどのようにレイアウトをつくるのか、Flexboxで最もよく使う5つのプロパティがどのように機能するのかをアニメーションで紹介します。 How Flexbox works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの基本「display: flex;」 flexコンテナの主軸の方向「flex-direction」 flexコンテナの主軸に沿って配置「justify-content」 flexコンテナの交差軸に沿って配置「align-items」 flexアイテムの整列「align-self」 最後に Flexboxの基本「display: flex;」 まずは、div要素を配置した例を見てください。 「displa
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較 - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？ 従来知られているfloatプロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？ 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ（※1）、Bootstrap 4の新たなレイアウト方法として採用される（※2）等、次世代の標準となっていくであろう技術です。 ※1
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
はじめてのCSS INDEX
CSSのセレクター（Selectors）の種類と使い方 【65】CSSのセレクターを整理しよう（セレクター 一覧） 【65-1】エレメンタルセレクター（要素名で指定するセレクター） （ちょっとメモ）「,」で区切る「セレクターリスト」 【65-2】結合子を使うセレクター（E F, E > F, E + F, E ~ F） 【65-3】属性セレクター [att] [att="val"] [att~="val"] [att|="en"] 【65-3】属性セレクター [att^="val"] [att$="val"] [att*="val"] 【65-3】属性セレクター [att="val" i] [att="val" s] 【65-3】クラスセレクター（.）と IDセレクター（#） （ちょっとメモ）名前空間（ネームスペース）とCSSセレクター 【66】擬似クラスと疑似要素（2つの違いとそれぞれの
初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 - paiza times
Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ
背景画像等をレスポンシブデザインでも縦横比をぴったり固定する方法 | スターフィールド株式会社
レスポンシブデザインでリピートしないタイプの背景画像があると悩んでいました。 デバイスによって、横幅が違うため、自ずと要素の横幅が変わる中でどのように背景画像を指定すればいいのだろうか・・・と。 「その要素は横幅が固定です。」となればいいのですが、そういうわけにもいかないと思います。 これは背景画像だけでなく、iframeや動画の埋め込みなんかもこのようなことが起きるかと思います。 この問題を解決する方法を少し前に発見したので記載したいと思います。 ちなみに今までの対処法としては、ブレークポイントに合わせて都度高さの設定を行っていました。 そのブレイクポイントの解像度のデバイスならいいんですが、それ以外だと崩れて見えてしまっていました。 新しい方法の説明する前に、DEMOをご覧ください。 わかりづらいかもしれませんが、今までの方法と新しい方法を２つを載せています。 ブラウザを縮めてみると２
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Animate It!
CSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.net
CSSの参考になるアイデアが満載！2016年スタイルシートを使ったテクニックのまとめ
Boots & Bones