ブクマしとくと役に立つCSS/Saas関連リンク集

desing707 / Pixabay

WEB制作で役にたつCSS/Saas関連のリンク・簡易ソースコードをまとめました

 

この記事の目次

スポンサーリンク

ソースコード

CSS|半角英数字の文字列を折り返す方法

p {
word-break: break-all;
}

CSS|「iPhone6 Plus」を判別

@media screen and (-webkit-device-pixel-ratio:3) {
body {
color: #fff;
background: #333;
}
}

CSS|「iPhone6 Plus」の縦向き(portrait)/横向き(landscape)を判別

@media screen and (-webkit-device-pixel-ratio:3) and (orientation: portrait) {
body {
color: #fff;
background: #333;
}
}
@media screen and (-webkit-device-pixel-ratio:3) and (orientation: landscape) {
body {
color: #000;
background: #ccc;
}
}

 

リンク

CSS|メディアクエリーの基本

http://sole-color-blog.com/blog/php/71/

基本中のキホン

CSS|マウスオーバー(マウスホバー)でエフェクト いろいろ

https://skygold.jp/web/3390.html

CSSのみでマウスオーバー時のエフェクトをいろいろかけられる!

CSS|メディアクエリーでiPhone全機種を判定

メディアクエリーで、iPhone全機種の画面サイズに対応する記述

http://www.entereal.co.jp/blog/entry_media-queries-for-iOS-devices.html

ツール|マークアップエディタ ATOM 便利カスタマイズ

https://tech-camp.in/note/1079/↓便利パッケージ①http://qiita.com/snowsunny/items/f40c3291a580f3215797↓便利パッケージ②http://commte.net/blog/archives/6490

CSS|領域内トリミング表示/縮小表示

CSSだけで画像トリミングできたよ

CSS|FONT|GoogleのWEBフォント、フォントファミリーの記述の仕方

一応、GoogleのWEBフォントを使う前提
https://googlefonts.github.io/japanese/

それ以外は、ヒラギノ、遊明朝を使う予定。

■Font-familyの記述の仕方
http://sole-color-blog.com/blog/design/246/

CSS|table関連の中央配置Tips

http://webdesign.practice.jp/display-table

table関連で中央配置は強力に作用する

CSS|アニメーションするCSSの定義一式(確認プレビューあり)

https://daneden.github.io/animate.css/

こちらのページでプルダウンでセレクトすると、アニメーションの動作が確認できる

CSS|Google Font(ウェブフォント)の実装方法

https://googlefonts.github.io/japanese/

本家、概要説明

https://fonts.google.com/

本家、フォント一覧

https://fonts.google.com/earlyaccess

★本家、インクルード実装コード

http://ozpa-h4.com/2012/12/26/google-web-fonts/

実装|1バイト語圏のフォントなら、結構いろいろ選べる?

http://brian.hatenablog.jp/entry/how-to-set-web-fonts

実装|こちらも色々

CSS|ヘッダーに直接記述


<style type=”text/css”>
<!–
CSSの指定を記述
–>
</style>


http://css.uka-p.com/basic/header.html

時々しか使わないからチョイチョイ忘れる

CSS|疑似クラス:first-child、last-child で連続指定の定義の中に一部だけ別の指定ができる

http://www.vanfu-vts.jp/blog/2014/09/first-child_last-child/

listでボタンを作ったりするときには有効

 

CSS|calc( ) で計算式でパラメーター指定可能に

https://w3g.jp/blog/css3_calc_function

レスポンシブレイアウトに利用

http://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html

中央配置やサイズ指定

https://developer.mozilla.org/ja/docs/Web/CSS/calc

フォーム要素を領域いっぱに表示可能

https://hyper-text.org/archives/2016/05/css_calc_function.shtml

固定ブロックと可変ブロック

CSS|CSSメソッドの書き方

https://techacademy.jp/magazine/9470

とてもシンプルでわかりやすかった

CSS|CSSでドロップシャドウや光彩指定

http://micomura.hatenablog.jp/entry/2012/02/08/225523

