WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「css」での検索

flexboxによる上下、左右センタリング(中央寄せ)

flexboxによる上下、左右センタリング(中央寄せ)

● flexboxによる左右のセンタリング

	justify-content: center;

● flexboxによる上下のセンタリング

	align-items: center;

● サンプル

https://pgmemo.tokyo/data/filedir/1168_1.html

左右の センタリング用に .flex_center
上下左右の センタリング用に .flex_middle_center
を作成しています。

<style type="text/css">
*{
	box-sizing: border-box;
}
.flex_middle_center{
	display: flex;
    justify-content: center;
	align-items: center;
}
.flex_center{
	display: flex;
    justify-content: center;
}

.my_button{
	width: 200px;
	height: 60px;
}
</style>

<div class="flex_middle_center" style="height:500px;border: 5px solid red;">
    <button class="my_button">
    	<div class="flex_center" style="padding-top: 7px;">
	        <p style="font-size: 12px; float: left;">追加します</p>
	        <p style="font-size: 36px; float: left; margin-top: -4px;">+</p>
		</div>
    </button>
</div>
添付ファイル1
No.1168
10/16 10:56

edit

添付ファイル

css

Google Chromeでローカルにあるcssファイルを直接編集し保存する

cssファイルを編集するときに Google Chromeのデベロッパーツールで値を変更した後、 エディターにその値を持って行きエディターを使って保存したりしてないでしょうか?

そんな面倒なことをしなくても Google Chrome 自体に .css を保存する機能があります。(最新のChromeでは使えなくなりました。代替方法は一番下)

以下の方法でGoogle Chromeを使ってローカルにあるcssファイルを直接編集して保存してみましょう。

● ローカルのフォルダをGoogleChromeに読み込ませる( Chrome Version 62 の場合 )

1. Google Chromeを立ち上げる

2. 右クリックし「検証」を選択する

デベロッパーツールのウィンドウが画面下表示されます

3. デベロッパーツール内メニューの「Sources」を選択する。

4. 右クリックして「Add folder to workspace」を選択する

5. 編集したいcssファイルが入っているフォルダを選択する

● 読み込んだローカルのフォルダ内の css をリンクさせる

6. 直接編集したい ローカルのhtmlファイル をgooglechromeで開く

7. googlechromeで直接編集したいファイルを右クリックし「Map to network resource...」を選択すると

現在ブラウザで開いている同盟のcssファイル一覧が表示されるのでその中からリンクさせたいファイルを選択する

これで準備はokです。 後は自由に編集しその後に「Command+s」(Macの場合)を押すと保存されリロードしてもその状態がリセットされず残っています。

● Finchを使用して変更したCSSの差分を抽出する

ローカルのファイルでは動作しませんので node.js や php などでローカルサーバを立てるといいでしょう。
https://chrome.google.com/webstore/detail/finch-developer-tools/phgdjnidddpccdkbedmfifceiljljgdo

参考: https://liginc.co.jp/web/tool/browser/38012

No.1164
05/24 11:30

edit

css
高速化

emmet LiveStyle を使って SCSS の変更を即座にブラウザに反映させる

web制作時に「cssを変更/保存」→「ブラウザのリロード」はとても面倒です。
そこでemmet LiveStyle を使って SCSS の変更を即座にブラウザに反映させましょう。
簡単に言うとオートリロード機能ですが、実際にはリロードは起こりません。リロードせずに即座に反映してくれます。
それ以外にも

  • SASS, SCSS(Compass) にも対応します。
  • Chromeのデベロッパーツール(Windows : F12  Mac : Command + Option + i )で変更した内容をエディタ側に反映させる

事ができます。

● 1. 必要なアプリ

  • Google Chrome
  • Sublime Text3

● 2. Chrome Extention「Emmet LiveStyle」のインストール

https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg?hl=ja
からインストールします。
インストール後 「ウィンドウ」→「拡張機能」から以下のようにセッティングします。

● 3. Sublime Text「Emmet LiveStyle」のインストール

Sublime Text から
「Command + Shift + p」→「install」→「live style」でLiveStyle をインストールします。

● 4. ファイルをそれぞれ開く

