属性セレクター - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
ナビゲーション・バー ≪ コンポーネント ≪ Bootstrap3日本語リファレンス
ナビゲーション・バー Navbar ウェブサイトやアプリケーションのナビゲーション・ヘッダーに最適なスタイル。 表示領域の幅が狭いモバイルなどには、メニューを非表示にし、メニュー表示を切り替えるためのボタンを表示する。メニューは縦に並べて表示する。 表示領域の幅が広いパソコンなどには、メニューを水平に表示する。 使い方 ポイントは６つ。 class属性に、navbar navbar-defaultを指定したnav要素を用意する。 nav要素内に、class属性にnavbar-headerを指定したdiv要素と、collapse navbar-collapseを指定したdiv要素を配置する。 2でnavbar-headerを指定したdiv要素内に、button要素とa要素を配置する。 3で配置したbutton要素のclass属性にnavbar-toggle collapsedを指定、dat
<input placeholder>－HTML5タグリファレンス
<input>要素のplaceholder属性で指定した値が、入力欄に初期値として表示されます。 例えば、テキストフィールドに初期値として、 「検索するキーワードを入力してください」などのヒントを示してユーザーの操作を補助することができます。 ■属性
後続兄弟結合子 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
border-collapse－スタイルシートリファレンス
border-collapseプロパティは、隣接するセルのボーダーを重ねて表示するか（collapse）、間隔をあけて表示するか（separate）を指定します。 ■値 スタイルシート部分は外部ファイル（sample.css）に記述。 table.sample1 {border: solid 1px #000000; border-collapse: collapse;} table.sample2 {border: solid 1px #000000; border-collapse: separate;} td.sample {border: solid 1px #ff0000} HTMLソース <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <table cl
スタイルシート［CSS］/テーブル/境界線の間隔を指定する - TAG index
指定方法 次のように、2タイプの指定方法があります。値は半角スペースで区切って記述します。 border-spacing: 5px; … ［上下左右］ を指定 border-spacing: 10px 5px; … ［左右］ と ［上下］ を指定
border-radius－CSS3リファレンス
border-radiusプロパティは、ボックスの４つのコーナーの角丸をまとめて指定する際に使用します。 それぞれの角丸コーナーは４分の１楕円になりますが、楕円の形状は、下図のように水平方向と垂直方向の２つの半径の組み合わせで決定されます。 border-radiusプロパティで角丸を指定する際には、それぞれのコーナーの楕円の形状を水平方向と垂直方向の半径のセットで表します。 指定するのは、ボーダーの外側の輪郭です。 水平方向と垂直方向の半径のセットは、スラッシュ（ / ）で区切ります。 スラッシュの前後に水平方向と垂直方向の半径の値を、左上・右上・右下・左下の順で指定します。 スラッシュ以降を省略した場合には、水平垂直ともに同じ値として解釈されます。 また、それぞれのコーナーの値は省略することができますが、その場合には以下のルールに基づいて解釈されます。 左下が省略された場合には、右上と
E:nth-of-type(n)－CSS3リファレンス
E:nth-of-type(n)は、疑似クラスの一種で、 n番目のその種類の要素にスタイルを適用する際に使用します。 E:nth-child(n)の場合には、 種類に関係なく要素を数えて、n番目にE要素が来た場合にスタイル適用の対象になります。 一方、E:nth-of-type(n)の場合には、途中で別の種類の要素が入る場合にはそれを数えずに、 指定した種類の要素のみを数えてスタイル適用の対象が決定されます。 nの部分には、整数・奇数を表すodd・偶数を表すeven・数式を指定することができます。 例えば、数式で奇数を指定する場合には2n+1、数式で偶数を指定する場合には2n+0となります。 ■セレクタの書式・スタイルを適用する対象 スタイルシート部分は外部ファイル（sample.css）に記述。 div.sample1, div.sample2 {background-color:#CC
A Visual Guide to CSS3 Flexbox Properties | DigitalOcean
Introduction The Flexbox Layout officially called CSS Flexible Box Layout Module is a new layout module in CSS3 made to improve the alignment, directions, and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on
サイトデザインの横幅の基準はこれだ！お役立ち記事まとめ＆事例9選で何ピクセルかもう迷わない | ウィルゲート
サイト制作をする時、Webサイトの横幅は何を基準にされていますか？ デザインをはじめる時にアプリケーションを開いてまず思う事、 「横幅何ピクセルにしようかな？」 地味に困ることありませんか？ ディレクターに、渡される指示書にはサイトの横幅の記載がない デザイナーにサイトの横幅を聞かれたけど決めてなかった！ 今回はそんな時に役立つサイトと、参考にするために実際にいくつかのサイトの幅を調べてまとめました。 デザインの横幅を決める際に参考になる記事 Webサイトの横幅を決める時、何を参考にすればいいかわからない！ そんなときにまず参考にしたいサイトはこちら。 デザインは8の倍数でできている｜1 pixel｜サイバーエージェント公式クリエイターズブログ Webサイトを作成する時には、いろいろな種類のサイズのボックスや余白などを作ると思います。その時に、多くのサイズに対応できるのが8の倍数であり、8
font-style－スタイルシートリファレンス
font-styleプロパティは、フォントのスタイルを指定する際に使用します。 指定できる値は、標準（normal）、イタリック体（italic）、斜体（oblique）です。 イタリック体(italic)と斜体（oblique）の違いについてですが、 イタリック体（italic）は斜めに傾けて筆記体調などにデザインされたものが多く、 斜体（oblique）はシンプルに斜めに傾けてデザインされたものが多いようです。 指定したフォントにイタリック体（italic）や斜体（oblique）がない場合には、 ブラウザが判断して、そのフォントの標準のものを斜めに傾けて表示します。 日本語フォントの場合、イタリック体（italic）や斜体（oblique）が用意されていることはほとんどなく、 標準のものを斜めに傾けて表示しているため、多くの場合イタリック体（italic）と斜体（oblique）のブ
3つだけ覚える「flexbox」の使い方 - Qiita
3行で説明、flexboxとは CSS3から導入されたfloatに変わる新しいレイアウト方法です。 伸びたり並んだりします。 俺、flexboxのプロパティ何回ググるんだろう問題 flexboxのプロパティめっちゃ多いですね。正直覚えきれませんし、覚えるつもりもなくなってきます。それに、別に複雑なことをやりたいわけではないですね。 具体的には、下記のようなことができれば十分なんです。 リキッド2カラムレイアウト スティッキーフッタ（最下部に吸い付くフッタ） この程度のものであれば、覚えるべきflexbox関連のCSSプロパティの数も絞れそうです。 覚えておくべき３つのプロパティ display: flex flex: 1 flex-direction: column これだけでわりとこなせます。以下で、実例をもとに説明します。 2カラムレイアウト さて、よくある2カラムレイアウトです。 で
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
jQuery UIのDraggableで快適なドラッグアンドドロップライフを！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。づやです。 さて、要素をドラッグアンドドロップさせてなんかしたいっていう要望は割とあると思うのですが、個人的には5年くらいその処理が必要とならず、あまり考えることがありませんでした。 そこで最近はどんな感じでできるのかなあ、と思っておりまして、ちょっと調べてみたことをまとめます。 5年前はprototype.jsとプラグインを利用していたのですが、今回はjQueryとプラグインで実装してみたいと思います。 便利なjQuery UIのDraggableを利用します と言っても、jQuery UIを利用すれば超簡単にできる模様なので、まずは作ってみました。 ※コードは大事な所だけ抜粋しています <html> <head> <!-- まずjQueryとjQuery UIを読み込みます。今回はCDNから読み込んでます --> <script src="//ajax.googleapis
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
grid-template-rows - CSS: カスケーディングスタイルシート | MDN
Bootstrap3日本語リファレンス
スタイルシート［CSS］/テーブル/表の境界線を指定する - TAG index
「nth-child」と「nth-of-type」の使い方と違い