何度使ってもなかなか覚えられないからメモ

CSS|色見本(16進と名前指定)

https://hogehoge.tk/webdev/color/

いざという時のためのカラーチャート

CSS|カドマル指定

http://www.css-lecture.com/log/css3/css3-border-radius.html

頻繁に使う

CSS|明るさ、ぼかし、セピア、グレースケールなどをCSSだけで行う

http://migo-media.com/css-filter/

a:hoverの時にはかなり有効にエフェクトできる

CSS|floatを使った時に親要素の領域が子要素まで拡がらない時の対応

http://mawatari.jp/archives/if-child-element-was-float-to-automatically-extend-parent-element

この問題にしょっちゅう出くわす

CSS|画面サイズに合わせて改行をなくす

http://wp-kappa.com/how-to-disable-br-tags-inside-div-by-css/

メディアクエリーを使わないとできないけど、やっぱりこういうのを使うシチュエーションは多数あり

CSS|floatの詳しい解説

http://coliss.com/articles/build-websites/operation/css/how-floating-works-by-ire.html

floatを使うと、領域の扱いが厄介・・・かなり複雑なレイアウトもコレを見れば解決する!?

CSS|セレクタのまとめ20

http://weboook.blog22.fc2.com/blog-entry-268.html

やはりこれを知ってないと何もできない

CSS|最新|中央(センター)配置 縦幅/横幅 いろいろ

CSS|画面サイズ(viewport|ビューポート)から指定する方法

http://phiary.me/css-viewport-units-vw-vh/

ビューポートからサイズ指定する場合には有効。

CSS|n番目にスタイルを適用する方法

http://weboook.blog22.fc2.com/blog-entry-285.html

めったに使わないけど、知っていると知らないとでは大違い

CSS|CSSの関数いろいろ

http://watilde.hatenablog.com/entry/2013/03/27/185407

なかなかこういうシチュエーションがあるかどうか疑問だが、一応メモ
JSが使えない状況で利用したい

CSS|CSSスプライトについてのまとめ

http://lopan.jp/css-sprites/

ボタンの切替などは、テキスト部分までも画像にするのはGoogle的にはいまだNG。
アイキャッチポイントとしてアイコンをCSSスプライトするのはOKか?

CSS|既存のCSSファイルをSassファイルに変換

https://memocarilog.info/webdesign/7375

Macならターミナルで実行できる

Macのターミナルで実行するなら、以下の通り。
※scssファイルの指定を忘れずに


sass-convert –to (scss 変換するcssファイルがあるフォルダのパス)/style.css (scssファイルを作成するフォルダのパス)/style.scss

CSS|Sass環境の導入方法

https://liginc.co.jp/web/html-css/css/56599

手順は以下の通り


①sass用のフォルダ /scss/ を作成
② ①のフォルダ内にsassファイル ●●●●●.scss を作成
③Koala を起動。/scss/ フォルダをKoalaにドラッグ&ドロップ
④Koala が認識していることを確認。リストに上がった ●●●●●.scss の下の行のURLをクリックしてcssファイルの書き出し先を指定。
※通常なら /css/を指定。ファイル名は分かりやすいように scssファイルと同名にしておく
⑤ リストに上がっている ●●●●●.scss をクリックして右サイドの以下の各項目をチェックしてコンパイル
✔自動コンパイル
✔Source Map
✔Line Comments
⑥ ④で指定したcssファイルが書き出しされていることを確認できたら、環境整備完了

CSS|先頭のみ、終端のみにスタイルを適用させる方法

http://www.vanfu-vts.jp/blog/2014/09/first-child_last-child/

これが使えると使えないでは大違い。

CSS|spanタグで改行

https://syncer.jp/css-reverse-reference/line-break

spanタグで改行。メディアクエリーと組み合わせれば、指定した画面サイズにのみ改行を実行することも可能。

.br:before {
content: “\A” ;
white-space: pre ;
}

<p>われわれは<span class=”br”>宇宙人</span>だ</p>