css(scss)ファイルをSublime Textで、htmlファイルをChromeで開きます。

● 5. Chromeの右上のアイコンから「Enable LiveStyle」

LiveStyleをon にしたら 即座に反映させる css(scss)ファイルを選びます。

以上で即座に反映させる環境ができます。

添付ファイル1
No.1031
05/09 12:10

edit

添付ファイル

css
scss

compass(SCSS)でretina,ロールオーバー対応のcssスプライトを自動生成するmixin

compassは各自インストールしておいてください。

● 1. config.rbの準備

compassを使うときはサイトの最上位フォルダに config.rb を置きますが、ここでは以下の様な設定を使用します。
以下のコードをファイル名 `config.rb` で htmlを制作する最上位フォルダに置いておきます

# パスの設定
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

# 書き出すCSSのスタイル  :expanded or :nested or :compact or :compressed
output_style = :expanded

# コメントを残すかどうか?
line_comments = false		

# 相対パスを使うかどうか?
relative_assets = true

# CSSスプライトのランダム文字列を削除
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.mv filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

● 2. mixin ファイルの準備

以下のコードをファイル名 `_sprite-css.scss` で scssフォルダに置いておきます

@mixin sprite-common($map, $pixel_raito:1) {
    margin: 0;
    padding: 0;
    background-image: $map;
    background-repeat: no-repeat;
    display: block;
    overflow:hidden;
    text-indent: 100%;
    white-space: nowrap;
    $sprite_image_path: sprite-path($map);
    $sprite_width: round(image-width($sprite_image_path) / $pixel_raito);
    $sprite_height: round(image-height($sprite_image_path) / $pixel_raito);
    @include background-size($sprite_width, $sprite_height);
}
@mixin sprite-item($map, $name, $pixel_raito:1) {
    width: image-width(sprite-file($map, $name)) / $pixel_raito;
    height: image-height(sprite-file($map, $name)) / $pixel_raito;
    $pos: sprite-position($map, $name);
    background-position: (nth($pos, 1) / $pixel_raito) (nth($pos, 2) / $pixel_raito);
}
@mixin sprite-css-hover($class_name, $dir_path) {
    $map: sprite-map($dir_path + '*.png');
    .#{$class_name} {
       background-image: $map;
    }
}
@mixin sprite-css($dir_path, $pixel_raito:1) {
    $map: sprite-map($dir_path + '*.png');
    $dir_name: sprite-map-name($map);
    .#{$dir_name} {
        @include sprite_common($map, $pixel_raito);
    }
    @each $name in sprite-names($map) {
        .#{$dir_name}_#{$name} {
            @include sprite_item($map, $name, $pixel_raito);
        }
    }
}

● 3. スプライトを生成する画像ファイルをセット

cssスプライトを作りたい画像ファイルをフォルダ `img/splites/navi/に置きます。 ロールオーバーさせたい画像ファイルををフォルダimg/splites/navi_over/` に置きます。
画像の例

├── sprites/
│   ├── navi/
│   │   ├── file1.png
│   │   ├── file2.png
│   │   ├── file3.png
│   ├── navi_over/
│   │   ├── file1_over.png
│   │   ├── file2_over.png
│   │   ├── file3_over.png

● 4. scssファイルの作成

好きな名前のscssファイル(ここでは `style.scss` とします。)を scss フォルダに作成して以下のように記述します
(2行だけです。これだけでCSSスプライト画像の生成とCSSコードの書き出しが行われます。)

@include sprite-css("sprites/navi/", 2);    // フォルダ名, 倍率
@include sprite-css-hover("navi", "sprites/navi_over/");    // クラス名, フォルダ名

● 5. compass から scss → css 変換の実行

compassを起動して scss→css 変換を実行します。 (codekitやsublimetextを使用することをおすすめします。)

● 6. HTMLを用意する

htmlは以下のように記述します

<link rel="stylesheet" href="./css/style.css">
<ul>
<li><a class="navi navi_file1" href="#">メニュー1</a></li>
<li><a class="navi navi_file2" href="#">メニュー2</a></li>
<li><a class="navi navi_file3" href="#">メニュー3</a></li>
</ul>

