' P '

whatever I will forget

CSS

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…

css 基礎文法

CSS

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

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>…

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

CSS

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

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

CSS

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

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

CSS

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

margin / padding の違い

CSS

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

css class

CSS

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

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

CSS

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

真ん中 リスト構造 css

www.acky.info

slicknav カスタマイズ

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

wordpress に slicknav 導入

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

slicknav css

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

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

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

mixcloud レスポンシブ embed

<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 100px;"></div>

異なる要素 リンク色 変更

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

jquery タブ表示

jQueryでタブを作る方法あれこれ(短いコードで済むやつ・デザイン変更しやすいやつ) - Qiitaqiita.com

画像上に文字列を重ねる

【CSS】Positionのrelativeとabsoluteを用いて、画像に文字列を重ねる方法masterpeace21.comgazおう

CSS 要素を左右上下 真ん中にする

【CSS】要素を上下左右に中央寄せする色々な方法ideahacker.net

縦ナビゲーション

http://www.devinrolsen.com/pure-css-vertical-menu/

画像 リサイズ

【CSS】スタイルシートで画像を縦横比そのままにリサイズする方法。 【CSS】スタイルシートで画像を縦横比そのままにリサイズする方法。

ページ 高さ

ページ内容が少なくても height:100%; の高さの CSSレイアウト を作る - Eiji

画像

絶対はみ出さない画像!自動でサイズ調節するスタイルシート | Big Bang 絶対はみ出さない画像!自動でサイズ調節するスタイルシート | Big Bang

footer

コンテンツの高さが足らなくてもフッターを最下部の底辺に! | たねっぱ! コンテンツの高さが足らなくてもフッターを最下部の底辺に! | たねっぱ!

CSS

basic_whiteテンプレート 大きな画像のヘッダーデザイン - FC2ブログテンプレート改造圏 basic_whiteテンプレート 大きな画像のヘッダーデザイン - FC2ブログテンプレート改造圏