Font Awesomeを使った星マークのレーティング表示のスマートな方法
こんにちは、社員Kです。 さて本日は、某グルメサイトなどのレビューサイトでよく見る星マークで表示するレーティング表示のHTML/CSSをご紹介します。 星マークの表示は、Font Awesome という無料で使えるアイコンフォントのライブラリを使用してやってみます。 Font Awesomeとは？ 今回、星マークの表示に使用するのは「Font Awesome」というアイコンフォントのライブラリです。 無料で使用できてCSSファイル（またはJSファイル）を読み込むだけで簡単に利用できる非常に使い勝手の良いアイコンフォントです。 今回は最新バージョンの 5.12を使用します。 読み込み方法は、CDNライブラリから下記のように設置するだけ。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-aweso
jQueryで角丸を作るライブラリ jQuery Corner - Webtech Walker
Home Archive jQueryで角丸を作るライブラリ jQuery Corner jQueryで角丸を作るライブラリ jQuery Corner 2007年07月19日 category:javascript Comment(0) Trackback(1) コーディングするとき、角丸っていろいろと大変ですよね。今回はjQueryのライブラリで角丸を作成するものを紹介しようと思います。 ダウンロード 今回は角丸のみ紹介しますが、丸だけでなく色々な角を表現できるのがこのライブラリの特徴です。ダウンロードやデモ一覧は下記からどうぞ。 http://malsup.com/jquery/corner/ 使い方 まずjQueryとダウンロードしてきたライブラリを読み込ます。 <script type="text/javascript" src="jquery.js
My DebugBar | IETester / HomePage
DebugBar Home > Wiki > IETester :: Browser Compatibility Check for Internet Explorer Versions from 5.5 to 11 :: ANNOUNCE: If you are an Adwords user, The IETester team is proud to announce its new tool: SunnyReports, a simple and efficient Adwords reporting tools IETester is a free (both for personal and professional usage) WebBrowser that allows you to have the rendering and javascript engines of
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
metaphase coder team labs - 半角英数字を改行する
2009年5月22日 16:02 URLやメールアドレスなどの半角英数字を羅列した際に、それを包括する要素を突き抜けてレイアウト崩れが発生することがあります。 これは、スペース等の区切りが登場するまで一つの単語として認識され、通常では改行されません。 これをJSで解決されてたブログを見つけたのでご紹介します。 CSSにて[word-break:break-all;]と指定すれば、半角英数字の文字列の途中であっても領域に合わせて改行することが可能です。 しかし、これはIEでしか対応しておらず、そのほかのブラウザでは対応していません。 「to-R」というブログで「wordBreak.js」というものが公開されており、IE以外のブラウザでも[word-break:break-all;]と同様の効果が得られるようです。 FirefoxとOperaでword-break:break-allを実現する
ブラウザ別にCSSを条件分岐させる方法
そんな中で、一番のネックになるのが、全てのブラウザは必ずしも正しいCSSを読み込んでくれないということ、つまりバグのないブラウザはないということです。 やっと統一されつつあるものの、ブラウザ独自のものもあって、WEBサイトを構築していく者は、ここに泣かされます。 本来なら、古いブラウザ環境なんか知った事ではない！と思いたいのですが、ユーザビリティーの視点からいくとやはりどのブラウザから見ても、きれいなサイトを表示しないと…と思うのです。 このサイトでも、IE7が出た時点で、IE6は捨てました。 しかし、アクセス解析を見ると、IE6を使っている人がまだ多いのです。 IE6 Firefox IE7 safari の順番です。 Macの環境は、家にはないので対応することができませんが…。 そして、それを基本として、IE6用とIE7用のブラウザ環境に合わせたスタイルシートを作成します。 基本のCS
IE1, 2, 3, 4, 5, 6, 7, 8の確認が同時にできる -Internet Explorer Collection
Internet Explorerの異なるバージョン（1, 1,5, 2, 3, 4, 5, 5.5, 6, 7, 8）を同時に起動して、確認ができる「Internet Explorer Collection」を紹介します。 Utilu IE Collection 同時起動できるIEのバージョンは、インストールするWindowsのバージョンによって異なります。 当環境（XP SP3+IE7）では、上記のキャプチャのようにIE1.5, 2, 3, 4, 5, 5.5, 6, 7, 8を同時起動できました。 ※元のIE7には特に影響はありませんでした。 古いバージョンが必要ない場合は、インストール時にチェックをはずせばインストールしないと思います。
Data Tables and Cascading Style Sheets Gallery
Current style: TagBox by TagBox Table design based on the fresh TagBox style.
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
ネットマニア - テンプレート・素材・PHP・CGI・クールサイトを作る為に -
*記事内には広告を含みます twitterフォロワー合計5万人を超えるP活インフルエンサーの「えりなさん」に、パパ活初心者が知っておきたいことや、おすすめのパパ活アプリを編集部が徹底インタビュー。 「パパ活の基本」や「パパを沼らせるコツ」「危険なパパを見抜く方法」等を編集部が根掘り葉掘りお聞きしました。 この記事を読めば おすすめのパパ活アプリ パパ活アプリと交際クラブの違い パパ活アプリの使い方 定期の太パパを見つける方法 危険なパパを見抜くポイント がまるっとわかります。 年末年始は男女ともに新しい関係を探そうとする人が多くなるタイミング！また仕事も休みで家にいる時間も長くなるので、パパ活アプリのアクティブ率もかなり高くなる傾向にあります。 2024年に良いスタートを切るなら、このタイミングで頑張るかどうかが運命の分かれ目といってもいいでしょう。 えりなさんのプロフィール
Webデザイン・Webデザイナーのまとめサイト | Webデザインに優れたサイトのリンク集 ≪デザインリンクデータベース≫
～10程度っすよ ～50程度かな ～100くらい ～300程度です ～500はこなす ～1000はやってます これ以上 ( ! )
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