これでretina, ロールオーバー対応のメニューができます。 ちなみに生成されるCSS `style.css` は以下の様なものになります。

.navi {
  margin: 0;
  padding: 0;
  background-image: url('../img/sprites/navi.png');
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -moz-background-size: 150px, 150px;
  -o-background-size: 150px, 150px;
  -webkit-background-size: 150px, 150px;
  background-size: 150px, 150px;
}
.navi_file1 {
  width: 150px;
  height: 25px;
  background-position: 0 0;
}
.navi_file2 {
  width: 150px;
  height: 25px;
  background-position: 0 -25px;
}
.navi_file3 {
  width: 150px;
  height: 25px;
  background-position: 0 -50px;
}
.navi:hover {
  background-image: url('../img/sprites/navi_over.png');
}

参考: http://bit.ly/1WgkQtD

No.1030
05/11 10:03

edit

css
compass
scss

CSSによるDIV(ブロック)要素の横並び方法4種類

CSSによるDIV(ブロック)要素の横並び方法4種類

デモはこちら

1.floatによる横並び

注意点

  • 親要素 :after に 「content」「display」「clear」要素を追加する。
  • または親要素に clearfix を指定する

css

.div_float:after {
  content:'';
  display:table;
  clear:both;
}
.div_float .cell {
  border: 1px solid black;
  float: left;
}
</style>

html

<div class="div_float">
<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>
</div>

実際の表示

aaa
bbb
bbb
ccc

2.display: inline-blockによる横並び

「display: inline-block」は幅や高さなどを指定できるインライン要素です。

注意点

  • 親要素に font-size: 0; を指定してブロック間の隙間をなくす
  • 子要素に font-size: 12pt; を指定してフォントの大きさを指定する

css

  .div_inline_block{
    font-size: 0;
  }
  .div_inline_block .cell {
    font-size: 12pt;
    border: 1px solid green;
    display: inline-block;
  }

html

<div class="div_inline_block">
  <div class="cell">aaa</div>
  <div class="cell">bbb<br>bbb</div>
  <div class="cell">ccc</div>
</div>

実際の表示

aaa
bbb
bbb
ccc

3.「display:table;」「display:table-cell;」による横並び

注意点

  • 親要素に display:table; を指定(実はなくてもOK。)
  • 子要素に display:table-cell; を指定

css

  .div_table{
    display:table;
  }
  .div_table .cell {
    display: table-cell;
    border : 1px solid red;
  }

html

<div class="div_table">
  <div class="cell">aaa</div>
  <div class="cell">bbb<br>bbb</div>
  <div class="cell">ccc</div>
</div>

実際の表示

aaa
bbb
bbb
ccc

3.4.「display:flex;」による横並び

注意点

  • 親要素に「display: flex;」を設定
  • 子要素は自動的にflexアイテムになる
  • 古いブラウザ用にベンダープレフィックスが必要

css

    .div_flex{
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
    }
    .div_flex .cell {
      border : 1px solid purple;
    }

html

  <div class="div_flex">
    <div class="cell">aaa</div>
    <div class="cell">bbb<br>bbb</div>
    <div class="cell">ccc</div>
  </div>

実際の表示

<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>

 

参考 : http://flexboxin5.com 参考 : http://bit.ly/1VT62NP
参考 : http://bit.ly/1obD69i

添付ファイル1
No.1003
06/24 15:22

edit

添付ファイル

css

スマホサイト制作時に設定しておくと良いhtml, css, JavaScript 項目

スマホサイト制作時に設定しておくと良いhtml, css,js項目

1. リンクを押した時に押した領域に色をつける

a{
	-webkit-tap-highlight-color: rgba(200,200,200,0.2);	
}

2. 画像がはみ出すのを防ぐ

img{
	max-width: 100%;
	height: auto;
}

3. ボーダーを追加した時に width, height が増えるのを防ぐ

*{
	box-sizing: border-box;
}

4. スマホで見た時に横に移動(左右にグラグラ)するのを防ぐ

<body>
 <div class="wrapper">
  ここに記述していきます。
  </div>
</body>
.wrapper{
	overflow: hidden;
}

5. フォーム入力時に画面がズームするのを防ぐ

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

