HTML&CSS @keyframes規則 アニメーション コピペで使えるHTML+CSS
@keyframes規則アニメーションの実現CSS@keyframes目的htmlについてアニメーションを実現します使用すべてアニメーションします<div class="animation-div">アニメーションします</div>@keyframes keyanime{ 0% { height:0px; backgr...
プログラミング
HTML&CSS 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がなければ、divのco...
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 (min-widt...
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要素)の上に文字をのせます。写真の説明文や、リンク先の説明文などを記載します。画像の下の余白の消し方についても解説します。
HTML&CSS display ボックスの表示方法 コピペで使えるHTML+CSS
要素をどのように配置するか、displayを使って決定します。blockやinline、inline-block、そしてflex、そして表示をしないnone、具体的な事例をあげてdisplayによってどのように要素が配置されるかを例示します。
HTML&CSS figure要素とfigcaption要素 コピペで使えるHTML+CSS
写真や図表などのまとまりを表すfigure要素。そしてそのキャプションを表すfigcaption要素について解説。画像上にテキストを表示する際などに用いる。
HTML&CSS clear ボックスの回り込みの解除 コピペで使えるHTML+CSS
floatによって回り込みが指定された画像、ボックスについて、回り込みを解除するclearプロパティについて解説します。
HTML&CSS ul li 順不同リスト コピペで使えるHTML+CSS
箇条書きや条件などの順不同のリストを表記するためのul、li要素について、入れ子構造の注意点も交えて解説。