ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA
みなさんは、CSSを書くときに管理のしやすさを意識していますか？ CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイルが上書きされすぎていて、 !important せざるを得ない といった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。 CSS設
jQuery samples - Ajax時にローディングを表示
jQuery samples - Ajax時にローディングを表示 本エントリーは「to-R JavaScript Advent Calendar 2015」17日目のエントリー、今回のjQuery samplesは、Ajax時にローディングを表示する方法についての解説です。 単純に Ajax時にローディングを表示する方法から僅かに遅延させる方法、共通設定にする方法まで解説していきます。 CSS3でローディングを設定 まずは以下の様なHTML/CSSでローディングを作成しておきましょう。 <button id="ajax">ajax</button> <ul id="list"></ul> <div class="loading"> <div class="loading_icon"></div> </div> .is-hide{ display:none; } .loading{ posi
JSDoc使い方メモ - Qiita
Mozilla Rhino を使った方法でドキュメントを生成するので、 Java が必要。 インストール方法は割愛。 JSDoc 3 GitHub からダウンロードできる。 tags から v3.2.2 を選択して、 zip でダウンロードする。 zip を解凍したら、解凍後のフォルダにパスを通し、コマンドラインからヘルプを表示できることを確認する。 >jsdoc --help OPTIONS: -t, --template <value> The path to the template to use. Default: path/to/jsdoc/templates/default -c, --configure <value> The path to the configuration file. Default: path/to/jsdoc/conf.json -e, --enco
Switch(スイッチ)新作/発売予定ゲームソフトが一覧でわかる！最新発売日カレンダー - ゲームウィズ
・『逆転検事1&2 御剣セレクション』2024年9月6日(金)発売決定！ ・『FANTASIAN Neo Dimension』2024年冬発売決定！ ・『FAIRY TAIL２』今冬発売決定！ ・『スーパー マリオパーティ ジャンボリー』2024年10月17日(木)発売決定！ ・『ドンキーコング リターンズ HD』2025年1月16日(木)発売決定！ ・『マリオ＆ルイージRPG ブラザーシップ！』2024年11月7日(木)発売決定！ ・『ドラゴンクエストI＆II』2025年発売決定！ ・『かまいたちの夜×3』2024年9月19日(木)発売決定！ ・『Hello Kitty Island Adventure』2025年発売決定！ ・『ファントム・ブレイブ 幽霊船団と消えた英雄』2025年発売！
まるでシムシティのようなWeb地図ライブリラリ「eegeo.js」
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
ストレスフリーなGitHubのIssue生活 - クックパッド開発者ブログ
こんにちは。サービス開発部の丸山@h13i32maruです。 今日はGitHub/GHE(GitHub Enterprise)で快適なIssue生活をおくるために作ったJasperというツールと、それを実際にどうやって使っているかを紹介させていただきます。 ストレス GitHub/GHEを日々の業務の中心として使っていると、すごくたくさんのIssueやPull Request(以下PR)が流れてきます。 これらのIssueを処理する方法としては主に「メール」と「通知ページ(github.com/notifications)」の2つだと思います。 僕もこれらの方法を使っていたのですが、以下の点ですごく困っていました。 多すぎてメンションされたものやコメントしたものを見逃してしまう あとで見ようと思って、忘れる ブラウザのタブを大量に開いた状態になる 知らないところのIssueで議論が進んでい
失敗しないドメインの付け方・選び方とSEO対策との関係
ドメインの付け方選び方とSEO対策のお話を致します。ドメインを取得される方は是非この記事を参考に取得される事をお勧めします。 SEO対策においてドメインがどの様な効果 をもたらしているのか？分かり易く記載していますので、初心者の方も是非見て下さい。 タイトルと順番が異なりますがここでは 目次の様に説明をしていきます。 スポンサーリンク ドメインは一つのキーワードになる ドメインは一つのキーワードになります。検証しましたのでご確認下さい。 SEO対策において検索項目は必ず１つは必要になってきます。 付け過ぎるとペナルティを課せられますが、普通に付ける分だと気にする必要は無いです。少しここでドメインの呼び方の説明をさせて頂きます。 http： ***** . com ***** の部分は任意の部分になります。任意＝自分で決められるローマ字or日本語 第二レベルドメイン と呼びます。 .com
WordPress：カテゴリー箇所をカスタマイズ出来るプラグイン「Adjust Admin Categories」を公開しました - 着ぐるみ追い剥ぎペンギン
WordPress：カテゴリー箇所をカスタマイズ出来るプラグイン「Adjust Admin Categories」を公開しました 2014 11/16 追記-2014/10/31：現在は、カスタム投稿タイプ・カスタムタクソノミーにも対応しています。 WordPressの投稿画面でカテゴリーが選択できるメタボックスがあります。 このカテゴリー箇所ですが、選択したカテゴリーが一番上に来たりと、個人的に余計なお世話と感じる機能があります。 他にも、案件によっては「チェックボックス」を「ラジオボタン」に変更したい時があったりと、調整することが多いです。 ということで、投稿画面のカテゴリー箇所の調整がまとめて出来る、「Adjust Admin Categories」プラグイン作りました。 このプラグインを使うと、以下のようなことが出来るようになります。 1. 選択したカテゴリーが一番上に来るのを止め
Animista - On-Demand CSS Animations Library
AboutAnimista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea wa
ポップアップは悪か？ ポップアップを適切に使うためのポイント | UX MILK
ポップアップには、モーダルウィンドウやダイアログボックス、モーダルポップアップと複数の名称があります。しかし、どのような名称であれ、ポップアップはユーザビリティの面で問題があると言われています。平均的なWebサイトでのポップアップの表示頻度から判断すると、UIデザイナーと開発者はポップアップを好むようです。 しかし、ユーザーはポップアップをあまり好きではないようです。実際、ポップアップは大多数のユーザーやUI専門家には評判が悪いです。では、なぜポップアップはこんなにも広く利用されているのでしょうか。 弊社Justinmindで調査を実施することにしました。ユーザーの意見を詳細に調査し、社内のデザイナーから情報を聞き出しました。以下がポップアップについて、そして代わりの手段について発見したことです。 なぜポップアップが使われるのか？ ポップアップの基本に立ち戻ると、ポップアップの機能自体の魅
[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)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Concat scripts in order with Gulp
Atom Flight Manual
CSSやSVGで実装するローディングアニメーション - NxWorld
配色パターン見本40選：ベストな色の組み合わせ確認ツール
1クリックでSVGのデバッグが可能！SVGのパスをアウトラインに変換、アンカーやポイントやハンドルを表示 -xvg
Wordpress管理画面のテキストエリアが真っ白になった場合の対処法 | SONICMOOV LAB