6. スマホでダブルタップしたときに拡大しないようにするCSS

html {
  touch-action: manipulation;
}

PWA対応 1. ホーム画面用のアイコンを追加する

192px x 192px のアイコンを作成し、以下のタグで指定します。

<link rel="apple-touch-icon" href="/touch-icon.png">

PWA対応 2. 起動までに表示する画像 Sprach Screen を追加する

512px x 512px のアイコン(splash-screen.png)を作成し以下の記述を追加します。

androidの場合 少なくとも以下の3つを manifest.json に 記述します

manifest.json

{
  "name": "my app",
  "background_color": "#000",
  "icons": "/splash-screen.png"
}

manifest.jsonicons の記述方法. https://developer.mozilla.org/ja/docs/Web/Manifest/icons

iphoneの場合

こちらのサイトから作成します https://progressier.com/pwa-icons-and-ios-splash-screen-generator

No.1001
02/01 11:02

edit

携帯スマホサイト
css

画像やCSS,JavaScriptにブラウザキャッシュを適用させる

画像やCSS,JavaScriptにブラウザキャッシュを適用させて表示を高速化する方法です。

ちなみにGoogle Adsenseでは以下の様なアラートが出ることがあります。

<b>ブラウザのキャッシュを活用する</b>

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。

設定方法は次の通り

.htaccess に以下の内容を記述してサイトのトップに設置

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week"
ExpiresByType image/jpeg "access 1 week"
ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType image/x-icon "access 1 week"
ExpiresByType text/css "access 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
</IfModule>

ただしキャッシュがきくということは、画像ファイルなどを差し替えた時にうまく変更が反映されない可能性があります。

強引にキャッシュを無効にして画像ファイルを差し替える

<img src="aaa.jpg?123456789" />

というふうに ?123456789 クエスチョンマークの後にランダムな数字などを追加します。

これでキャッシュを無効にすることが出来ます。



引用 : http://pcmanabu.com/alarm-of-google-adsense-cash/

No.904
07/14 14:06

edit

css
.htaccess

複数の画像を1枚にくっつけて保存し、サイト表示を高速化させる(CSS Sprite)

CSS sprite を使用するとサイトの表示が高速になります。

手法としては、複数の画像を1枚に画像にくっつけて保存(mysprite.png)し、表示するときに

position: absolute;
top: -210px; /* 上下にずらす */
top: 0px;        /* 左右にずらす */

でずらすというもの。

Google で使われているCSS Sprite の方法

html

<a class="menu_test" href="#"><img src="/css/mysprite.png"</a>

css

a.menu_test {
	display: block;
	overflow: hidden;
	position: relative;
	width : 50px;
	height : 20px;
}
	.menu_test img{
		position: absolute;
		top: -210px;
	}
	/* ロールオーバー */
	.menu_test img:hover{
		position: absolute;
		top: -230px;
	}

これだけ。簡単です。

zipで複数画像を圧縮して送るとCSS Sprite を作成してくれる。

http://ja.spritegen.website-performance.org/

Fireworks用エクステンション ■CSS Sprite Extension

http://web.r-studio.jp/fieworks/articles/introduce_csssprite_extension.html

No.745
10/25 09:19

edit

css

CSSチェックしエラー訂正するサイト【cleancss.com】

CSSをチェックしてエラー訂正をしてくれるサイト

http://www.cleancss.com/

No.439
06/16 16:24

edit

css

Windows版IEで画像をブロック要素にしてマージンをセットするとずれる

<img src="test.gif" style="display:block ;margin-top:10px; margin-bottom:10px;" />

みたいな指定をすると Windows版IE(IE6で確認)でずれることがある。

この場合は<div>を挟んでやるとなおる。

<div>
<img src="test.gif" style="display:block ;margin-top:10px; margin-bottom:10px;" />
</div>

(※↑ 実際は外部cssに記述します。)


No.431
06/16 16:25

edit

css

DIVの中を下揃えで配置する

DIVの中を下揃えで配置を行うには

.test{
	position:absolute;
	bottom: 0;
}

でOK!

例:

