【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
文字などを流れるニュースティッカー風に表示するjQuery-liScroll使い方 | Glow-Factory
今回は、jQueryプラグイン【liScroll】を利用して、文字などをニュースティッカーを実装してみたいと思います。 ニュース系のサイトや電光掲示板なんかでもティッカーはよく見る表示方法で、少ない領域でより多くの情報をユーザーに伝えることが出来ます。 また、右から左への文字が動きますので、ユーザーの目に止まりやすいです。 ティッカーとは、 ティッカーとは、特定範囲内に文字列を流して表示させる表示方式のことである。右から左（あるいは上から下へ）文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。 ティッカーの代表的な例としては、新幹線の車内や看板、証券取引所などにある電光掲示板がある。Webページにおいても、左右に文字の流れるティッカー表示が用いられる場合が珍しくない。 こちらのjQueryプラグイン【liScroll】を利用して、Word
こんな簡単でいいの？便利すぎるPhotoshopのプラグイン23選
デザイン制作の大半をPhotoshopで作業する人も多くいらっしゃいます。 そんなPhotoshopですから、自分仕様に環境を整えておくことで作業の快適具合も大きく変わってきます。 今回は、Photoshopでの作業を効率化する使い勝手の良いプラグインを28個に絞りご紹介します。 フォトショッププラグインとは、標準機能を拡張するファイルのことです。必要に応じてインストールすることで作業効率を飛躍的にアップさせることが可能です。 全てインストールする必要はありませんが、気になるものがあれば是非一度使ってみてください。 便利すぎるPhotoshopのプラグイン23選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなど
タダピクが熱い！商用可・クレジット不要の無料画像素材を横断検索
タダピクは無料画像を30サイト以上で横断検索 無料の画像素材欲しいですか？ 「タダピク」は、商用利用可能・クレジット表示不要で、無料画像素材サイトを横断検索ができるサービスです。 たとえば、無料画像素材サイトを複数知っていても、欲しい素材が無ければ別のサイトで探しますよね。 大体3サイトくらい探して見つからなかったら、面倒になって、google画像検索で良いのを発見！…でも商用利用できない画像だった、という経験ありませんか？ そんなトキ、「タダピク」を使えば、欲しい画像が1回の検索で探せます。 また、有料画像の横断検索もできます。 タダピクの使い方 「タダピク」では、細かくタグ付けされた中から、ジャンルを絞ってピックアップすることができます。 もちろんキーワード検索もできます。たとえば、「家族」と入力すると、 候補の画像が、14200万件！！も表示されます。 また、 ・イラストだけで絞り込
ウェブ制作の見積もりを金額付きで晒してやろうじゃないか！
はい高いですか？こんなもんですか？以下見積もりの説明です。 リニューアルと言っても、既存サイトはCMS化されておらず、たいして情報もアップされていなかったため、ほぼほぼ新規案件に近い、というイメージです。そのため、旧システムからのデータ移行費用が入っていません。その代わり、商品データベースは既存のものがあり、定期的にそこからデータを吸い出してCMS側の商品ページに反映するというカスタマイズが入っています。色々調査した結果、1週間でできそうという見込みのもとに見積もりしていますが、この要望はなかなか軽く収まらないことが多いですね。 コンサルティング費用にどのくらいかけるかというのはサイトの規模感によってまちまちだと思いますが、誰に向けたサイトで、何の目的で、対象となる閲覧環境は、用意するサーバーは、考えられるリスクは、など細かく資料に起こしていき、事前に複数回クライアント往訪のうえ打ち合わせ
floatを解除する手法のclearfix と 次世代のレイアウトの話
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
ウェブサイトやブログを制作する時の手書きのワイヤーフレームのまとめ
ウェブデザイナー・ディレクターが実際に、サイトやブログ・ポートフォリオなどの設計をどのように行っているかが垣間見ることができる手書きのワイヤーフレームをDesignbeepからとプラスαで紹介します。 30 Great Examples of Web Design Sketches ちなみに僕は勝負用にA3、携帯用にB5サイズでしゃこしゃこしてました。
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
WEBデザインが短期間で上達した方法
この記事は、Webデザインが短期間で上達した2つの方法として、新たに書き直しました。 WEBデザイナーとして10年ちょっと経過。 未だにデザイナーとして足りないものは多いですが、 どうにかクライアントにも満足してもらえる デザインが提供できるようになったと思います。 これは、自分が新米デザイナーだった頃にやっていた、デザインの上達方法です。 「上手くデザインができない！」「上手くなるにはどうすればいいの？」など、 どうすればデザインが上達するのかわかならい人の参考になれば幸いです。 新米デザイナーの頃、ダメなデザインをして先輩からよく叱られていました。 クライアントからデザイナーを交代してくれと言われ、 激しく落ち込んだこともあります。 いまになると恥ずかしいですが、 その頃の自分には、 プロのデザイナーとして最低限の能力がなかったのです。 クライアントの満足するクオリティのデザインを 期
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
簡単で便利すぎ！WEB制作を「楽」にする無料ツールまとめ
作成：2013/01/28 更新：2014/11/01 Tool > Webサービス フリーソフト、無料ツールなのにここまで使える 前回、無料素材をご紹介しました。 今回は無料で使える「ツール」をまとめます。フォント、画像、配色、htmlからエディター・アフィリエイトリンク作成補助まで。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．フォント ２．画像編集 ３．ロゴ作成 / ネタ ４．配色 ５．HTML5 ６．CSS ７．ブラウザチェック ８．エディター ９．アフィリエイトリンク作成 １０．フォーム作成 １．フォント PCにインストールされているフォント一覧をプレビュー Font picker イラスト等に使われているフォントを調べる WhatTheFont Windows上のテキストをくっきり、見やすく表示。 gdipp - ｋ本的に無料ソフト・フリー
web製作者向けチートシートまとめ - CHROMA
List Adobe関連 Illustrator Photoshop Fireworks Indesign Acrobat HTML,CSS HTML 文字実体参照 CSS HTML5+CSS3サポートブラウザ Canvas Haml,Sass Haml Sass Vim,Zencoding Vim Zencoding javascript/jQuery javascript jQuery UNIX 正規表現 検証ツール Firebug Chrome Developer Tool ブラウザ関連 Chrome Safari Firefox IE Mac 参考 アプリ・ツール Adobe関連(CS5-CS6) CS5と6のチートシート上げてるけど、adobe製品なら簡単にエクスポートできると思う。例えばfireworksなら、メニューバーから[Fireworks>ショートカット>現在のセット：
「第一回 プログラマ向けデザイン勉強会」の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた - give IT a try
はじめに みなさん、明けましておめでとうございます！・・・と言うにはあまりにも遅すぎる時期になって2013年最初のブログ更新となりました。 「そろそろブログ書かなきゃ書かなきゃ〜！」と思っていたのですが、年末から妻のパン屋のWebサイトのリニューアルに没頭してしまい、間が空いてしまいました。 せっかくなので、2013年最初のエントリではそのお話をしたいと思います。 「第一回 プログラマ向けデザイン勉強会」の発表資料が素晴らしい！ 前々から妻からは「Webサイトのデザインをリニューアルしてほしい」と言われていたのですが、僕自身はあまりデザイン方面には強くないプログラマなので、どうしようかと困っていました。 そんなとき、ネットで見つけたのが「第一回 プログラマ向けデザイン勉強会」でした。 東京の勉強会なので、僕は参加できませんでしたが、発表者の方々のわかりやすいスライドが公開されていたので、だ
6 Options for Low Budget Web Design / Development Projects
2014年7月23日 Webサイト制作, フリーランス Webサイト制作の依頼を受ける上で、クライアントの中には相場が分からず、必要最低額を遥かに下回る予算を提示する方もいます。多くの場合は必要な作業内容やかかる時間を説明すれば納得して頂けますが、時々「タダでできて当たり前」を前提とする方もいます…。うむむ。タダ…はちょっと行き過ぎですが、なるべく低予算のクライアントにも満足してもらいたいですよね。予算にあわせてできることがないか、考えてみました。 ↑私が10年以上利用している会計ソフト！ 1. 実装する機能を絞る 「必ず取り入れたい機能」「できれば取り入れたい機能」「取り入れられたら嬉しい機能」と、要望の優先順位を話し合い、予算に応じてできないものは思い切って削除したり、違う方法を考えて予算内に収まるように検討します。「時間 vs お金 vs クオリティ」でも書いたように、取り入れたい要
たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS | ATTRIP
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
このWEBサービスやアプリ達に感謝しなければ年を越せない！僕が今年使い倒した2012年のベストを全部ご紹介！ | バンクーバーのうぇぶ屋
