CSSのID・クラス名の頭文字に数字を使用する方法 CSSは普通だとidやclassの頭文字に数字は使用できないのですが、使用する方法をご紹介します。 投稿日2015年08月11日 更新日2015年08月11日 使用方法 HTMLのクラス名に単純に「3」と付けてみましょう。 <p class="3">テスト</p> CSSでは文字コードを指定すれば使用できまるんですね。 .\33 { color: red; } あとは属性セレクタを使用することでも同じことができます。 [class="3"] { color: red; } その他使用例 直接50%とか指定してみたり。 <div class="50%">テスト</div> <div class="50%">テスト</div> .\35 0\% { width: 50%; } 文字コードを指定すればこんな感じで括弧も使えます。 <div cl

jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用にHTMLとCSSのコードを載せておきます。使いたい方がいらっしゃいましたら、ご自由にお使いください。 作ったのは、普通のドロップダウンメニュー(シングル)、多階層、メガドロップダウンメニューの3種類で、1つのグローバルナビに全てを詰め込んでいます。1種類だけ使いたいという場合もあると思うので、コード自体は種類によって個別に記載しています。そのために、非常に冗長となっていますがご了承ください。 デモと共通の部分 このドロップダウンメニューのデモは以下のリンクから見れます。 DEMO ドロップダウンメニュー自体は、ul要素でマークアップしています。 各種(シングル・多階層・メガ

ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。

#はじめに 何て表現すれば良いかアレですが、こんなエフェクトを見かけたので再現してみました。マウスオーバーで四方のボーダーがシュッと伸びてきます。Coolデスネ :) [動作イメージ] なお実際の動作・ソースは以下で確認ができます http://codepen.io/nekoneko-wanwan/pen/EVjdvX http://nekoneko-wanwan.github.io/demo/mouse-action/hover/border/ #仕組み 実はアニメーションしているのはborderではなく、幅or高さ1pxの擬似要素です。リンク要素とその内側要素に::before, ::afterを設定して、それぞれ四隅に配置し、:hoverでサイズを100%にする動作をtransitionしているだけです。 #コード a { display: inline-block; color:

CSSで斜線を引く方法:表の空セルなど任意のHTML要素にCSSで斜線を引く方法を解説。CSSのlinear-gradientを駆使すると、画像を使わずにCSSだけで1本の斜線を引くことができます。右上がりや左上がりの斜め45度はもちろん、自由な角度、望みの太さで斜線が引けます。CSS3では空(カラ)の要素だけを対象にして装飾できますから、それと組み合わせて「テーブル内の空っぽのセルにだけ斜線(対角線)を引く」という装飾も簡単に作れます。短いCSSソースで任意のHTMLに斜線を引く方法をご紹介！ CSSでも斜めの線を引く方法はある CSS(スタイルシート)を使えば、実線・点線・二重線などウェブページ内に様々な線を縦横に引くことができます。とはいえ、簡単に引けるのは水平線や垂直線だけで、斜線を引くのは簡単ではありません。需要が多そうな割に意外なことですが、CSSには斜線を引くための直接的な方

使ってますか"text-overflow"？ TechMemo Posted by: Masayuki Fukumoto [ 2013/04/15 ] 結構使われている？そうでもない？ 使っている方も多いとは思いますが、あまり見かけないようにも思えます。 要は、要素をはみ出した文字部分を切ったり、「...」で補完したりするCSS3のプロパティなのですが、これ、案外便利だと思いました。 もともとはIEの独自拡張だった（未確認）ようですが、現行のブラウザではほぼ実装済みで、スマートフォンのブラウザ（iOSのmobile Safari / Android標準ブラウザ）でも問題なさそうです。 多くの場合は「省略されていることを明示する」という観点からも、省略した部分を「...」で補完するタイプが使われていると思うのですが、この「...」をあまり見かけないので、どのくらい使われているんだろう？と思っ

2019年5月16日 CSS Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！ ↑私が10年以上利用している会計ソフト！ CSS Shapesとは CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？ 通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロ

Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15

要素に影を落とすためのbox-shadowを確認するためのジェネレーターです。 各種プロパティなどページ下部に詳しい説明を書いてあります。 filter関数のdrop-shadowやReact Nativeのshadowのジェネレーターは別ページになります。 /* preview */ width: 200px; height: 60px; background-color: #3cb371; /* border-radius */ border-radius: 30px; /* box-shadow */ box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);

tableを構築していて、スマートフォン用の表示に対応させようとするとセルの幅が狭くなって文字が読みにくくなってしまうのをdiplay:block;にする事で対応しています。 今回はレスポンシブで作成している時に同じくdisplay:block;をした際にIE9、IE8で効いていなかったので対策を調べてみました。 IE9以下でのtd,thをdisplay:block;するにはfloat:left;を付けると解決されました。 floatをかける事でブロック要素として認識されるようです。 IE以外でfloatがかかってしまうと不具合が出てきてしまいそうですので float:left\9;などとしてIE9以下にスタイルがあたるようにしました。

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he

Google Chromeで、hover時にopacityが効かない現象に遭遇したのでメモ。 サンプルコード HTML <a href="#"> <div class="image"><img src="rabbit.jpg" width="100" height="73" alt="" /></div> <p>オーダーは亀ですか？ Is the order a turtle?</p> </a> CSS a:hover { opacity: 0.6; } Google Chromeでopacityが効かない時のデモページ 解決方法 aタグではなく、aタグ内の要素に対してopacityを指定することで解決しました。 CSS a:hover .image, a:hover p { opacity: 0.6; } 解決方法のデモページ 他にも、aタグをブロック要素に変更でも現象は回避できました。

動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動

こんにちは、Webデザイナーの斧山です！Photoshopで文字組みを行う際には「トラッキング」や「行送り」など様々な設定を行います。しかし、いくらPSD上で完璧に仕上げていても、いざコーディングをするときに正しくCSSが組めていないと、せっかくの“こだわり”が無駄になってしまいます。 今回は意外と曖昧になりがちなPhotoshopの文字設定とCSSプロパティの相互関係をまとめてみました。それでは早速いってみましょう！ Photoshop文字設定とCSSプロパティの関係表 Photoshopの文字設定とCSSプロパティの関係をまとめてみました。 文字設定 PhotoshopCSS

「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法