ミドリ黄のプログラミングメモノート

主にUnity(C#)を中心としたプログラムの備忘録

CSS

CSS スクロールするテーブルの作成

CSS

/*親要素の作成*/ div.scrollTable { width: 80%; overflow: hidden; overflow-x: scroll; border: 2px solid black; } /*テーブル*/ div.scrollTable table { background-color: red; } /*tdとth*/ div.scrollTable table td, div.scrollTable table th { b…

CSS 画像付きリンクボタンの作成

/*親となる要素*/ div.linkButton { /*幅が300pxで高さ100px*/ width: 300px; height: 100px; /*幅が8ピクセルで角を少し丸める*/ border: 5px solid black; border-radius: 15px; /*背景色は白*/ background-color: white; /*子要素を上下左右中央の横並び…

CSS タイトル付きボックスの作成

CSS

div.titleBox1 { background-color: moccasin; /*枠線*/ border: dotted; border-color: orange; /*余白*/ margin-top: 1.5em; } span.titleBox1-title { background-color: orange; /*枠線について*/ border: 3px solid black; border-radius: 0.4em; /*位…

CSS 小見出しグループの作成

CSS

/*見出し1*/ .mh1 { background-color: antiquewhite; } /*タイトル*/ .mh1 > .title { font-size: 1.2rem; border-left: 0.5rem solid red; border-bottom: 0.1rem solid black; } /*中身*/ .mh1 > .description{ padding-left: 1.5rem; } CSSファイル HTML…

CSS 引用デザインの作成

CSS

導入 はてなブログでは引用デザインがデフォルトで用意されています。 デフォルトの引用デザイン 今回はCSSでオリジナルの引用デザインを作成していきます。 Font Awesomeの使用 引用符に利用されている全角のダブルクォーテーションは用キーボードで全角「‟…

CSS マウスオーバーの処理(hover)

CSS

/*マウスが乗っていないときの設定*/ .test{ background-color: white; color: black; } /*マウスカーソルが乗ったときに*/ .test:hover { background-color: black; color: white; } 概要 CSSでマウスオーバーの処理を行う際は、 hover という機能を使うこ…

CSS beforeとafter

CSS

CSSにおけるbeforeとafterの解説とその使用例。

HTML CSS クラスごとのスタイル指定

.test{ color: #ff0000 } div.divTest{ color: #5BFF7F; } HTMLでCSSを利用する方法 クラスごとのスタイル指定 タグを指定しない場合 指定したタグ内でのみ使用するクラス HTMLでCSSを利用する方法 <link rel="stylesheet" type="text/css" href="CSSのファイルパス"> と宣言するとHTMLでCSSのデザインを適用させることができ</link>…

CSSでのクラスの利用

CSSでのクラス利用について、タグ指定でのクラス指定など。