CSS CSSのdisplayプロパティで要素の表示形式を制御し、レイアウトを柔軟に設定する方法をわかりやすく解説
displayプロパティは、要素の表示方法を決定するためのCSSプロパティです。このプロパティは、要素がブロック要素かインライン要素か、あるいは表示されるかどうかなどを指定するために使用されます。displayプロパティの値とその効果 block: 要素をブロック要素として表示します。横幅全体を占有します。 inlin...
display
CSS 
HTML&CSS スクロールするとdivが表示されるようにする コピペで使えるHTML+CSS+JavaScript
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSS CSSのみで縦型の棒グラフをつくる コピペで使えるHTML+CSS グラフ編
無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。
HTML&CSS デザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS
リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。Chrome、Edge、Opera、Firefoxで確認済。実際に実装する際はスマートフォン向けに@mediaを使って低解像度向けにwidthを狭く指定するか、又...
Cocoon Cocoonのブログカードでドメイン名を表示しない wordpress
WordPressテーマで最も人気のあるCocoonのブログカード（アドレスを記載（コピペ）するだけでリンク先についてのタイトルや紹介文が表示される機能）について、ドメイン名を表示させない方法について説明します。表示しないことで、レイアウトを少しスッキリさせることが出来るでしょう。通常は以下のように自サイトについても表...
HTML&CSS クリックでボックスの表示非表示アコーディオンをCSSのみで実装 コピペで使えるHTML+CSS
詳細や情報をクリックすることで表示する、いわゆる、スポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabelを使い、displayで切り替えを行います。Javascriptは使用しません。
HTML&CSS 続きを読む・閉じるアコーディオンをCSSのみで実装 コピペで使えるHTML+CSS AMP対応
[文章の続きを読む]、いわゆるスポイラー又はアコーディオンと呼ばれるものをCSSのみで実装します。inputとlabel、~セレクタを組み合わせる手法を取ります。JavaScriptを使用しない安全で安定的な方法です。
HTML&CSS 切り替えタブdivボックスをCSSのみで実現！ コピペで使えるHTML+CSS
divボックスの上部に複数のタブをつけ、タブをクリックすることで、直下のボックスが切り替わります。いわゆる、タブボックスをJavascriptを用いずに実装します。HTMLとCSSのみを調整することでタブの数を簡単に増減させることができます。
HTML&CSS プルダウンメニューをCSSのみで作る方法 コピペで使えるHTML+CSS
CSSのみでプルダウンメニュー、ドロップダウンメニューを実装します。li、ul要素、及び:hoverセレクタを使用して設計していきます。表示の切り替えにおいてはdisplay属性を使用します。各項目の見出しについて::beforeを用いて装飾します。
HTML&CSS CSSのみでクリックによりボックスが開くアニメーション コピペで使えるHTML+CSS
JavaScriptを用いず、CSSのみでアコーディオンアニメーションdivボックスを実現します。ページを読み込んだ際に開いた状態とならないよう、ラジオボタンとチェックボックスの２つをフラグとして利用します。CSSのみで実現できる限界点の一つ。
HTML&CSS divを水平方向に均等配置する コピペで使えるHTML+CSS
ここでは複数のdivを間隔をあけた上で水平方向に均等配置する方法を紹介します。水平方向に均等配置justify-contentを用いるdiv-box-1div-box-2div-box-3div-box-4スタイルシートで記述<div class="div-equal-box"> <div>div-box-1</div...
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 画像、写真の上に文字をのせる コピペで使えるHTML+CSS
取り込んだ画像、写真(img要素)の上に文字をのせます。写真の説明文や、リンク先の説明文などを記載します。画像の下の余白の消し方についても解説します。
HTML&CSS display ボックスの表示方法 コピペで使えるHTML+CSS
要素をどのように配置するか、displayを使って決定します。blockやinline、inline-block、そしてflex、そして表示をしないnone、具体的な事例をあげてdisplayによってどのように要素が配置されるかを例示します。
HTML&CSS cite(作品タイトル)を右下に表示 コピペで使えるHTML+CSS
引用文のために用意されたblockquote及び、qの2つの要素。その引用元の情報を記載する対象であるcite要素の表示位置を修正する簡単な方法について解説。