CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「calc()」とは値を計算式で指定できる 「calc()」を使う理由 「calc()」の使い方 「calc()」を使うと便利になる実装テクニック 「calc()」とは値を計算式で指定できる CSS3の「calc()」は、プロパティの値を計算式で
css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社
css3で登場したflexboxですが、そろそろ使える頃合いがくるんじゃなかろうかということでflexboxを使ったら簡単だったなぁと思うレイアウトを実際に試してみました。 flexboxについてのそもそも解説はいろんなブログにあるので、ここでは割愛させて頂きます。 どんなものか理解するためのサイトとしては以下をお薦めします。 Visual Guide to CSS3 Flexbox: Flexbox Playground | 簡単にいうと、cssの新しいレイアウト方法になります。これまでの方法と比べると、グッと簡単に様々なレイアウトができるようになります。 DEMOを作りましたのでそちらをご覧ください。 DEMO flexboxのサンプル ツーカラム よくあるツーカラムのコンテンツですね。 今までだとfloatを使って…という感じでしたが、 flexboxを使うとこんな感じになります。
word-breakとword-wrapはややこしい
Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。 折り返しを制御する2つのCSSプロパティ 幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいので
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | Recruit Tech Blog
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要
![[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1756c6abf56af6fcc3bd951dc8836bd403779c8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060501.png)
CSS Flexbox Layout Guide | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart. Brought to you by DigitalOcean DigitalOcean has the cloud computing services you need to su
CSS3の「rem」でフォントサイズ指定 ｜ Tips Note by TAM
フォントサイズを指定するとき、「em」、「%」、「px」を使って指定することが多いと思いますが、 CSS3から利用可能になった「rem」という新しい単位について、指定方法など調べてみました。 「rem」とは、「root」+「em」という意味で、 root要素（html要素）に対して相対的にフォントサイズが指定できます。 「em」や「%」などの従来の相対指定と違って、親要素を継承しないという特徴があり、 入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりすることもありません。 常にroot要素に対して「何倍」という使い方ができるので、指定の仕方が非常にわかりやすく、便利です。 下記のように、htmlに「font-size: 62.5%；」を指定しておくと、「10px = 1rem」となるので、 px単位で計算ができます。 html { font-size: 62
iPhoneサイト向けCSSサンプル（CSS3）｜ConneLog｜ConneCre
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> * { word-break: break-all; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(255,255,0,0.4); -webkit-text-size-adjust:none; } word-break: break-all; URLなどの文字列の強制改行。ただし句読点なども先頭にくるため要検討。 -webkit-touch-callout:none; 長押しした際のとび先URL非表示。ただし画像リンクをタップした際のハイライトがおかしくなる。aタグ要素にdisplay: block ;を指定す
Opera News
Opera requests that the EU General Court secure the DMA’s promise of free browser choice... July 12th, 2024 Opera is appealing the EU Commission’s decision not to designate Microsoft Edge as a gatekeeper, and requesting to keep freedom... AI, Gaming, Opera GX Aria gets Buffed in Opera GX July 1st, 2024 Aria gets buffed in Opera GX. New features are being added to improve Aria's capabilities. Deskt
PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」:phpspot開発日誌
CSS3Ps PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3でちょっと凝ったオブジェクトを作りたい場合に、Photoshopがそのまま使えてCSS3にコンバートしてくれます。 CSS3で描画した驚きのグラフィックス、というのも、こうしたツールを活用すると驚きのCSS3グラフィックスでもなんでもなくなるのかも。 シェイプをデザインします グラデーションなんかもつけつつ プラグインのボタンをクリックで出力。そのまんま。 画像じゃないから軽いという点もポイントですね 関連エントリ CSS3でシャレオツなリストを作るチュートリアル アニメーションするバナーをCSS3で作るチュートリアル CSS3で出来たクールなLightBox実装チュートリアル CSS3で描かれたシェイプのサンプル集
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
フロントエンドがやっておかなきゃいけない、iPhone(スマホ)向けサイトを軽量化･高速化するための必須項目をメモ。 | Mnemoniqs Web Designer Blog
Webサイトの待ち時間の80％はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
Twitter Bootstrap に学ぶ、モダンなデザインのための CSS3 要素 4 選 - Cube Lilac
Twitter Bootstrap のデザインが、全体的にはシンプルなのにも関わらずそれなりに好印象な見た目なのは、「ボタン類のデザインを作りこんでいるから」と言う事が理由のように思います。 OK キャンセル「CSS3 でユーザがすぐに恩恵を感じる要素は、border-radius, box-shadow, text-shadow の 3 つである」のような話をしばしば聞くのですが、Twitter Bootstrap においてもこれらの 3 要素にグラデーションを加えた 4 つの CSS3 の要素を駆使しているようです。上記のボタンの CSS 定義は以下のようになっています。 .btn { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding: 4px 10px 4px;
[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック
デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.net
stroll.js - CSS3 Scroll Effects