CSS|CSSだけでマルを描く方法

http://ginpen.com/2012/12/02/css-circle-examples/

コードの記述順によっては描画されないので注意が必要

マルはborder-radius: 50%

.curled-box {
border-radius: 50%;
height: 20px;
width: 20px;
}

CSS|floatなどで親要素からはみ出してしまった時の処理

http://ideahacker.net/2013/07/30/6144/

何度もこの場面に出くわすので、これは絶対に知っておくべき

親要素に記述

.clearfix:after{
content: “”;
clear: both;
display: block;
}

CSS|背景画像をレスポンシブ対応する

http://gimmicklog.main.jp/css3/747/

画像のレスポンシブ対応は意外と簡単だった???

background-size:cover; 縦横比を保持して、表示領域全体を覆うように背景画像を表示する
background-size:contain; 縦横比を保持して、表示領域に収まるように背景画像を表示する
background-size:値指定 auto; 横幅は指定した値、縦幅は元の比率を保持して自動で表示する
background-size:auto 値指定; 縦幅は指定した値、横幅は元の比率を保持して自動で表示する

CSS|ツイッター&フェイスブックボタンの埋め込み

■ツイッター
https://about.twitter.com/ja/resources/buttons#tweet

■フェイスブック
https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP

とりあえずダミーとして埋め込んでもボタンは表示される。
(JSのコードらしい)

CSS|SVG埋め込み処理

http://qiita.com/ka215/items/f9834dca40bb3d7e9c8b

imgタグでリンクして、width:100%にするのが最も簡単か

CSS|テキストインラインでの縦幅調整

http://weblan3.com/css/vertical-align.php

普段、ほとんど効かないvertical-alignが、インラインテキストでは能力を発揮する

CSS|ブランクURLに一律アイコンを付ける

https://allabout.co.jp/gm/gc/23996/

サイト全体に_blankのリンクは一律アイコンを付けるやり方。絶対知っておいたほうがいい

CSS|beforeを使ってパンくずリストなどにアイキャッチポイントを利用

http://qiita.com/konweb/items/86a9625a7ad1c556c415

beforeにfontawesomeのアイコンを使ってアイキャッチポイントにする

http://www.actzero.jp/nocategory/report-2475.html

アイキャッチだけではなく、beforeの状態でいろんなスタイルを定義できる

CSS|fontawesome以外のアイコ⇒マテリアルアイコン

https://material.io/icons/#ic_android

fontAwesome以外にも存在したWEBアイコン。Google純正

http://google.github.io/material-design-icons/

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons
rel=”stylesheet”>

http://monocalla.com/web-blog160622

マテリアルアイコンの使い方

フォントサイズ、色などGoogleで既にclassで予約されている


/ Rules for sizing the icon. /
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/ Rules for using icons as black on a light background. /
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/ Rules for using icons as white on a dark background. /
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

HTML記載例


<i class=”material-icons”>face</i>


バイナリコード記載例


<i class=”material-icons”>&#xE87C;</i>

class定義


.material-icons {
font-family: ‘Material Icons’;
font-weight: normal;
font-style: normal;
font-size: 24px; / Preferred icon size /
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/ Support for all WebKit browsers. /
-webkit-font-smoothing: antialiased;
/ Support for Safari and Chrome. /
text-rendering: optimizeLegibility;

/ Support for Firefox. /
-moz-osx-font-smoothing: grayscale;

/ Support for IE. /
font-feature-settings: ‘liga’;
}

ローカルでセットアップする場合


