text-indent -9999pxを使わないでテキストを画像に置換する
imgではなく背景画像として画像を表示したい場面がたまにあるので、text-indent:-9999px;を使わないでテキストを画像に置換する方法をメモしておきます。 サンプルコード まずはtext-indent:-9999px;で実装した場合です。 HTML <div class="sample">テキストテキスト</div> CSS .sample { width: 300px; height: 50px; /* テキストを画像に置換する */ text-indent: -9999px; background: url(./image.png); } text-indent -9999pxでテキストを画像に置換するデモページ こちらでも想定した表示にはできていますが、SEO的にあまりよくなかったり、パフォーマンス的にもよくはありません。 次にtext-indent:-9999px;を使
box-shadow 使う時、影を出す方向を一方向に抑える - CHROMA
One direction Shadow | jsdoit box-shadow を使って下方向だけ影を出す指定をしても、左右にもちょっと出てしまうことになる。 .box-shadow { box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.6); } 左右の影を消すために、4番目の指定（広がり値）をぼかしの値と同じだけ負の値で指定（縮小）してあげると消える。 この時、下方向の影の長さを負の値で指定した分だけ足さないと上と同じ影の長さにはならないっぽい。 .box-under-shadow { box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6)
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス
スタイルシート（CSS）はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 では li にスタイルを適用すればクラスや ID を個別に指定しない限り全ての li にスタイルが適用されます。しかし、CSS3 ではクラスや ID を指定せず1番目の li、最後の li、偶数・奇数番目の li、というように細かなスタイルの指定ができるようになりました。 最初、最後、偶数、奇数番目の要素にスタイルを適用する方法というのは基本なのでよく見かけますが、要素の2番目以降とか2番目以外にスタイルを適用する方法に意外に手間取ったのでメモしておきます。 要素の2番目以降にスタイルを適用 上の画像を例に2番目以降の li 要素にスタイルを適用する方法を紹介します。 2
8ステップで完成！CSS3で「斜めのストライプ」を作る方法
各ブラウザのCSS3の実装も進み、最近では画像を使わずにサイト上のブロックの背景をCSSだけでデザインすることが増えてきていると思います。特にスマホサイトなどではできるだけ画像を使わずに容量をおさえておきたいということから、その傾向が強いと思います。今回は背景パターンとしてよく使われる「斜めストライプ」をCSSのみで作る方法についてまとめてみようと思います。 まず、前準備として以下のようにdiv要素を作っておきます。このdiv要素に対してCSSを指定していきます。 <div class="div2269"></div>それから、斜めストライプを作成する上で必要なCSSは、「linear-gradient()関数」と「background-sizeプロパティ」となります。事前にご確認ください。 linear-gradient – CSS | MDNbackground-size – CSS
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;
CSSで背景画像だけにブラー(ぼかし)エフェクトを加える方法 - Design Color
ブラー（ぼかし）エフェクトの難点 背景画像をぼかして全体に敷いているデザインって素敵ですよね。何の画像なのかハッキリと分からなくても雰囲気が統一されますし、何より上に文字を乗せても読みやすいんです！この「ぼかす」表現を「ブラー（blur）エフェクト」といい、多くのデザインで用いられています。 ただし、このブラーエフェクトはCSSで実装しようとすると結構くせ者で、背景画像だけにブラーを適用させても中の要素までエフェクトが効いてしまうんですよね・・・。 「ぼかした画像を作ってから背面に敷けばいいんじゃないの？」と言われればそれまでですが、そこを諸々の事情でなんとかCSSで実装したいと思いまして。独自で色々と調べた結果、CSSの疑似要素をうまく使うことで解決できたので、その方法をお伝えします！ なお、実装方法はCodePenで以下の例を参考にさせていただきました。ありがとうございました〜！ CS
CSSでラジオボタンとチェックボックスにスタイルを当てる - Qiita
label には :before と :after 擬似要素を使い、グレーの角丸とアイコンを表現しています。 ラジオボタンは角丸で円を、チェックボックスは二辺のみborderを付けた要素を45度回転させています。 モダンブラウザ IE9+ android4.0系標準ブラウザ iOS7 Safari コード <form action=""> <section> <h2>radio</h2> <input type="radio" name="hoge" value="高坂さん" checked id="radio01" /> <label for="radio01" class="radio">高坂さん</label> <input type="radio" name="hoge" value="南さん" id="radio02" /> <label for="radio02" class=
【CSS】display:inline-block;で要素を横並びにする方法（前半はHTML5におけるボックスの話）
現在、（HTMLにおいては)ブロック要素、インライン要素という分け方がなくなりました。 では、どうなったかというと、その考え方はCSSに引き継がれています。 ブロック要素、インライン要素というHTMLの話ではなくて、 『その要素の、CSSにおける初期設定がブロック扱いなのかインライン扱いなのか』という分け方になっているわけです。 つまり、ブロック要素、インライン要素という分け方は廃止されたものの、ブロック扱い、インライン扱いという見た目の指定に関する考え方は残っているということです。 HTML4.1やXHTML1.0までは、HTMLの『ブロック要素、インライン要素という考え方』とCSSの『displayプロパティ』が混在していたので、HTML5では、それを整理したんですね。 見た目の話に限ると、『ブロック要素、インライン要素』が『コンテンツのカテゴリーやコンテンツモデル』に引き継がれたとい
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
1x1px透過GIF画像のDataURI - yamangoの日記
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEHAAEALAAAAAABAAEAAAICTAEAOw=="> 最近では1x1pxの透過GIF画像なんて使うことも少ないけど Javascript で jQuery.lazyload とかやるときに使ったりする モバイルではより使われるのだろうか HTTPリクエストが減るので嬉しい （だけどbase64だからバイナリより重くなってるよねそのへんどうなんだろう）
CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ
CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
imgとかinputなどの置換要素にはbefore, afterは使えないよ - しるてく
inputにbefore使おうとしてはまったのでメモ。 仕様読めばすぐ解決（できないという意味で）だったんだけど色々試して時間無駄にしてしまった。 12. Replaced content If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::af
何番目系の便利なCSSまとめ - Qiita
#最初 ##:first-child 最初の要素（親要素から見て、子要素すべての最初） デモ ##:first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ #最後 ##:last-child 最後の要素（親要素から見て、子要素すべての最後） デモ ##:last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ #1個だけ ##:only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ ##:only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ #X番目 ##:nth-child(X) X番目 デモ：５番目 ##:nth-of-type(X) ある要素のX番目 デモ：５番目 ##:nth-child(Xn) Xの倍数 デモ：2の倍数 ##:nth-of-ty
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
input='file'要素のデザインをフルカスタマイズする | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
CSSの擬似要素:beforeや:afterのcontent内の任意の位置で改行する | ITハット
要素の横幅と高さの比率を保つ | 集の一期一会
[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size![[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e988256232f0d626498e49d6ce0a326ccb9d200/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017013101.png)
