はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    iPhone 17

『qiita.com』

  • 人気
  • 新着
  • すべて
  • IE11のサポートを切ると使えるようになるCSSとか一覧 - Qiita

    91 users

    qiita.com/RinoTsuka

    Windows7のサポートが終了し、今後は動作対象にIE11を含めないことも増えるでしょう。 IEをサポートしないことにより、使えるようになるHTMLとCSSをまとめました。 JavaScriptはきりがないので調べてません。 Can I Useをもとにまとめています。 分かりやすいように簡単な説明をつけています。厳密に正しい説明ではありません。 『使いやすさ』は利用頻度が高そうなものを勝手にレベル付しています。 この記事は2020年3月に作成したのものです。 HTML rel=“noopener" リンク元の文書へアクセスできないようにすることをブラウザーに指示します。 これを指定しないと、target=”_blank”利用時にJavaScriptで元のページにアクセス出来てしまうので脆弱性に繋がります。

    • テクノロジー
    • 2020/03/15 01:19
    • css
    • IE
    • HTML
    • javascript
    • あとで読む
    • ブラウザ
    • CSSの単位remの正しい使い方 - Qiita

      81 users

      qiita.com

      CSS Advent Calendar 201918日目に空きがあったので埋めます。 最終日も私です。 QiitaやGoogleでremと検索すると、間違った使い方をしている記事がたくさん出てきます。 remはroot emの略! って分かってるならRootを潰すな! rootはユーザー設定により変動するかもしれないものです。 ユーザビリティを考えるなら、きちんとユーザーの設定に対応出来るようにしましょう。 よく見る間違った使い方 間違った使い方の言い分 モダンブラウザの初期値は16pxです。 だからrootを62.5%(10px)にすれば1rem = 10pxで分かりやすいです。 15pxは1.5remと書きましょう! [疑問] 全部pxじゃだめなの? 1rem = 10pxより全部pxで書くほう分かりやすい。 15pxと書いたほうが楽だし。 なぜこんな変な書き方が流行ったのでしょうか?

      • テクノロジー
      • 2019/12/26 11:14
      • css
      • あとで読む
      • アクセシビリティ
      • font-familyについて本気で考えてみた - Qiita

        337 users

        qiita.com/RinoTsuka

        今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザーの環境を考えなければならない節目の時です。 そこでいつもコピペで済ましているfont-familyについて1から考え直してみます。 全部読もうとしている人はスクロールバーを見てから考えてください。 結果 コピペユーザーのために先に結果を記載します。 ブログ等に転載する場合はこのページのURLぐらい貼ってください。 @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Original Yu Gothic"; src: local("Y

        • テクノロジー
        • 2019/12/25 09:51
        • css
        • font
        • フォント
        • あとで読む
        • font-family
        • ブラウザ最新動向
        • *Web制作
        • qiita
        • ui
        • web制作
        • 色々あるHTMLのmetaタグなど一覧 - Qiita

          3 users

          qiita.com/RinoTsuka

          <!doctype html> <html lang="ja" dir="ltr"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> <meta charset="utf-8"> <title>タイトル</title> <link rel="stylesheet" href="/css/style.css"> <!-- safari --> <link rel="mask-icon" color="{{ カラーコード }}" href="/mask-icon.svg"> <!-- 一般的なタグ --> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <meta name="descriptio

          • テクノロジー
          • 2018/12/18 15:45
          • IllustratorからhtmlにSVGアイコンを表示するまでの流れ - Qiita

            16 users

            qiita.com/RinoTsuka

            Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? イラストレーターでアイコンを作成し、svgタグで出力するための流れを書いてみました。 今回のサンプルでは点数を5つ星で表示するようなものを作ります。 記事は長いですが、解説が多いだけです(頑張って画像も付けました)。実際に私が書くと5分もかからず終わるレベルです。 svg周りはブラウザによって挙動が異なるので注意しながら制作してください。(今回ハマりました) Illustrator Illustratorが無い方は(Illustratorは以上)まで飛んでください。 新規ドキュメント サイズなどは後で調整するので適当で構いません。 We

            • テクノロジー
            • 2017/06/28 14:38
            • SVG
            • illustrator
            • webデザイン
            • あとで読む
            • https://qiita.com/RinoTsuka/items/1a86fbb719e0a76a3784

              9 users

              qiita.com

              • 世の中
              • 2017/05/08 09:09
              • font
              • css
              • design
              • web
              • CSS3で縦書きにする方法と挙動 - Qiita

                35 users

                qiita.com/RinoTsuka

                Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

                • テクノロジー
                • 2017/03/08 20:57
                • 縦書き
                • CSS
                • text
                • css3
                • web
                • 日本語
                • HTML
                • デザイン
                • design
                • あとで読む
                • font-familyに游明朝を使用してはいけない理由 - Qiita

                  13 users

                  qiita.com/RinoTsuka

                  「Chromeでも読みやすい游ゴシックを指定する方法 」にご興味を示していただいた方、お待たせしました。 游明朝を基準としたfont-familyを指定するにはどうしたら良いかの記事になります。 Macでは問題ないのでWindowsについての内容になります。 先に結論 ゴシック体のようにバグを回避しつつも適用させる。 そんなこと明朝体では出来ません。 游明朝で問題になるのはfont-weight: 500;なので、コレを絶対に使用しないというコーディングルールがあれば、通常の記述で問題無いでしょう。(フレームワーク等で指定されているものは直しましょう) よって游明朝を指定する場合は下記のようになります。 ただし、IEのバグが回避できないので、個人的にはどうしても明朝体を使用したい場合は素直にWebフォントか画像を使うのがベストだと思います。 游明朝がダメな理由 游ゴシックとは違い、Chro

                  • テクノロジー
                  • 2017/01/26 22:15
                  • フォント
                  • font
                  • css
                  • webdesign
                  • WEB制作
                  • Webデザイン
                  • 游明朝
                  • スマホで触れている間だけhoverする - Qiita

                    7 users

                    qiita.com/RinoTsuka

                    新たにしっかり書きましたので、長いですが下記記事を御覧ください。 スマホでhoverの動きをSassで矯正させるmixin CSSにhoverを与えたとき、スマホではタップして指(指とは限らない)が離れるときに発火します。 感覚的にはタップした瞬間から離れるときまでの間がhoverであって欲しい。 ググるとjQueryのタッチイベントで、触れた瞬間から離れるまでの間にクラスを与えるという方法で回避しているようです。hoverを指定したものはPCではhover、スマホではタッチイベントになります。 個人的な考えですが、CSSで解決出来るものはCSSで解決したいです。 スマホに擬似クラスhoverを与えてはいけません。 指が離れてから発火してしまうので、スマホはtouchイベント、PCは:hoverなコードを書きます。 コード $('a, input[type="button"], input

                    • テクノロジー
                    • 2016/11/16 09:08
                    • sass
                    • css
                    • mobile
                    • jquery
                    • ui
                    • Bootstrap4用 游ゴシックfont-family - Qiita

                      4 users

                      qiita.com/RinoTsuka

                      大変嬉しい反響を頂きましたので、2020年まで使えるfont-familyのベストプラクティスをBootstrap4に組み込むのが面倒くさいあなたに向けて作りました。 おまけでMaterial Design Liteも用意しました。 ゴシック体のみのコードとなります。 明朝体はBootstrapの初期値では指定されていないので、明朝体は記述しません。 等幅フォントはお好みで調整してください。 Bootstrap3は私も面倒くさいので、作る予定はありません。 Bootstrapの日本語化 Bootstrap4に「2020年まで使えるfont-familyのベストプラクティス」で作ったfont-familyを適用させます。 製作時のバージョンが [ 4.0.0-alpha.4 ] になります。適時読み替えてください。 動作確認済みバージョン 4.0.0-alpha.4 4.0.0-alpha.

                      • テクノロジー
                      • 2016/10/22 18:35
                      • font
                      • unclassified
                      • 2020年まで使えるfont-familyおすすめゴシック体 - Qiita

                        85 users

                        qiita.com/RinoTsuka

                        新しい記事書きました。【font-familyについて本気で考えてみた】 「Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。 本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。 2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。 目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。 -- 追記 -- Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定にヒン

                        • テクノロジー
                        • 2016/08/04 11:37
                        • CSS
                        • font
                        • font-family
                        • フォント
                        • 游ゴシック
                        • chrome
                        • web制作
                        • windows
                        • html5
                        • Chromeでも読みやすい游ゴシックを指定する方法 - Qiita

                          63 users

                          qiita.com/RinoTsuka

                          Windows8.1から搭載された「游ゴシック」ですが、ChromeとOperaで薄く掠れて見難くなってしまいます。 一般的にはbodyにfont-weight: 500;を与えて回避している方が多いですが、フレームワークなどを使用した場合、font-weight100~400を指定しているコンポーネントの数だけfont-weight: 500;と指定しなければならなく、あまり現実的ではありません。 「游ゴシックについて」と「ベストなfont-family」がごちゃ混ぜになって記事が見難くなってしまいました。より詳細に書き込んだため記事を分割しました。 ストックされているかたや、ブックマークされている方にはご迷惑おかけします。 この記事はタイトルの通り游ゴシックのみを扱います。 当記事を踏まえたゴシック体のfont-familyの指定は「2020年まで使えるはずだったfont-family

                          • テクノロジー
                          • 2016/07/22 14:52
                          • 游ゴシック
                          • font
                          • css
                          • font-family
                          • フォント
                          • @font-face
                          • windows
                          • Chrome

                          このページはまだ
                          ブックマークされていません

                          このページを最初にブックマークしてみませんか?

                          『qiita.com』の新着エントリーを見る

                          キーボードショートカット一覧

                          j次のブックマーク

                          k前のブックマーク

                          lあとで読む

                          eコメント一覧を開く

                          oページを開く

                          はてなブックマーク

                          • 総合
                          • 一般
                          • 世の中
                          • 政治と経済
                          • 暮らし
                          • 学び
                          • テクノロジー
                          • エンタメ
                          • アニメとゲーム
                          • おもしろ
                          • アプリ・拡張機能
                          • 開発ブログ
                          • ヘルプ
                          • お問い合わせ
                          • ガイドライン
                          • 利用規約
                          • プライバシーポリシー
                          • 利用者情報の外部送信について
                          • ガイドライン
                          • 利用規約
                          • プライバシーポリシー
                          • 利用者情報の外部送信について

                          公式Twitter

                          • 公式アカウント
                          • ホットエントリー

                          はてなのサービス

                          • はてなブログ
                          • はてなブログPro
                          • 人力検索はてな
                          • はてなブログ タグ
                          • はてなニュース
                          • ソレドコ
                          • App Storeからダウンロード
                          • Google Playで手に入れよう
                          Copyright © 2005-2025 Hatena. All Rights Reserved.
                          設定を変更しましたx