@font-face {
font-family: ‘Material Icons’;
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); / For IE6-8 /
src: local(‘Material Icons’),
local(‘MaterialIcons-Regular’),
url(https://example.com/MaterialIcons-Regular.woff2) format(‘woff2’),
url(https://example.com/MaterialIcons-Regular.woff) format(‘woff’),
url(https://example.com/MaterialIcons-Regular.ttf) format(‘truetype’);
}

ヘッダーへのリンク付け

http://google.github.io/material-design-icons/

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons
rel=”stylesheet”>

CSS|背景色をなしにする

http://bmath.org/wordpress/?p=658

背景色をなしにする。

background: transparent;
で、指定していた色が無色になる。

CSS|2番目以降にスタイルを適用する

http://webmist.info/not-first-child/

リストや連続したタグに対して2番目以降に連続して適用させたい方法

li:not(:first-child){

}

<対応ブラウザ>

Internet Explorer9 以上
Firefox
Google Chrome
Safari3 以上
Opera10 以上

<使用例>

:not(span) とすれば span タグ以外にスタイルが適用されます。
:not(:nth-child(2))とすれば2番目の要素以外にスタイルが適用されます。
:not(:hover) とすれば、マウスが乗っていない要素にスタイルが適用されます。
:not(href*=[“webmist.info“])とすればリンク先が指定のドメイン以外の a タグにスタイルが適用されます。

 

CSS|イージング処理

http://www.htmq.com/css3/transition-timing-function.shtml

イージングは定義名でいろんな動きを表現できる

http://easings.net/ja

イージングの種類リスト

http://www.css-lecture.com/log/css3/css3-transition.html

イージングの仕様

CSS|Sass|Sassの書き方まとめ

http://qiita.com/_upto_me_/items/ccb6edd249175c6b2d0a

Sassの書き方をさらっとまとめたサイト

CSS|iOS safari でのiframe表示エラー解消方法

https://stackoverflow.com/questions/36820478/how-to-make-iframe-work-properly-in-ios-safari

このコードにより、iOS safariでiframe表示が大きく崩れる点が解消できる。

特にこのコード

iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}

CSS|ラテン文字 一覧

https://web-designer.cman.jp/special_string/

CSS|iOSで文字が大きくなってしまう症状の対応

https://wayohoo.com/programming/css/ios-safari-is-always-webkit-text-size-adjust-on.html

これを書けば回避できる

html {
-webkit-text-size-adjust: 100%;
}

CSS|SVGをアイコン化

 

http://kotori-blog.com/coding/svg/

SVGのアイコンリストを別ファイル化してphpで呼び出し、CSSで設置する方法。
最初は難しいけど、一度設置してしまえば楽?

①.svgファイルの元


<svg display=”none” version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink“>
<defs>
</defs>
</svg>

②<defs>タグ内にid指定

例 id =”logo”
<symbol id=”logo”>
</symbol>

③<symbol>タグ内にillustratorから取得したSVGコードの中身(<g>タグ)を記述


<g>
<path fill=”#FFFFFF” d=”M101.313,166.023c-2-3-4.5-5-6.5-8c-2-3.5-3.5-7.5-5-11c-3-6-6-13-6.5-20c-0.5-6.5-1.5-13.5-1.5-20.5
c0-7.5-1-17,1-24.5c1.5-4.5,3.5-9.5,6-13c3-4,6-7.5,8.5-11.5c2-3.5,4.5-6.5,7-10s4.5-7,8-10c7-5,16-8,24-11.5c4-1.5,8-2.5,12.5-3.5
c4-0.5,9-2,13.5-2c11.5-0.5,23,0,35,0c7.5,0,16,1.5,22.5,5.5s12,11.5,16,17.5c3.5,5,7,9.5,10,14.5c2.5,4.5,4,9.5,6,14
c1.5,3.5,3,7.5,3.5,11.5c1,4,0.5,9,0.5,13.5c0,4,0.5,8,0,12c-0.5,3.5-2,7.5-2.5,11c-0.5,6-2.5,12-5,17.5c-1,2.5-2,5-3.5,7
c-1.5,3-3,6.5-4.5,9.5″/></g>

④<symbol>タグのオプションにviewBoxを指定


<symbol id=”logo” viewBox=”0 0 325.418 78.522″>

⑤.svgファイルの指定例 ※以下のように複数登録できる


<svg display=”none” version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink“>
<defs>
<symbol id=”logo” viewBox=”0 0 325.418 78.522″>
<!– SVGコードが入ります。 –>
</symbol>
<symbol id=”pandytalk” viewBox=”0 0 345.382 326.108″>
<!– SVGコードが入ります。 –>
</symbol>
<symbol id=”konnanomo” viewBox=”34.393 36.611 749.566 275.506″>>
<!– SVGコードが入ります。 –>
</symbol>
</defs>
</svg>

⑥実際にhtmlファイルに.svgファイルをインクルードする

例:all.svg
<body>
<?php include_once(“all.svg”); ?>

⑦アイコンとして使いたい場所に呼び出す記述
※この場合、実際にアイコン表示に関係するタグは<svg>タグと<use>タグのみ。<title>タグと<desc>タグも子要素として指定できる。

例 all.svg内のid=”logo”を呼び出した場合
<svg class=”icon-logo”>
<title>KOTORI.</title>
<desc>KOTORI Blogのロゴです。</desc>
<use xlink:href=”#logo”/>
</svg>

Sass|MacのGulpの設定方法

https://ics.media/entry/3290

サイトのタイトル通り、『接待つまづかないGulp入門。インストールからSassのコンパイルまで』を教えてくれるサイト
動画付きなので、説明だけでは自信が無い人は動画を見ながらの設定がオススメ

①Node.jsをインストールする

②初期化で package.json ファイルが作成される

npm init -y

③Gulpをインストールする ※-Dはローカル環境指定

npm install -D gulp

④gulpfile.js を編集する

// gulpプラグインの読み込み
const gulp = require(‘gulp’);
// Sassをコンパイルするプラグインの読み込み
const sass = require(‘gulp-sass’);
// style.scssをタスクを作成する
gulp.task(‘default’, function () {
// style.scssファイルを取得
gulp.src(‘css/style.scss’)
// Sassのコンパイルを実行
.pipe(sass())
// cssフォルダー以下に保存
.pipe(gulp.dest(‘css’));
});

⑤gulpを実行してみる ※npxはnpm v5.2から使える新しいコマンド

npx gulp
scssファイルを元に、cssファイルが書き出されれば成功!

⑥sassファイル書き出しオプションをgulpfile.jsに指定

// gulpプラグインの読み込み
const gulp = require(‘gulp’);
// Sassをコンパイルするプラグインの読み込み
const sass = require(‘gulp-sass’);
// style.scssをタスクを作成する
gulp.task(‘default’, function () {
// style.scssファイルを取得
gulp.src(‘css/style.scss’)
// Sassのコンパイルを実行
.pipe(sass({
outputStyle: ‘expanded’
}))
// cssフォルダー以下に保存
.pipe(gulp.dest(‘css’));
});

⑦watch機能(監視自動更新)をgulpfile.jsに指定

// gulpプラグインの読み込み
const gulp = require(‘gulp’);
// Sassをコンパイルするプラグインの読み込み
const sass = require(‘gulp-sass’);
// style.scssの監視タスクを作成する
gulp.task(‘default’, function () {
// ★ style.scssファイルを監視
gulp.watch(‘css/style.scss’, function () {
// style.scssの更新があった場合の処理
// style.scssファイルを取得
gulp.src(‘css/style.scss’)
// Sassのコンパイルを実行
.pipe(sass({
outputStyle: ‘expanded’
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on(‘error’, sass.logError))
// cssフォルダー以下に保存
.pipe(gulp.dest(‘css’));
});
});

■Gulpを設置する場所について
①Gulpコマンドを実行適用範囲は、package.json & gulpfile.jsの場所よりも下位で実行できる。上位のディレクトリでのコマンド実行は機能しない。

②Macのターミナルのデフォルトは/Users/ユーザー名/なので、そこに設置するのが良いと思われる。

■注意事項
①監視自動更新実行中にgulpfile.jsを変更したら、一旦、監視を終了させて再実行しないと、新しいgulpfile.jsの内容が反映されない。

②gulpコマンド実行後、監視中のsassファイルを開いただけでcssファイル書き出しが実行される

CSS/Saas

Posted by mori