:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか？ 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
できた！をかなえるチュートリアルマガジン DEKIMAGA
アドビは世界を変えるデジタルエクスペリエンスを提供しています。アドビのクリエイティブ、マーケティング、ドキュメントソリューションは、新進アーティストからグローバルブランドまでのあらゆるデジタルコンテンツを適切なタイミングで適切な人に提供することで最高の結果の実現を支援します。
プロダクトの品質を高める『フィードバック』
プロダクトの品質を高める『フィードバック』 デザイン⇒フィードバック⇒変更・修正のデザインプロセスをまわして、デザインが良くなっている感じがしなかったり、...
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
特定商取引法に基づく表記の書き方
よく、起業を起こして自分が培ったノウハウをＰＤＦや本などにして 販売している人を見かけます。 「私も何かを販売しようかな」と思い立ったとき、 必ず、表示しておかなければならないのが「特定商取引法に基づく表記」です。 今回は、この特定商取引法に基づく表記の記述の参考となれば良いと思っています。 特定商取引法の表示 「特定商取引に関する法律」とは、「訪問販売法」が、 名称・内容も変更・改正され、平成13年6月1日から施行されている法律だそうです。 ↓ ここから 店舗名 あなたのお店の名前 販売業者 ・個人業者の場合は個人の名前になります。 企業の場合は会社の正式名称を記入 代表者 同上（代表者名はフルネームで記入） 業務責任者 同上 住所 ・住所は原則として、正確に全て記入。 ただし、請求があれば詳しい内容をメールしますとわかりやすい場所に 明記し、お客さんが注文する前に確認できるようにしてお
Webデザイナーやコーダーの方でも知っておきたいPHPの便利な使い方
この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇
CSS3アニメーションの基本
CSS3アニメーションの基本：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）（1/3 ページ） エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。 クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「ちょっとやぼったいね……」というつぶやき。Webエンジニアの方からよく耳にする嘆きの声です。エンジニアの立場でデザインまで積み上げていくのは、やはり難しいですよね。 しかし、いわゆる外観としてのデザインの他に、クライアントさんを「おっ！」と思わせる便利な手法が1つあります。それは「アニメーション」です。 Webサイトでの小気味良いアニメーションは、そのユーザー体験を豊かなものにしてくれます。
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
WEB APIの使い方とは？挑戦したらすごく楽しい！ : 僕の私の備忘録
11月26 WEB APIの使い方とは？挑戦したらすごく楽しい！ 2011 カテゴリ:サイト制作・備忘録単なる日記 最近はWEB APIに挑戦していました。夢中になっていたので、既存サイトはほっときがちです。でもWEB APIはとっても楽しいです。WEB APIについては難しい説明が多いので、これから使ってみたいな、という人向けに。 APIで何が出来るのか？と会わせて、APIを使う際の具体的な流れについて簡単に説明しておきます。 WEB APIとは？ WEB APIの具体例 WEB APIの利用を開始するにはどうすればいいの？ WEB APIの使い方、大まかな流れは？ プログラミング言語が必要。初心者がWEB API は難しい？ 初心者向けのWEB APIは？ WEB APIはどこで動かすの？ブログで動く？ WEB APIの難関は、英語。 データを取得したら、PHPその他で頑張る WEB
Photoshopで文字をよりシャープにクリアに見せるこつ -1px未満のこだわり
dribbbleに投稿されたデザインで、コメントのやり取りがちょっと興味深いものなので紹介します。 簡単に意訳すると、 ビジター「デザインきれいだな、文字周りの処理に秘訣とかあるの？」 オーナー「文字をクリアにみせるために、Photoshopでこういう風にやってるよ。」 という感じです。
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
JavaScript: window.open() 小窓の基礎
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
知っておくべきjQueryオブジェクトの扱い :: 5509
jQueryオブジェクトからDOM要素にアクセスする方法やメソッドで渡されるjQueryオブジェクトの扱いなど基本といえば基本ですが、再認識メモです。なので、タイトルは自分に覚えとけよってことです。。 jQueryオブジェクトからDOMにアクセスする $(‘#id’)にすれば#idを取得できますが、この状態だとDOM要素を選らんでいる状態ではないので、DOM要素のプロパティにはアクセスできません。 $('#link').href // これは無理 1-1. $()[0] 要素を引数にしたjQueryオブジェクトはDOM要素が配列で格納されている状態なので $('#link')[0] // DOM要素の参照になる console.debug($('#link')[0]); // 評価結果 - DOM要素 // とすることで配列の中からDOM要素を指定することができるので、プロパティにアクセス
JavaScript Index/メソッド、プロパティ・リファレンス
この項では、JavaScriptにおける各オブジェクトのメソッド、プロパティ、関数、及び制御文などのリファレンスです。 一部にサンプルを掲載しました。お役に立てば幸いです。 ■ JavaScript Index
dl要素を美しくデザインするスタイルシートのまとめ | コリス
実用的なものからちょっとトリッキーなものまで、dl要素を使った美しいデザインのスタイルシートを紹介します。 In Defence of the Definition List HTML <dl class="wrapper1"> <dt>News Item 1</dt> <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
レッツPHP!
リキッド・レイアウトでチェックボックスを綺麗に並べる - WebOS Goodies
ゼロから学ぶ「CSS Sprite」