<HTML>
<BODY>
<H1 style="height:500px;border:solid 1px red;position:relative;">
<span style="position:absolute;bottom:0">テキストテキストテキストテキストテキストテキスト</span>
</H1>
</BODY>
</HTML>
添付ファイル1
shita.html ( 369.0 Bytes ) ダウンロード
No.427
04/21 10:32

edit

添付ファイル

css

css レイアウトで画像ボタンのメニューを作成する方法(css sprite)

よく使われる例。
http://kleza.blogspot.com/2009/04/css-sprite.html

背景画像だけを表示してテキストを隠すやり方。
「Dwyer Method」がおすすめです。
http://www.mezzoblue.com/tests/revised-image-replacement/
No.350
08/02 14:37

edit

css

構造のマークアップなしでフロートをクリアする方法「clearfix」

今更ですが。最近ではIE6,7,8に対応する必要がなくなってきたので clearfixのCSS記述は短くなっています。

● HTMLに記述

<div class="clearfix">
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ:カラム1</div>
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ:カラム2</div>
</div>

● clearfix(今のやり方 Windows IE6 , IE7 に対応する必要が無い場合)

.clearfix:after {content:''; display:table; clear:both;}

clearfix(昔のやり方。参考までに。)

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
No.288
12/15 14:30

edit

css

Windows IE を判別してJavaScriptやCSSを適用する

Windows IE を判別してIEだけにJavaScriptやCSSを適用するには以下のように条件分岐コメント(タグ)を使用します。

ただし

IE バージョン10以降(IE 10, 11)では条件分岐コメントは適用されません

なのでIE10 ,11 の場合はJavaScriptを使用して条件分岐する必要があります。

■ 条件分岐コメント使用例

指定のバージョン(IE バージョン8の場合に ie_only.css を読み込ませる)
<!--[if IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョン以上(IE バージョン8,9の場合に ie_only.css を読み込ませる)
<!--[if gte IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョン以下(IE バージョン8,7,6,5 の場合に ie_only.css を読み込ませる)
<!--[if lte IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョンより上(IE バージョン9の場合に ie_only.css を読み込ませる)
<!--[if gt IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョン未満(IEバージョン 7,6,5 の場合に ie_only.css を読み込ませる)
<!--[if lt IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

■JavaScript使用例(Windows IE 10,11 用)

// (IE バージョン5, 6, 7, 8, 9, 10, 11の場合に ie_only.css を読み込ませる)
<script type="text/javascript" >
if (navigator.userAgent.indexOf('msie') >= 0 || navigator.userAgent.indexOf('Trident') >= 0){
		var d = document;
		var link = d.createElement('link');
		link.href = 'ie_only.css';
		link.rel = 'stylesheet';
		link.type = 'text/css';
		var h = d.getElementsByTagName('head')[0];
		h.appendChild(link);	
}
</script>
No.35
04/09 14:06

edit

css
IE

複数のCSSスタイルを指定するには?

<p>タグにクラス「note」「emph」という複数のクラスを指定するには

<p class="note emph">テキスト</p>

という風に半角スペースで区切って記述する

No.5
06/16 16:36

edit

css

ブラウザごとの差異をリセットするCSSデフォルト(reset.css)の設定

ブラウザごとの表示の差をなくすために下記のようなリセットをするCSSを最初に読み込ませるといいです。(おすすめ順)
厳密には
・正規化するCSS(ブラウザの違いだけを揃えるCSS「normalize.css」「sanitize.css」)
・リセットするCSS(全てのスタイルを一旦リセットするCSS「eric meyer reset css 2.0」)
という違いがありますが、どれか1つを選んでhtmlの最初に読み込ませるという点では同じです。

● normalize.css(GitHubやBootstrap3で採用されています。)

https://necolas.github.io/normalize.css/

● Bootstrap4からは normalize.css をベースに reboot.css が採用されました

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss

● ress.css

https://github.com/filipelinhares/ress

● sanitize.css

http://10up.github.io/sanitize.css/

● eric meyer reset css 2.0

http://meyerweb.com/eric/tools/css/reset/

● modern-css-reset

モダンブラウザ向けの reset.css
https://github.com/hankchizljaw/modern-css-reset CDN

<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
No.4
12/04 17:58

edit

Bootstrap
検索エンジン
css