[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック
パンくずでよく見かける三角形の実装方法に注目です。 今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。 リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装 三角形をtransformで生成 三角形をclip-pathで生成 三角形をborderで実装 まずは、今までの古典的な実装方法です。 リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。 三角形をborderで実装 この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになって
![[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d4b980ba7bb36ca68e44f445a36a6341ba4bb62/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018022601.png)
CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ
CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォントのサイズを変化 縦と横の比率を維持したボタン 縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さ アイコンの幅と高さ、そして間隔も キャプション付き画像 装飾された背景 アイコン付き検索フォーム チェックボックスで実装されたトグル ブロックの一行の長さ ボタ
[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点
:target疑似クラスは、ターゲットとなるアンカーリンク先の要素を表します。例えば、長い記事をユニークなidでセクションに分け、それぞれのセクションにアンカーリンクを設置します。:target疑似クラスを利用すると、ターゲットとなるセクションごとにスタイルを適用することができます。 :target疑似クラスを使ったスタイルシートのテクニックと注意点を紹介します。 The :target Trick :target以外の便利な疑似クラス・疑似要素については、下記のページを参考に。 使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 :target疑似クラスを使って、コンテンツを表示・非表示 :target疑似クラスを使って、ナビゲーションをスライドアウト :target
![[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2245872982c8e900d7bcc462d8385b1f0845ff9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016070901.png)
これが知りたかった！よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル | コリス
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
Neo Sample || Indam Site
<html> <head> <title>Example neo1<title> <style type='style/css'> /* Example neo1 By : Indam; http://www.indaam.com */ /* 1 */ .neo1{ width: 0; height: 0; float: left; border-style: solid; border-color: transparent #555; border-width: 32px 0 0 32px } /* End 1 */ </style> </head> <body> <span class='neo1'> </span> </body> </html> <html> <head> <title>Example neo2<title> <style type='style/css'> /*
The Shapes of CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn thos
もうCSS3の書き方につまづかない! CSS3ジェネレータのまとめ | SONICMOOV LAB
はじめまして。新規事業部 コーディング担当のキテレツです。 キテレツというのは入社時に決めたあだ名ですが全く浸透してません‥ ありがちなネタではありますが、今回はCSS3のジェネレータをまとめて紹介したいと思います。 ジェネレータの一番の利点はブラウザ上で視覚的に確認できる事にあります。 プロパティ名を覚える事ももちろん重要ですが、時間が限られてる時や、ｱﾚ・・うまく動かない‥といった時に使えます。 今日は僕が使っているor使ったことのあるジェネレータを紹介していきます。 CSS3 Generator http://css3generator.com/ 色々なプロパティに対応しているジェネレータで数値を入力してカスタマイズできます。 CSS3 Generator – By Eric Hoffman & Peter Funk http://www.css3.me/ 角丸、ボックスシャドウ、グ
すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
CSSで絵を描く！？今日から作れる達人のコツをご紹介
はじめまして! HTMLファイ部(内定者)の、のびーです。 4月の入社に向けて、せっせと勉強をしているアルバイターです。 jsdo.itでは、なんと本日、「HTML5実力テスト 応用編」をリリースしました！！ http://jsdo.it/blog/2013/01/html5cat-update.html リリースを記念して、テスト問題にも出題される、「CSSで絵を描く」ことをテーマに記事を書いてみます！ ※ 文中の例について、ChromeとFirefoxとOperaいずれの最新版とIE10が対応しています。 CSSだけで絵を描く!? さて突然ですが、こちらのイラストをご覧下さい。 はい、絵本に出てきそうな、おひさまです。 そしてこのイラスト、実はCSSだけで描かれています。 「CSSって、Webのレイアウトをするためのものじゃないの?」、と思う方もいるかとは思いますが、 断言します。いま
結局CSS3のlinear-gradientはどう書いたらいいのかまとめてみた (最新仕様・全ブラウザ対応版) - Studencheskie Programmisty
[-ms-]などは当該ベンダープリフィックスが必要という意味を表します。 Firefox 16以降のように1つのブラウザに複数の項目があるのは、ベンダープリフィックスによってサポートされる構文が異なっていることを表します。 iOS本体のバージョンと、搭載されているSafariのバージョンの対応表はWikipediaが詳しいです。 これから分かるように、現時点（2012/12/7）ではWebkitは最新の構文（to付き）に対応していません。また、FirefoxやOperaのようにプレフィックスを付けるかどうかでtoなしの古い構文が使えたり使えなかったりと変化します。 さて、では結局過去のブラウザも含めて全てに対応するにはどう書けばいいのでしょうか？上から下へ#000〜#fffのグラデーションをかけるコードを例に示します。実際には、対応したいブラウザののみ取捨選択して記述するのが実用的かと思わ
【CSS3】回転（rotate）とグラデーション（gradient）がIE9で効かないのを克服してみた（CSS3 PIEも使うよ）
い～つもIEに悩まされる ブラウザのシェア動向をちらほら見ていると、一時期のIE独占状態から今はIEもGoogle Chromeとほぼ同じシェアにまで下がったようですね。 どちらもおよそ3割強といったところでしょうか。 それに続くのがFirefoxとSafari。 Operaは相変わらず劣勢です。 ということはIEの中でもCSS3に『ほぼ』対応したIE9とその他のモダンブラウザで半分以上のシェアが占められていると推測されます。 ということで、物品販売サイトでの賑やかし効果（目立たせたりインパクトをつけてみたり）をこれまでは画像処理に頼ってきたのを、そろそろCSS3で補えるものは補ってみようと思い立ちました。 （※IE7とIE8にはCSS3 PIEで対応してみます） そうはいってもCSS3のプロパティはとても複雑です。 手打ちなんかできないんで自ずとジェネレーターに頼ることになるんですが、ジ
CSS3Generator by @RandyJensen
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
CSS3でボーダーを超かっこよくアニメーションするサンプル:phpspot開発日誌
Simple yet amazing CSS3 border transition effects CSS3でボーダーを超かっこよくアニメーションするサンプル とりあえずデモページを見ていただくのが一番ですが、ボーダーをアニメーションさせて未だかつて無い効果をブラウザ上で表現しています。 デモページ 応用することでかなりいろんなことができそうだな、という、なんだかとってもワクワクするデモでした。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２ フルスクリーン背景がスライドショーになるCSS3サンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいCSSの仕様を色々調べてみた
IDEA * IDEA
zzapwebdesign.com
CSS3のtext-shadowで作ることができるテキストエフェクトいろいろ
