unicode-bidiでメアドを変換 - lucky bag
CSS の unicode-bidi プロパティを使ったアイデア。つか、良く思いついたなって感じ。 ネタ元 「 Stu Nicholls | Cutting Edge CSS | Hiding email address 」 文字コードの Unicode では、日本語であれば左から右へ、アラビア語であれば右から左へと言う風に言語により文字方向の表記が決められています。 unicode-bidi プロパティを使えば、これを変える事が出来ます。ネタ元では、これをメールアドレスに適応して、ソース上は逆方向に記述し、CSSの unicode-bidi プロパティによって、見栄えを正しく見せています。ロボットからのメールアドレス収集を防げるかも知れませんね。 メールアドレス： moc.gab-ykcul@ofni 上記の(X)HTMLソースコードは下記のようになっています。 <address> メー
文字の書き始めの位置を左右指定する
解説 文字の横書きに対する方向を指定するスタイルシートです。 日本語では、文章は左側から書き始めるのが普通ですが、アラビア語など中には右側から書き始める言語もあります。 これらに対応するため、CSSでは文字の方向を指定するプロパティがあります。 値（direction） 「direction」プロパティで文字の方向を指定します。 「direction:ltr;」は左から右へ文字を並べます。 一方、「direction:rtl;」とすると、文字が逆転し、右側から左側へ文字が表示されます。 ただし、IEでは日本語の文章に「direction」プロパティを適用しても文字が逆転しません。 そこで、ユニコードに対応する「unicode-bidi」プロパティを併用します。 値（unicode-bidi） 「unicode-bidi」プロパティは、Unicodeで定められた規格に対して「directio
レスポンシブなのを作ってたら、firefoxでtable内の画像が圧迫した件
何かに使える気がするのでメモしておく。 起ったこと レスポンシブなサイトを作っていたら、firefoxで想定通りの動きをしてくれなかったのよ。 具体的には何が起ったのか？ table内に配置した画像が、ウィンドウ幅に合わせて縮小してくれず、隣のthを圧迫してしまった。 なお、thにはwidth設定がし何かに使える気がするのでメモしておく。 起ったこと レスポンシブなサイトを作っていたら、firefoxで想定通りの動きをしてくれなかったのよ。 具体的には何が起ったのか？ table内に配置した画像が、ウィンドウ幅に合わせて縮小してくれず、隣のthを圧迫してしまった。 なお、thにはwidth設定がしてあり、tdにはwidth設定がない状態（つまりtd側が可変） にも関わらずfirefoxのみ出来てない！ あ、OSはmacですのん。だからIEはみてないｗ←ある程度出来てからチェックするつも
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
CSS3 Patterns Gallery
Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial
CSSブレンドモードで画像を彩ろう
CSSブレンドモードで画像を彩ろうPhotoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード（描画モード）」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです！今回はそんなCSSブレンドモードにフォーカスしてみようと思います！ 対応ブラウザーCan I use…によると、IE 以外のモダンブラウザーに対応しています。 ブレンドモード一覧基本的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat; background-blend-mode
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
【alevirita】title属性を使っておくとCDPが捗る
title属性は要素に対しての補足情報を付け足す属性ですが、メニューや見出しのtitle属性に英訳や日本語訳を指定しておくと、デザインに幅を持たせることができます。 <a href="index.html" title="index">最初のページ</a> <h2 title="サイトについて">About Site</h2> CSSの:beforeや:afterとcontentを使って、title属性を併記したり、title属性だけ見えるようにしたりできます。IEは8以上で対応しています。IE7や6だと有効になりませんが、そういう未対応のブラウザでは普通の内容が見えるだけなので、display:noneやtext-indentやpaddingで内容を見えなくして背景画像だけを見せる画像置き換えと違って可読性は損ないません。JavaScriptを使えばIE7や6でも使えます。その部分をコピ
CSS グラデーションの使用
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 � �ת�View in English 0��ת�Always switch to English CSS グラデーションは <gradient> データ型で表現され、 2 つ以上の色の間の連続的な変化から成る <image> の特殊型です。グラデーションは 3 種類から選択することができます。線形 (linear) (linear-gradient() 関数によって生成)、放射 (radial) (radial-gradient() 関数によって生成)、扇形 (conic) (conic-gradient() 関数によって生成) の 3 種類です。 repeating-linear-gradient(), repeating-radial-g
obomemo.com
このドメインを購入する。 obomemo.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
CSSで月の満ち欠け
月の満ち欠けは球体に光を当てた結果のもので、円を円でカットするようなものではない。CSSでは立体を立体としては扱うのは難しいので、それを平面として捉え、半円を円で膨らませたり押し出したりすることで近いものにすることが可能になりそうだ。 Demo: Lunar Phase CSSグラデーションで作った半円に、border-radiusで作った半楕円を組み合わせることで実現している。月齢15以上の場合は半円を逆転させる。地球と太陽と月の位置関係から平面で捉えると、半円を基本にするということであっている(と思う)。 例えば月齢5の場合は以下の様なCSSで構成されている。 .moon { border-radius: 51%; height: 3rem; overflow: hidden; position: relative; width: 3rem; } .phase5 { backgroun
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
CSS3背景アニメーションで雪を降らすの巻 | グリニッジ株式会社
こんにちは、三橋です。 今年も残すとこあと少しですね。 冬なので、css3の勉強に背景画像を動かして雪が降ってるようにしてみました。シンプルな作りです。 こちらの記事をロジックの参考にさせていただきました。 CSSだけで背景に雪を降らせてうっとりする 1,雪の画像（動かしたい背景画像）を用意 一枚雪の画像を用意します。今回はこのpng画像を作りました。グレーの部分は透過させてます。 ２,雪を降らせたいdivにbackground-image指定。 #div{ background-image:url(雪画像のパス); } リピートされて背景全体に雪が敷きつめられます。 このページでは雰囲気を出すため背景色、background-color:#A3D6FF;を指定しています。 3、背景アニメーション snowを設定 ここでcss3の出番です。背景画像を一定スピード、無限リピートで動かして雪が
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
パンくずリストなどを作る際に役立つ擬似要素の使い方 | pipilog
ちょっと個人的にハマったのでメモ まずパンくずリストとは。 パンくずリスト（breadcrumb list）は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。 日本語では「パンくずリスト（breadcrumb list）」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。 こういうやつですね。 ちなみにみなさん、 これ、どうやって作ってますか？ もしかして sample.htmlRAW <ul id=”breadcrumb”> <li>HOME</li> <li> > <
『CSS：1行目の頭文字だけ前に出したい時』
Web仕事人の部屋札幌のWeb制作会社・株式会社メディアリュウム／株式会社WEBサクセスのスタッフHが、Web制作のTipsなどをお届けします。 注意書きなどで、よく使われているこのような文章、 「 ※ご注意ください 」 頭に ※マークなどをつけて書いていきますが、文章が折り返すときは、※マークだけ前に出ていたらいいな・・・というときがありますよね。 これもCSSで設定することができます。 最終的にはこのようになるよう、設定していきましょう。 //////////////////////////////////////////////////////////// まず、HTML <body>部分に <p>※あいうえおかきくけこ<br>さしすせそたちつてとなにぬねの</p> と書きました。表示はもちろんこのようになります。 ここで、<p>タグにCSSを仕掛けていきます。 ----------
Excluded Ad Placement for Responsive Design
04/09/14 · Penarth, Wales · The two most important features for selling web advertising are size and placement. Sure, there are tons of other factors, but for your everyday digital ad, “How big?” and “How high up the page?” are major selling points. Over the last few years, though, responsive design has done its best to make these agreements murky as hell for advertisers and content makers. Size a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sdn-project.net
content - CSS: カスケーディングスタイルシート | MDN