CSSの便利な疑似セレクタ「:empty」と「:blank」、その違いと賢い使い方
エラーメッセージを実装する際、エラーがある時とエラーがない時の区別は「:empty」や「:blank」を使用すると、非常に簡単にスタイルを定義することができます。 「:empty」と「:blank」、その違いと実際にどのように使用するのか、どちらが便利なのかを紹介します。 :empty and :blank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は誤解していた 「:empty」と「:blank」の違い 「:empty」と「:blank」を実際に使用する場面 「:empty」の方が十分ではないと思った理由 「:empty」と「:blank」のサポートブラウザ まとめ 私は誤解していた 私は1ヵ月前のツイートで、「:empty」と「:blank」についてひどい誤解をしてました。 「:empty」は有用ではなく、「:bla
Sass（SCSS）は難しくないよ！私なりの使い方をご紹介！ ｜ Tips Note by TAM
Sass（※この記事ではSCSSを指します）やLESSといったCSSプリプロセッサがどんどんメジャー化しています。 しかし、私の実感としてまだまだ使っていない人も多いのではないか？と思っています。 導入が難しそう。書き方がわからない。CSS使えなくなってしまうの？ 色々な疑問や不安があると思います。ですが、Sassはあなたが考えるほど難しくありません！ わたしもSassを使い始めて、まだ半年とちょっとです。そんな私の使い方をご紹介したいと思います。 ※この記事では導入部やコンパイルの紹介はしません。 ※前提 Sassを書けば勝手にCSSをいい感じに書いてくれる！というものではありません。 まだCSSにちょっと自信がない人は、まずはCSSに慣れたほうがいいです。 どんな効率化ツールを使うときでも、根本となる基礎はきちんと理解しましょう。 (1).scssファイル内にCSSを書く まずはここか
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
字下げする！CSSでインデントする方法【初心者向け】現役Webデザイナーが解説
初心者向けにCSSでインデントする方法について解説しています。サイト内の文章を字下げしたい時に役立つので、覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSでインデントする方法を紹介します。 Webサイトの文章を字下げしたいという時に使えるので、覚えておきましょう。 1文字目をインデントする方法、2行目以降の最初の文字をインデントする
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
コピペで簡単！レスポンシブ対応の固定ヘッダーナビ作成！ | 刈谷、豊田でウェブサイト制作！合同会社beReady
豊田、刈谷、知立、安城でホームページ制作をやっている合同会社beReadyの奥山です！ 僕は基本的に寝るときはエアコンをつけていないのですが、さすがに暑いので竹マットを敷いて寝ています。 寝返りうつたびにひんやりとして、かなり体温下がります。あとは熱さまシートの枕のやつですね。 あれも体がじんわり冷えていくのが体感できて、おすすめです。 竹シーツ セミダブル「竹駒シーツ」(#9897640)【IT】【tm】セミダブル：約108×176cm冷感寝具 敷きパッド 冷感シーツ ひんやりマット 冷感 敷パッド 竹 マット 価格：2980円（税込、送料無料) (2016/7/30時点) というわけで今回はヘッダーのグローバルメニューのレスポンシブ対応をコピペで使えるコードと解説を行っていきたいと思います！ 結構時間かかりました！！笑 ぜひ見ていってください。 レスポンシブなヘッダーグローバルメニュー
Font Awesomeの使い方が初心者でもわかる!ダウンロードから設定方法まで
Font Awesomeとはアイコンを文字として扱うことを可能にしたツールです。画像ではなく文字なので、大きさや色などを変更することが可能！ところが説明は英語でかつ、ソースをコピーしてHTMLに書き込むなど、初心者にはなかなか難しいツール。そこで、今回はそんなFont Awesomeの使い方を、初心者でもわかるように簡単に解説してゆきます。 Font Awesomeとは？ Font Awesomeとは、Web上でよく利用される上記のようなアイコンをアイコンフォントという文字として使うことができるツールです。画像ではなく文字なので、大きさ・回転・重ね表示、そして色までも変更することができるという優れもの！もちろん無料で、商用利用も可能です。 では早速、Font Awesomeの使い方をみてゆきましょう。 ダウンロードと設定方法 ⑴まずはFont Awesomeのサイトに飛んでください。 【U
side barのlistをカラフルに-WordPress Twenty Elevenカスタマイズ – HCDコンサルティング（旧・中川勉社会保険労務士事務所FPウェブシュフ）のブログ
レスポンシブデザインでとてもよく出来ているのにモノトーン過ぎるtwentyeleven。今回は、サイドバーにあるカテゴリリストを少しだけカラフルで見やすいものにしてみました。 いったんリストの前に何もつけない設定にする まず、style.cssで以下の箇所を探します。 ul { list-style: square; }</pre> これを、以下のように書き換えます。 ul { list-style: /***square******/ none; } これで、もともとリストの各項目についていた小さい四角が消えました。 リストの前に好きな文字や画像をつける 今度は、リストの前に好きな文字・記号・画像をつける設定をしていきます。 style.cssで、以下の部分を探してください。 #main { clear: both; padding: 1.625em 0 0; } これに少々追加します。
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld
いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,
CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
CSSを使ってDIV要素を重ねて下揃えする - yzgwyskw
CSSを使って以下の図のようにDIV要素を下揃えにする方法を示します。 DIV要素を入れ子にして、親に対してposition: relative;を指定し、子に対してposition: absolute;を指定します。すると、子要素は親要素を基準として配置されます。これを使って、親要素からの相対的な位置に子要素を配置できます。これを利用すると、以下の図のようにサムネイルにラベルを重ねることができます。 基本 見本 HTML wrapperにサムネイルを構成するものを挿入します。 <div class="wrapper"> <div class="thumbnail"></div> <div class="label">たい焼き</div> </div> CSS 親要素にposition: relative;を子要素にposition: absolute;を指定します。 サムネイル画像はba
【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？JS？onmouseover？）｜クロノドライブ
Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。 「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。 「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。 どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのものを指し、「マウスオーバー」「オンマウス」「ホバー」はマウスポインタが何かに乗った状態のことを指します。 今や画像のロールオーバーは、グローバルナビゲーションやボタン等Webサイトを構築する上で必ず使用すると言っても過言ではない技術ですが、実装方法がいくつか存在するため、どの方法で実装すればいいのか迷うことがあるかと思います。 また、普段使っている方法が果たしてベストなのか？疑問に思いながらコ
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)
【コピペOK！】めっちゃ秘密にしたかったけどCSSで文字を震えさせる方法を大公開するよ！ - にーとのかがみ。
どうも、沖縄在住ニートブロガーのケンヂ（@neetblogman）です。 実は最近、僕のブログで使用しているとある機能について問い合わせを受けることがちょくちょく出てきました。 まぁ既にタイトルにも記載しているんですが、文字が震える機能のことです。 これとか！ これね！！！ この機能が僕のブログに独自性を持たせていたともいえるため、この方法を周りのブロガーに紹介してしまうと僕の存在が消えてしまうのではないかという恐れがありますが、今回はそこについて気にしない方向で行きたいと思います。 何故なら、一度はIT業界に携わった身ですからアウトプットの大切さを僕は知っているのです。アウトプットがあるから新たなインプットが生まれる、これの繰り返して人間という生き物は成長していくのですよ。 というわけで！！誰でもサクッと簡単に使うための方法を教えちゃうよ―(‘ω‘ ) CSSなどの導入方法はこちらのペー
WordPress メニュー機能を操る ~画像メニューにする方法など | hijiriworld Web
1. まずはメニュー機能の基本的な使い方 2. アクティブ時とポイント時のスタイルを変える 3. 画像メニューにする場合 4. あとがき – wp_nav_menu()ではメニューをPHPの値として取得できるらしいが… 1. まずはメニュー機能の基本的な使い方 メニュー機能をオンにする > テーマフォルダ/functions.php add_theme_support('menus'); カスタムメニューの作成 管理画面 > 外観 > メニュー メニューの名前: global-navi リンク先: 固定ページ テンプレートタグを記述 テンプレートタグ wp_nav_menu() を使います。 > テンプレート <?php wp_nav_menu(array('menu' => 'global-navi')); ?> ↓ 生成されるHTMLは以下のような構造になっています。 ※実際はもっとた
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
CSSのみで簡単にタブ切り替えを作成する方法 | Stronghold Archive
こんばんは！ 今回はライトなのですが。 CSSのみでタブ切り替えを実施する方法です。 かなり簡単な方法だと思います。 では… CSS #tabmenu{ padding:0px; margin:0px; color:#333; font-size: 11px; width:500px; position:relative; } #tabmenu div#tab{ position: absolute; top:0px; left:0px; } #tabmenu div#tab a{ float: left; height: 40px; line-height: 40px; text-align: center; width: 100px; display: block; text-decoration:none; color:#333; background:#eee; } #tabmen
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ideahacker.net/2015/02/14/9779/
【WordPress・CSS】画像をマウスオーバーした時にゆっくり拡大する方法