HTML&CSSリファレンス

スポンサーリンク
HTML&CSSリファレンス

画像にカーソルを合わせると少し拡大する方法 コピペで使えるHTML+CSS

画像、img要素にマウスカーソルを合わせると、画像が少し拡大して表示されます。カーソルが当たっていることを閲覧者に知らせることができる。absoluteを使用するため、高さについて注意を要します。 画像imgを少し拡大 スタイルシートで記述 <div class="over-animation"><img csrc="...
HTML&CSSリファレンス

縦と横に中央寄せ(中央配置)する方法 コピペで使えるHTML+CSS

インライン要素、ブロックレベル要素それぞれについての横方向と縦方向の中央配置の実装方法。margin:auto;やtransform、translateを利用した汎用性の高い実装方法を解説します。vertical-alignやcenter要素は使用しません。
HTML&CSSリファレンス

transform 要素を変形するコピペで使えるHTML+CSS

要素を変形させるtransformについて、拡大縮小、移動、回転、傾斜など具体例を挙げて解説します。回転するrotateは::beforeセレクターと組み合わせて見出しのアイコンに使用するなどの用途もあり要注意事項です。
スポンサーリンク
HTML&CSSリファレンス

overflow ボックスのはみだし文字 コピペで使えるHTML+CSS

overflowを使ってdivボックスなどからはみ出す文字を処理します。どのようにしてスクロールバー表示とするか、はみ出し分を非表示にするかを具体例を挙げて解説します。
HTML&CSSリファレンス

@keyframes規則 アニメーション コピペで使えるHTML+CSS

@keyframes規則 アニメーションの実現CSS @keyframes 目的 htmlについてアニメーションを実現します 使用 すべて アニメーションします <div class="animation-div">アニメーションします</div> @keyframes keyanime{ 0% { height:0p...
HTML&CSSリファレンス

picture source レスポンシブイメージ コピペで使えるHTML+CSS

画面解像度に応じて画像を切り替えるレスポンシブイメージをHTML5.1から実装されたpicture要素とsource要素によって実現します。その使い方と実際の挙動を、JAVAのif文に例えながら解説します。便利な新しい機能をマスターしてください。
HTML&CSSリファレンス

@import規則 外部スタイルシート読み込み コピペで使えるHTML+CSS

@import規則 外部スタイルシートの読み込み CSS @import 目的 外部スタイルシート(.css)を読み込む。先頭に記述するが@charsetの後。 @import url( 組合せ @mediaタイプと組合せ @import url(date.css) print, tv; /* 印刷、テレビ出力時につい...
HTML&CSSリファレンス

@important規則 最優先適用 コピペで使えるHTML+CSS

@important規則 最優先に適用するCSS @important 目的 指定したスタイルシートについて最優先で適用する。末尾に!importantを付けて使用する。 使用 すべて body{ color:#ff0000 !important; } div{ color:#000000; } !importantが...
HTML&CSSリファレンス

@page規則 印刷ページ コピペで使えるHTML+CSS

@page規則 印刷時のページ設定CSS @page 目的 印刷時に適用するスタイルです 使用 すべて @page { margin : 20px;} /* 印刷した際、20pxのmarginがつく */ @media print を推奨したい
HTML&CSSリファレンス

@media規則 環境による切り替え コピペで使えるHTML+CSS

@media規則 メディアによる切り替えCSS @media 目的 ディスプレイ、印刷での切り替え、解像度での切り替えなどを実現します。 使用 すべて background-colorが切り替わります <div class="box-top">background-colorが切り替わります</div> @media ...
HTML&CSSリファレンス

@charset規則 文字コードの指定 コピペで使えるHTML+CSS

@charset規則 外部スタイルシートの文字コード指定CSS @charset 目的 外部のスタイルシートを読み込む際に、文字コードを指定します。スタイルシートの先頭に記述します。 @charset "utf-8"; 指定 utf-8、utf-16、utf-32、JIS、Shift_JIS、euc-jpなどを指定でき...
HTML&CSSリファレンス

文字を中央に寄せる方法 | HTML+CSS

HTMLにおいて文字を中央に表示するいくつかの方法を紹介。 文字の中央配置 文字を中央に配置 文字を中央に配置する <p style="text-align: center;">文字を中央に配置する</p> text-align: centerで指定すればよい。子("文字を中央に配置する")に当たる文字を中央に配置する...
HTML&CSSリファレンス

CSS ONLY read more, spoiler and accordion , HTML+CSS

Achieve "read more" with just CSS and HTML. The method introduced does not use JavaScript. You will be able to freely switch the display of articles, images, and various layouts.
HTML&CSSリファレンス

divを使ったボックスのデザイン コピペで使えるHTML+CSS

divを使って様々なデザインのコンテンツボックスをCSSで実現します。角の丸いボックス、見出しだけが角丸のボックス。少し斜めにした見出し。入り込む見出し、アイコンが追加された見出し等、見やすく洗練されたデザインボックスを紹介します。
HTML&CSSリファレンス

float ボックスの回り込み コピペで使えるHTML+CSS

画像img要素やボックスの回り込みについて指定するfloatプロパティのleft、rightなどについて実例をあげながら解説します。
HTML&CSSリファレンス

画像、写真の上に文字をのせる コピペで使えるHTML+CSS

取り込んだ画像、写真(img要素)の上に文字をのせます。写真の説明文や、リンク先の説明文などを記載します。画像の下の余白の消し方についても解説します。