HTML&CSS divを使ったボックスのデザイン コピペで使えるHTML+CSS
divを使って様々なデザインのコンテンツボックスをCSSで実現します。角の丸いボックス、見出しだけが角丸のボックス。少し斜めにした見出し。入り込む見出し、アイコンが追加された見出し等、見やすく洗練されたデザインボックスを紹介します。
HTML&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要素について、入れ子構造の注意点も交えて解説。
HTML&CSS ol li 序列リスト コピペで使えるHTML+CSS
作業手順やランキングなど、順番のあるものなどを表示するためのol、li要素について解説。また、順序や開始番号、番号の種類についても詳しく実例を挙げて解説。
HTML&CSS dl dt dd 説明リスト コピペで使えるHTML+CSS
特定の語句に対応する説明文などを表記するdl、dd、dt要素について解説。
HTML&CSS del 削除されたテキスト 打消し線 コピペで使えるHTML+CSS
削除対象のテキストを示すdel要素、及びcite属性とdatetime属性について解説。
HTML&CSS blockquote 段落単位の引用 コピペで使えるHTML+CSS
他から文書を引用する場合に用いるblockquote要素についてcite属性と共に解説します。
HTML&CSS sub 下付きテキストで化学式表記 コピペで使えるHTML+CSS
化学式などを表記する際に用いるsub要素について解説します。
HTML&CSS sup 上付きテキストで数式表記 コピペで使えるHTML+CSS
数式における乗数などの表記する際に用いるsup要素についての解説。sup要素を用いて二次関数や三次関数の式を表示します。
HTML&CSS mark テキストのハイライト コピペで使えるHTML+CSS
文章の中で目立たせたいテキストをマークするmark要素についての解説。mark要素は単なるマークであって重要と言う意味では用いません。
HTML&CSS span 単語、フレーズ、文章のグループ化 コピペで使えるHTML+CSS
テキストの一部分をグループ化し、スタイルシートによる装飾をおこなう際に用いるspan要素の解説。
HTML&CSS div コンテンツのグループ化 コピペで使えるHTML+CSS
div要素は様々なレイアウトデザインにおいて用いられます。divの基本的な仕組みについて解説します。