[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 インラインのスタイル リンクのターゲット アクセシブルではない画像 ドキュメントの言語指定 不適切な文字セット アクセシブルではないビューポート属性 ラベルのないフォーム要素 空のインタラクティブな要素 不必要、あるいは非推奨の属性 インラインのスタイル このセレクタは、インラインのスタイルが適用されているページ上のあらゆ
![[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2a96d59143a2df01b38a0f16d119ef1fc6061d4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031401.png)
(K) bxSlider で複数枚のバナーを同時表示してスライドさせるコンテンツスライダーを作成 | web(K)campus|WEBデザイナーのための技術系メモサイト
jQueryを使ってのスライダーってTOPページのメインビジュアルが基本ですが、それはフェード系やダイナミックなアニメーションが主流だった頃の話で、前後左右の画像を表示しつつスライドするカルーセルスライダーが出始めて、メインビジュアルだけでなくコンテンツバナーを複数表示させて左右にスライドするタイプの物がTOPのメインだけでなくサブコンテンツ部分にも多く見られてきてます。 今回とあるコンテンツ量の多いポータルサイトを作成した時にそのタイプのスライダーを作成したので備忘録としてまとめておきます。 どんな感じのスライダーかっていうと、bxSliderの本家サイトにあるサンプル「Carousel – dynamic number of slides」のような感じです。 まず、bxSliderをダウンロードして準備 まず、「bxSlider」の本家サイトからDownloadします。 ダウンロードす
[JS]Bxslider でマウスオーバーで画像をスライドさせる方法｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
レスポンシブWEBデザイン対応で、カルーセルやサムネイルページャー（サムネイル付きスライド）などが可能な高機能スライドプラグイン「Bxslider」ですが、 サムネイルやページングのリンクを「クリック（click）」するのではなく、「マウスオーバー（hover）」で画像をスライドさせるというカスタマイズが必要になったので、今回はその方法をまとめました。 Bxslider の設置 Bxslider の基本的な使い方はレスポンシブWEBデザイン対応のjQuery スライダープラグイン「bxSlider」 の記事でも紹介させていただいていますが、 ダウンロードしたjquery.bxslider.js ファイルと jQueryファイル、CSS ファイルを <head> 内に設置します。 <link href="./bxslider/jquery.bxslider.css" rel="stylesh
![[JS]Bxslider でマウスオーバーで画像をスライドさせる方法｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
散乱した入力フォームを整理整頓し、CVRを改善するには？
Ben Gremillion氏は、UXPinのコンテンツデザイナーです。以前はウェブデザイナー、およびその後にバックエンドディベロッパーを務めていました。彼は新聞デザインからキャリアをスタートさせ、デジタルの未来を見据えて即座にHTML/CSSを学びました。 実を言うと、ステークホルダーやその他の関係者があまり深く考えずに「整理・整頓する」ことを求めるのに、私は飽き飽きしています。整理されているということは、ただ単に物が少ないということではありません。整頓するということは、全てをなくすわけではありません。これらの言葉は、ページ上で重要でない要素を取り除くということを意味しているのです。 もし複雑な入力フォームがあったならば、ユーザーは一目見ただけですぐに去ってしまうでしょう。これを防ぐための手っ取り早い方法は、散らかっている要素を取り除くことと、グリッドを追加することです。今日は、ユーザー
商用可能な丸文字日本語フリーフォント10選
かわいらしいイメージやあたたかい雰囲気を出したいときに、ゴシックや明朝フォントだとしっくりこない場合があります。そんなときには丸文字のフォントを当てはめてみるとしっくりくるかもしれません。 今回は商用可能なものに絞って、丸文字のフリーフォントを１０点ご紹介します。 瀬戸フォント JIS第四水準までの漢字や難しい漢字も収録されているので、他のフォントで漢字で見つからなくて困ったという時は、こちらのフォントで試してみてください。Unicodeを使った顔文字もだいたいが表示可能です。 丸文字「ニコモジ＋（プラス）」フォント ニコニコ動画で使われているフォントをイメージしてつくられたフォントです。ひらがな・カタカナ・英数字のみオリジナルで、それ以外の文字グリフ（漢字など）には源柔ゴシックが利用されています。 じゆうちょうフォント Version 2.07 太めのサインペンで書いたようなゴシック体の
Twitterアナリティクスの使い方を徹底解説【第1回・基礎編】 | SELECK
Twitter Analytics（ツイッターアナリティクス）、使いこなせていますか？「Twitter（ツイッター）」でのユーザーの反応は、Webサイトのコンテンツの成果を測るための大事な指標です。 以前は、Webサイトに設置できるTwitterボタンに、そのページのTweet数が表示されていました。それが廃止されたため、その代わりとなるものとして重要になっているのが「Twitterアナリティクス」です。 Twitterアナリティクスでは、自分のツイートがどれほどTwitter上で見られているか、どれほど反応されているか、自分のWebサイトのページがどれほどツイートされているかが分かるため、反響の大きいコンテンツを知ることができます。 Twitterアナリティクスを使いこなして、自分のWebサイトやツイートの効果を測定し、それに基づいてコンテンツの質を改善していきましょう。 この記事は、3
クリエイター職種図鑑 | フリーランス・業務委託ならレバテッククリエイター
クリエイターの仕事って？ クリエイターとは、創作活動に関わる人全般を指します。実際にはクリエイターという言葉に厳密な定義はなく、何を指すかは人によって解釈は分かれます。音楽や映像の制作、文筆活動、イラストやビジュアルデザイン、Webデザインなどの領域で、自らのスキルを以てアウトプットを出す人というのが解釈の一例です。 ただし、クリエイターを職業として、企業と仕事をするのであれば、求められる役割や仕事内容などで大枠が決まってきます。例えばWebデザイナーであれば、Web関連の技術スキルや企業のビジネスに貢献するかどうかという視点など、クリエイティブなセンス以外にもさまざまなスキルが求められます。ここでは、そうした各クリエイター職種の仕事内容や必要なスキルなどをご紹介していきます。 Webデザイナー Webデザイナーは、Webページ制作のデザインを担当する仕事です。仕事として携わる業務は幅広く
今さら聞けないUI（ユーザーインターフェース) の基本 デザイン会社 ビートラックス: ブログ
ユーザーインターフェース（UI）- どこかで聞いたことはあるしなんとなく想像は出来る。”このアプリのUIはイケテル”や、”UIデザイナー募集”など、最近ではテクノロジー系の記事や、デザインに関する話の中に頻繁に出てくるこの言葉。 しかしちゃんと言葉で説明してみてと言われると意外と難しい。 興味はあるけどはっきりとはわからない・わかっているつもりだけどもう一度復習したい・現状はわかっているからこれからのUIついて知りたい。 そんな人たちに向けて ユーザーインターフェースの歴史良いUIと悪いUIの違いUIのこれからという3つのセクションに分け、インターフェースの本質をまとめた。 1. ユーザーインターフェースの歴史そもそもインターフェースってなに？そもそもユーザーインターフェースの「インターフェース」とはどういう意味なのだろうか。「境界面・接触面」などと訳されるこの「インターフェース」という言
Googleアナリティクスも共有カスタムレポートで効率化！便利なソリューションギャラリーを使おう - 公の心理マーケティング
こんにちは！ Web心理マーケターの鈴木 公（@KouShinri）です！ Googleアナリティクスは便利ですよね！ 検索エンジンやSNS、広告からの流入数もわかるし、目標達成度や行動フローも分析できる！ だから、サイトの状況や価値を知るためにも重宝したい分析ツールですよね。あなたもきっと使っていることでしょう！ でも、Googleアナリティクスは複雑すぎる。どこをどう見ればいいのかもわからない。使い慣れていない時期なら、なおさら「？？？」がいっぱいになりますよね！ そんなGoogleアナリティクスを使い慣れていない方や、初心者の方のためにも……。Googleアナリティクスでは、レポートの「テンプレート」を取り入れ、簡単に分析結果を見れるようにする方法があるのです。 それが今回メインの「ソリューションギャラリー」！ この「ソリューションギャラリー」とは、他の人が見やすいように設定した独自
はじめての転職活動-事前準備編-｜オンライン動画授業・講座のSchoo（スクー）
「はじめて転職活動をする」「転職を考えているが、次の会社でも長く働いていきたいので失敗したくない」という方向けの「はじめての転職活動」シリーズの授業です。 この授業では、転職活動で失敗しないために、一番大事な「最初の準備」について学びます。 応募をして面接を受ける前に、一番最初にしなければならないことは「自分が何をしたいのか」「自分に何ができるのか」を知ること。 当たり前のことに見えますが、ここがよくわかっていないままに転職活動をして「失敗してしまった…」と後悔する人も多いです。 この授業を通して、自分にとって一番よい転職を実現する方法を学びましょう。 ▼授業のアジェンダ ・転職活動全体の流れ ・転職活動でよくある「失敗と後悔」 ・後悔しない転職活動のために大事なこと ・自分を知るためのワーク（Why) ・自分を知るためのワーク（Will＆Can)
人の能力は知識欲で決まる
Youtubeのキュー追加が自動で勝手に追加されてしまうようになった。解消法 2024-01-25 作成したキューの全ての動画が再生されたあと、自分ではキューに追加していないにもかかわらず、無関係な動画が勝手に追加される YouTubeのキューに勝手に動画が追加される 睡眠導入で使用している人にとっては非常に迷惑な仕様になった… しかし、ふと解消法を思いついた。キューの最後に「無音の長い時間の動画」があればいいじゃないか。 さっそく探してみるとありました。なんと12時間無音です！ 【youtube】無音12時間 これをこのように最後にセットすれば、うるさい音で起こされることはない＼(^o^)／... windwos11、windows10でフォルダが開かない、エクスプローラーが反応しない時の対処法【即時対応】 2023-11-07 結論、フリーソフトのエクスプローラーを使うべし！ 色々ネッ
WebデザインのためのjQuery入門 -フォーム入力チェックの実装-｜オンライン動画授業・講座のSchoo（スクー）
Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。最終回はフォームで入力漏れがあった場合に送信できない仕組みをjQueryで実装していきます。 ■ jQueryとは 皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。 jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。 ■ 事前準備
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
CSSはやっぱり便利！最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ
ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇していたテクニックも数多く利用できます。 アコーディオンやカルーセル、モーダルボックス、ポップオーバー、フリップ コンテンツなど、JavaScript無しのCSSで実装するテクニックを紹介します。
情報収集型のコンテンツを売り上げに結びつける方法 | SEOのホワイトハットジャパン
Yahooで検索して、いい商品を見つけた！ ググったことにより問題点が解決できた ニコニコ動画で動画が見たくなったのでURLを検索した インデックス状況を調べるためにsite:コマンドを使った 単純に検索エンジンで検索といっても、検索ユーザーの意図は様々です。 site:コマンドやlink:コマンドで運営しているサイトの状態を調べるような検索は特殊だとしても、その他の三つの検索意図は全く違います。 購入を考えており検索している人（取引型のクエリ） サイトに移動しようとして検索を使う人（案内型のクエリ） 調べ物をしている人（情報収集型のクエリ） その中で、企業サイトやECサイトで不足していることが多いのが、調べ物をしている人に向けた、情報収集型のコンテンツです。 Re:veryの情報収集型コンテンツでキラーコンテンツを作ろうという記事で、情報収集型のコンテンツを作る利点が解説されています。
コピペで実装できる、最新ウェブテクHTML/CSSコードスニペット40個まとめ
ますます加速するウェブデザインの最先端を体感できる、最新 Web テクニックを実装した、HTML/CSSコードスニペットをまとめています。 デザインと同時にまとめてコードを確認できるので、コピペで手軽に試してみることも可能です。コード共有コミュニティーサイト CodePen で話題となっている作品を中心に、ウェブデザインにスパイスを加えてくれる、ユニークなエフェクトが揃っています。 詳細は以下から。 コピペで実装できる、最新ウェブテクHTML/CSSコードスニペットまとめ 右下に表示されている「Return」をクリックすると、エフェクトが再読み込みされます。また各ソースはHTML、CSS、JSタブをクリックすることで確認することができます。 Fullscreen Image Layer Views 並べられたキーワードにマウスを重ねると、フルスクリーン画面で写真が切り替わります。 See
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインギャラリー・参考サイト集｜MUUUUU.ORG
Home | Corning Museum of Glass
フォントアイコンの使い方 (FontAwesome)
お問合せ｜EFO（エントリーフォーム最適化）ならエフトラEFO