折り返し位置を word-break: keep-all で制御する - Qiitaモダンブラウザでは一通り使える…はず。 サンプル https://jsfiddle.net/1eczq4r9/8/ キャッチコピーをいい感じに折り返す 例えばここにMackerelのキャッチコピーがあります。
CSS3による線形グラデーション | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website
線形グラデーションについて グラデーションはbackgroundまたはbackground-imageプロパティにlinear-gradient関数を設定します。 開始位置と終了位置は省略することができ、省略した場合、開始位置は0、終了位置は100%が初期値として設定されます。 なお、旧Webkit仕様では、from関数は開始位置を0、to関数は終了位置を1という仕様になっています。 開始と終了位置を指定したい場合はcolor-stop関数を使用します。 構文 位置の省略 background:linear-gradient(方向または角度, 開始位置, 終了位置); 旧Webkit仕様： background:-webkit-gradient(linear, 開始方向, 終了方向, from(開始色), to(終了色)); 位置の指定あり background:linear-gradie
コピペで使えるCSS３の角丸・ボックスシャドーまとめ | リンクラボBLOG
ブログのデザインをリニューアルしました☆ カスタマイズする際に、勉強がてらCSS3をいろいろ試してみました。 画像のサムネイルの角が全部丸っこくなっているのも、CSS3で「border-radius」を書いただけ。 デザインソフトを使わなくても、CSSだけでここまで表現できるって、すばらしい！ 数値や色だけ変えれば使いまわしできるので、まとめてみました。 角丸 img{ -webkit-border-radius: 5px; /* Safari, Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ border-radius: 5px; /* CSS3 */ } 丸 ※border-radiusの数値を50％にするだけ！ img{ -webkit-border-radius: 50％; /* Safari, Chrome用 *
画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS
画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS CSS2011年8月15日 画像をCSSで右や左に寄せ、テキストは画像の隣にレイアウトする、といった見栄えは大抵のサイトで発生しうるパーツです。基本的には画像とテキストの幅をそれぞれCSSで指定するのが一般的なコーディングです。 しかし、大規模サイトなどにおいては、画像を寄せるとはいっても、そのカテゴリやページ毎に画像の横サイズは可変するでしょう。その都度その画像のサイズに合わせたCSSを用意するのはコードが肥大化する原因にもなりますし、HTML側に記述も煩雑になります。そこで、本記事ではどんな横サイズの可変にも対応した画像／テキストのレイアウトを実現するCSSを紹介いたします。 実際のサンプルはこちら HTML <p class="module-title">画像左レイアウト（回り込みあり）</p> <div class=
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
display:inlineで横並びにした際に出来る余白を消す方法 | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
【IE6バグ集】<ul> <li>の折り返し位置が違う！ | 夢
html <ul> <li>本当は </li> <li>ulの中で </li> <li>後に続くliたちがfloatによって </li> <li>右側に回りこんでいって </li> <li>ulまたはそれ以前に指定した </li> <li>widthの幅に従ってliがul内で </li> <li>折り返されるというものです。 </li> </ul> css ul { width:600px; } li { display:block; float:left; list-style-type:disc; padding-left:10px; } 見え方は以下。 FireFox・Safari・Chrome・IE8は理想の見え方になるのですが、IE6・7に関してはliの文字数がwidthに対してオーバーしてしまうと折り返しの位置がul内の幅で折り返されず、liだけの範囲で折り返されてしまい、結果
WordPressサイト高速化でSEO対策！17の表示速度アップ術
ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとGoogleにも評価されなくなるので実質SEO対策にもなります。今回はWordPressに特化した高速化についてまとめてみました。 ひとことで表示の高速化と言っても、キャッシュ系プラグインを利用する方法から、使用する画像を圧縮したり、スタイルシートやJavaScriptの効率的な書き方など手法は様々です。 ゆめぴょんです。こんちはっ(^^)/ このブログも表示速度の高速化をいろいろ試みて1秒台とGTmetrixのAA判定を達成しました。しかしその後のテーマ編集や新たなプラグイン導入により今はBBまで低下しています。特にツイート数表示が低速化の原因です。さらなる改善中です。
font-sizeのパーセント表記一覧 - Webtech Walker
font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。 注意点 これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。 Windows IE6 IE7 Firefox2.0.0.14 Opera9.27 safari3.1 Netscape7.01 Mac Firefox2.0.0.14 Opera9.27 Safari3.1.1 Safari2.0.4 IE5.2 計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://remotestance.com/blog/1397/
jQuery「Supersized」でフルスクリーンのスライドショーを簡単設置
ゼロから始めるレスポンシブWebデザイン入門