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

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

アプリで開く

はてなブックマーク

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

はてなブックマーク

トップへ戻る

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

    ノーベル賞

『WEB MANABU』

  • 人気
  • 新着
  • すべて
  • 基礎16. セレクタの種類(子孫セレクタ、子セレクタ、全称セレクタ)

    3 users

    web-manabu.com

    ネストと親子関係 親要素の直下の要素を「子」。入れ子内のすべての要素を「子孫」と言います。どの要素を「親」とするかで「子」「子孫」は変わります。今回のセレクタを理解する上で重要なことです。 親とその子孫という形で指定するセレクタです。親と子孫は半角スペースで区切ります。子孫はいくつでも指定できます。子孫セレクタは、idセレクタ、classセレクタ、要素セレクタなど他のセレクタと組み合わせて指定します。 下記の場合はclass名「sec」内のすべてのpタグが対象になります。 <div class="sec"> <p>子の段落です</p> <div> <p>子孫の段落です</p> <div> <p>子孫の段落です</p> </div> </div> </div> .sec p{ color: #00ffff; } 親と直下の要素で指定するセレクタです。親と子は「>」で区切ります。子は、いくつで

    • 学び
    • 2022/08/29 11:30
    • Font Awesome4.7 フォント一覧

      3 users

      web-manabu.com

      Font Awesomeバージョンアップに関して アイコンフォントのFontAwesomeのバージョンが2018年2月から4.7から5.0.6にアップグレードしました。最新バージョンでは、旧バージョンの各フォントのクラス名、unicodeに互換がないため、旧バージョンで利用したサイトでのメンテナンス用に4.7のフォント一覧を作成しました。 HTMLでの利用 公式サイトでは、iタグを利用していますが、spanなど他の要素でも利用ができます。利用する場合は、下記のコードのアイコンクラス名の部分を変更してください。 <!-- 下記のアイコンクラス名を変更 --> <i class="fa アイコンクラス名" aria-hidden="true"></i> <!-- 利用例 --> <i class="fa fa-address-book-o" aria-hidden="true"></i> CS

      • テクノロジー
      • 2021/09/10 20:06
      • font
      • WEB制作
      • お役立ち
      • 応用48. HTML5で追加された要素 - header,footer,main,nav, article,aside,section

        8 users

        web-manabu.com

        HTML5とは HTML5は2014年10月28日にW3Cから正式勧告されたXHTML1.0に続く新しいHTMLの仕様です。主に新しい要素と属性の追加やXHTML1.0の要素の一部意味づけの変更です。HTML5ではHTML以外にもデータベースやJavascriptに関する機能も追加されています。 HTML5で追加された要素について HTML5では、要素、属性の追加、意味付けの変更がされました。以前紹介したsmall要素、strong要素、em要素はHTML5で意味付けが変更された要素です。 今回はその中でもdivに変わる要素を紹介します。注意点として今回紹介する要素はInternet Explorerの9以上しか対応していません。 header要素(ヘッダー) ページの上部(ヘッダー部分)のブロックを定義する要素です。今まで div class=”header” としていた部分に使用します

        • テクノロジー
        • 2019/08/21 17:25
        • HTML5
        • HTML
        • Webデザイン
        • 基礎39. 5つの回り込み(float)の解除方法

          4 users

          web-manabu.com

          基礎39. 5つの回り込み(float)の解除方法 公開日:2016年07月12日 最終更新日:2022年08月10日 floatの解除・回避方法 floatを指定した要素は、親要素から認識されなくなります。 そのため子要素に幅、高さがあっても、親要素はそれを無視してしまい、背景が表示されなくなったり、次の要素が食い込んだりします。 これを回避する5つのテクニックを紹介します。 clear: both;を利用した解除 clearプロパティは、floatの回り込みを解除するプロパティです。 clearプロパティは、float指定した要素の次の要素に指定します。 float要素が連続している場合、一番最後のfloat要素の次の要素に指定します。 clearプロパティは、both以外にもfloat: left;のみを解除するclear: left;。float: right;のみを解除するcle

          • テクノロジー
          • 2018/04/03 12:06
          • css
          • *web制作
          • あとで読む
          • 11章. 画像のレスポンシブ

            4 users

            web-manabu.com

            画像を使う方法としてimg要素またはbackground-imageプロパティを使用します。 今回は、下記のファイルを利用して、3つのパターンで解説をしていきます。 使用画像 PCサイト:img要素 、スマホサイト:img要素の場合 PCサイト、スマホサイトともimg要素を使用する場合は、サイズの指定方法がポイントです。 width, heightプロパティの値「auto」をうまく使用していきます。 autoは、width, heightのどちらかにサイズ指定がある場合は、元画像のサイズから相対値で自動的に算出します。 /* 幅に対して、高さは自動調整の場合 */ img{ width: 200px; height: auto; } /* 高さに対して、幅は自動調整の場合 */ img{ width: auto; height: 200px; } width, heightどちらもauto

            • 世の中
            • 2017/08/27 10:44
            • あとで読む
            • 応用49. CSS3とベンダープレフィックス

              4 users

              web-manabu.com

              ベンダープレフィックスの種類 ベンダープレフィックスは、ブラウザの種類ごとに下記のキーワードを使います。 -webkit- … Google Chrome, Sfari, Opera -moz- … Firefox -ms- … Internet Explorer, Microsoft Edge ベンダープレフィックスの記述方法 下記は、border-radiusにベンダープレフィックスをつけた例です。 ※現在は、つける必要はありません。 .sec { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; } 下記は、線形グラデーションの場合です。 グラデーションは、background-imageプロパテ

              • テクノロジー
              • 2017/06/01 11:48
              • 基礎19. ID名、Class名の付け方と記法

                6 users

                web-manabu.com

                基礎19. ID名、Class名の付け方と記法 公開日:2016年05月22日 最終更新日:2022年08月10日 ID名、Class名の付け方の法則と種類 ID、Class名の付け方には法則があり、半角英数、-(ハイフン)、_(アンダースコア)の組み合わせで名前をつけます。 どんな名称でも使用できますが、どのような設定なのか、内容が判別しやすい名前にするのがよいでしょう。 大文字と小文字どちらでも利用できますが、基本は小文字で統一します。 プログラムでは、大文字、小文字は区別されるため、CSSでも大文字、小文字を使い分ける習慣をつけておくとよいと思います。 他にも、セレクタ名の先頭に数字を使わないようにしましょう。 JavaScriptなどプログラムは、変数名、関数名の先頭に数字を使うとエラーになるからです。 CSSでも、そのルールに慣れておくとプログラムを学習する時に役立ちます。 使用

                • テクノロジー
                • 2017/05/31 18:30
                • HTML
                • css
                • web制作

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

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

                『WEB MANABU』の新着エントリーを見る

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

                j次のブックマーク

                k前のブックマーク

                lあとで読む

                eコメント一覧を開く

                oページを開く

                はてなブックマーク

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

                公式Twitter

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

                はてなのサービス

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