css 基礎2

CSS

css変数一般的に、.rootにcssを宣言し、var()関数で値を呼び出すことが可能 :root { --color-warning: #E9C46A; --color-danger: #E76F51; --color-info: #264653; --color-success: #2A9D8F; --space-small: 0.25rem; --space-medium: 0.5rem; --space-lar…

2022-10-25

css 基礎文法

CSS

キーワード cssにて予め定義済みのキーワードは引用符なしで使用. div { color: red; display: flex; } 文字列 'または"で囲む. h2::before { content: "Title"; } 数値そのまま記述. URL url()を使用することでURLを指定することが可能. div { background-…

2022-10-20

css 基礎メモ

CSS

CSSをHTMLに適用させる方法 <link rel="stylesheet" href="style.css"> CSS記述方法 /* セレクタ {プロパティ: 値; } */ h1 {color: blue; background: yellow;} /* idセレクタを指定する場合 */ #idname {color: red;} /* タグでクラス属性を持つ属性を指定 */ p[class] {color: blue;} /* タグでク</link>…

2020-09-11

CSS 画像(img)にテキスト(p)を重ねたい時

CSS

前提 HTMLは要素が重なることはない。しかしCSSを用いて重ねることができる. 説明画像左側はpositionを全く使わない場合右側はpositionを使う場合、そして下記の場合で指定している要素の場所は、ページの左側上部を起点とするやり方 position: relative …

2020-09-11

CSS displayプロパティってなんやねん

CSS

参考 saruwakakun.com まあ上記を見るのが一番早いですが、、パッと見る用のメモ displayプロパティに対して設定する値は下記 inline 1.1. 要素を横に並べるが、要素の大きさギリギリまで平べったくなる block 2.1. 要素を縦に並べるが、要素は横いっぱいに…

2020-09-05

CSSでヘッダーを固定する際

CSS

HTML <header></header> が記述されていることを前提とする CSS header { position: fixed; top: 0; z-index: 10; } 解説基本的に上記3つはセットで覚えておけばよい。 z-indexはpositonとセットで使う必要がある。 z-indexは10が最大なので、一番上。0が一番下となる。パワ…

2020-06-23

margin / padding の違い

CSS

これよく迷った覚えがある. 概要説明 margin borderより外側の余白. border 境界線. noneに指定したとしても、borderは存在する. padding borderより内側の余白.

2020-06-22

css class

CSS

下記のように記述するとhtmlで記述されているclassを指定したことになる .sample { background-color: black; }

2020-02-20

はてなブログでコードに名前を挿入する

CSS

下記をコードの周りに挿入するだけ <div class="code-title" data-title="xxx.java"> /* code is written here */ </div>

2015-12-08

真ん中リスト構造 css

CSS Web

www.acky.info

2015-06-30

slicknav カスタマイズ

CSS Web jquery

簡単設置で見やすい！レスポンシブ対応メニューslicknavの使用方法 – web design cafeweb-design-cafe.com

2015-06-30

wordpress に slicknav　導入

CSS Wordpress jquery Web

WordPressテーマにサブメニューを折りたためる「ツリー式モバイルメニュー」を設置するカスタマイズ方法nelog.jp

2015-06-30

slicknav css

CSS Web jquery

jQuery レスポンシブメニュープラグイン SlickNav の使い方 | Web Design Leaves

2015-06-26

なんかフッターがコンテンツにかぶるとき

CSS Web

【CSS】助けて！footerが中に浮いてしまうの！コンテンツが少なくてもfooterを最下部に固定する方法 | WEBDECOweb-deco.org

2015-06-25

mixcloud レスポンシブ embed

CSS Web iframe

2015-06-17

異なる要素　リンク色　変更

Web CSS

方法１<a href="http://example.jp/" style="color: red;">色を変える部分</a> <a href="http://example.jp/"><span style="color: red;">色を変える部分</span>色を変えない部分</a> 方法２ <a class="example" href="http://example.jp/">色を変える部分</a> a.example:link { color: #0000ff; } a.example:visited { color: #000080; } a.example:hover { co…