pointer-events: none;は要素にマウスやタッチで触ることができなくなるCSSのプロパティです。
最近よく使うようになったのですが、Edgeでうまく動作しないケースに遭遇し、何でだーとなったので記録を残しておきます。
原因はEdgeのpointer-events: none;の実装にあるようです。
a要素にpointer-events: none; とdisplay:inline;を同時に適用すると、pointer-events: none;が機能しなくなります。Edgeのバグではないかと思われます。
displayをinline以外の値に変えてやると正常に機能します。
以下に確認用のサンプルを作成しました。Edgeだとpointer-events: none;が動作せずa要素がクリック(タップ)できてしまい、アラートが出るようにスクリプトを入れてあります。
以上に挙げた条件以外でも期待通りの動作をしないケースがあるようです。以下の記事が参考になります。
Button with Arrow.css公開させて頂きました。
矢印付きのボタンのCSSを生成するジェネレーターです。
矢印付きのボタンをコーディングするのが面倒だったのでsassでmixinを作ったものの、それを使うことすら面倒だった(笑)のと、Vue.jsの勉強がしたかったのがこのツールを作ったきっかけです。
※現状、スマートフォンでの閲覧に対応しておりません。PCのブラウザでご利用ください。
EDITボタンをクリックするとスクリーンが編集モードに変形します。
編集エリアのフォームに任意の値を入力すると、画面右側のcodeエリアのCSSコードに動的に反映されます。
※codeエリアが閉じている場合は「get code」ボタンをクリックしてください。
入力が終わったら、codeエリアのcopyボタンをクリックしてコードをコピーし利用してください。
htmlとcssそれぞれ別になっています。
ここはアピールしておきたいところ(笑)。フレームワークとしてVue.jsを利用しています。
フォームに値を入力すると、codeエリアとボタンのプレビューに同期するようバインディングするコードを書いています。
cssで擬似要素を使っているので、これをVue.jsで扱うのに苦労しました。DOMではないので通常のバインディングができず、テキストノードとしてstyleタグを生成するなどしています。(何か他にいいやり方があるのかもしれませんね。)
ご質問やご意見はこの投稿にコメントいただくか、@stella_d_tweetにメンションなどお願いいたします。
非常に限られた需要しか無いと思われますが(汗)、よかったらお試しいただけると幸いです。
このツールを作るのに、@hrz31さんの以下の記事とサービスから非常に刺激を受けました。
自分のサービスを作ってみたいエンジニアな人は参考になると思います。おすすめです。
他にもtwitterでフォローしているフォロワーの方が続々とwebサービスをリリースをしており、こちらも大変気になっております。
話題のねこ本ももちろん買って読みました。ある程度JavaScriptの知識があることが前提ではありますが、Vue.jsの使い方のツボがいいかんじにまとめられていて、こういうときはどうすればいい?の答えにたどり着くスピードが格段に上がりました。みんな、読むといいよ！
次に作ってみたいwebサービスの構想がうすボンヤリ浮かんでいます。今度はより本格的なwebアプリを作ってみたいです。
オープンデータも活用したいし、firebaseを使えばよりスケールアップしたアプリが作れそう。micro:bitもまだ手付かずだし、blenderもやってみたい。(あぁ、もう全部やるのは無理だw)
時間の割り振りがなかなか難しいですがほそぼそやっていこうと思っています。
見出し要素は出現頻度が高く、無計画にcssを記述していると乱雑になりやすいのでひとまとめに管理する記述する方法を考えてみました。タイトル通りSassのfor文とif文を使います。
body{
$reduce : 0.2; //フォントサイズを0.2ずつ源算するための値
$fontSize : 3 + $reduce; //フォントサイズの初期値
//$valueに1ずつ加算して代入し、6になるまで繰り返す
@for $value from 1 through 6 {
h#{$value}{ //#{}を使用して見出しセレクタを作成
//フォントサイズを再設定
$fontSize: $fontSize - $reduce; //0.2ずつ源算
font-size: $fontSize + rem;
//h2要素のcssを設定
@if $value == 2 {
color: red;
}
//h3要素のcssを設定
@if $value == 3 {
color: blue;
}
//class付きh4要素にcssを設定
@if $value == 4 {
&.h4-custom {
border-bottom: 1px solid #CCCCCC;
}
}
}
}
}
＠forでh1からh6までのフォントサイズを調整し、@ifで条件分岐して見出しごとのスタイルを設定しています。より複雑なスタイルを施したい場合は別途@mixinを作って@includeすればさらに管理しやすくなりますね。
IE10、IE9、IE8のサポート終了 | マイナビニュース
2016年1月、古いIEのサポートが終了したわけですが、そうなるとWEB制作における影響として、CSS3の積極的な利用促進が挙げられますよね。
納品案件だとブラウザによる差異に対してなかなかご理解いただけないクライアントもいらっしゃるので、css3を利用することにためらいがあったわけですが、これからはcss3の利用が業界全体でぐっと加速するのは間違いないだろうと思います。
ということで、勉強のためにストックしておいたCSS3関連記事をまとめてみました。
現状ではbootstrapを利用してレイアウトを組むことが多いですが、余分なdivが増えてしまうのでhtmlがやや複雑になってしまうのが欠点です。Flexboxを使うとシンプルな記述で柔軟にレイアウトが組めそう。
子要素を横並びにしてくれる、自動的に一番長いボックスに合わせて高さをあわせてくれる、垂直方向の位置も設定できる、など利点がたくさんあります。
例えば要素にマウスをhoverした時に、その要素の幅や高さを変えたり、動かしたり、動作に緩急をつけたり、と何らかの変化をつけることができます。
animationは、@keyframesを使って開始→中間→終了→開始に戻る、などの時間軸を持たせてループできることが特徴的です。
移動、拡大、回転、傾斜など要素を「変形」させることができます。animationと組み合わせると、より複雑なモーフィングも表現可能なようです。
css3では、カンマで区切れば複数の色や画像やグラデーションを重ねて指定できますし、画像の開始位置や敷き詰め方、要素に対してのフィッティングも設定可能です。
css2.1と比べて表現力が格段に高まりましたが記述方法は複雑になっていますので、まずは先駆者の方々が残してくれたコードをありがたく勉強させてもらいます！
Bootstrapはグリッドシステムを採用しているので、スクリーンサイズに合わせてレイアウトが可変するレスポンシブデザインが簡単に作れるのですが、実際にどんな仕組みになっているか理解するのが割と手間だったので、忘れないように要点をまとめてみました。
サンプル：要素が4つあり、スマフォ表示で横2列、パソコン表示で横4列にレイアウトしたい場合。
<div>コンテンツ</div>
<div>コンテンツ</div>
<div>コンテンツ</div>
<div>コンテンツ</div>
横並びにしたい要素に、「.col-**-**」というclassを与えるだけなのですが、横に並べたい要素の数とレスポンシブの条件(ブレイクポイント)によって、**の部分に入る文字や数字が変わります。
上記のサンプルのように、4つdiv要素をスマフォで表示するときは横2列、パソコンでは横4列にしたい場合、.col-xs-6と.col-md-3というclassを4つのdiv要素それぞれに与えます。
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
.col-xs-6や.col-md-3といったclassが出てきたので、まず、これの意味をご説明します。
.col-xs-6 を「col」、「xs」、「6」の3つに分解してみてみます。
「col」はカラム(コラム)。単純に列という意味ですね。
「xs」はBootstrapのブレイクポイントのひとつ、768px以下を示しています。(ブレイクポイントについては後ほど詳しく解説します。)
「6」は、「6列分の幅」となります。
Bootstrapはデフォルトでは1行の中で、1~12個の要素を並べる(グリットを作る)ことができますが、そのルールを適用するためには「.col-**-**」に要素の数やブレイクポイントを組み込む必要があります。
要素の数が1個であれば12(12×1=12)、2個であれば6(2×6=12)、3個であれば4(3×4=12)というように、要素数で掛け算したときに、答えが12となる数値＝横並びになる要素の数で、それをclassに割り当てる必要があるのですね。
なので、ウィンドウサイズが768px以下の時、「6列分の幅」を与えて要素が2個並ぶ状態にするには、.col-xs-6を付与します。「6列分の幅」を持つ要素がふたつで12列分になります。余った残りふたつの要素は、改行されてやはり2個並びます。
ウィンドウサイズが992px以上~1200px未満の時、3列分の幅を与えて4個並べるには.col-md-3を付与します。これも合計で12になりますね。
説明が前後してしまいましたが、上記の設定は.rowというclass名を与えた要素の中に入れ子にすることで機能するようになります。
また、.containerというclassを持った要素でさらに入れ子にすると、ブレイクポイントに対応して幅のサイズが切り替わる文字通りコンテナとなる要素が作れます。
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
<div class="col-xs-6 col-md-3">コンテンツ</div>
</div>
</div>
768px、992px、1200pxの3つのブレイクポイントが設定されていて、4種類のレイアウトが可能です。詳しくは下記表を御覧ください。
| 画面サイズ | 768px未満 | 768px以上~ 992px未満 |
992px以上~ 1200px未満 |
1200px以上 |
|---|---|---|---|---|
| class名の接頭辞 | col-xs- | col-sm- | col-md- | col-lg- |
| containerの幅 | 設定なし(自動) | 750px | 970px | 1170px |
xsはスマフォ用、smはタブレット用、mdはノートパソコンや小さいデスクトップパソコンモニタ、lgは大きいサイズのデスクトップパソコンモニタを想定していると思われます。
今までの説明を踏まえたコードが下記になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
.block{
border: 5px solid #000000;
padding-top: 50px;
padding-bottom: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<header class="col-xs-12 block">
ヘッダー
</header>
<div class="col-xs-6 col-md-3 block">
コンテンツ
</div>
<div class="col-xs-6 col-md-3 block">
コンテンツ
</div>
<div class="col-xs-6 col-md-3 block">
コンテンツ
</div>
<div class="col-xs-6 col-md-3 block">
コンテンツ
</div>
<footer class="col-xs-12 block">
フッター
</footer>
</div>
</div>
</body>
</html>
ブレイクポイントとcol-**-**の組み合わせで様々なパターンのレイアウトが組めると思います。
Sassの力をフルに引き出すには、もっと根っこからCSSのコーディング方法を変える必要がある！と思い、BEMを取り入れたコーディングを始めました。
Sassを使い始めたものの、思ったほど効率が上がらない。なにか引っかかっておりました。いろいろ考えた結果、Sassがどうとかじゃなくて、自分のコーディングスタイルをもっと見なおした方がいいという結論に。
そんな折、「Web制作者のためのCSS設計の教科書」という書籍が発売されていたので購入。今の自分にぴったり。早速読んでみました。
冒頭で、破綻しやすいコーディング例の紹介がありました。その中の一つに、IDセレクタを起点にして、その子要素のhtmlにスタイルを当てるやり方が解説されていて、まさに自分が当てはまっていました。
この記法はhtmlは汚れずらいけど、htmlが変わるとスタイルの修正がかなり大変。また、使い回したいと思っても、IDセレクタ起点なので、他の箇所で使えなかったり。
うーむ、確かにその通り。
で、どうしたらいいかというと「classを活用」したり、「OOCSS(オブジェクト指向CSS)」を取り入れる、という解決方法が「CSS設計の教科書」で解説されていました。
OOCSSは知ってはいたものの、htmlにclassセレクタを記述するのが冗長に思えて避けていました。htmlが汚くなることに抵抗がありました。
でも、そのかわり今のままだとCSSが汚い！生産性低い！このままだと何も変わらない！ってことで、恐る恐るOOCSSに取り組むことに。
OOCSSにもいろいろ種類があるようで、「SMACSS」、「BEM」、「MCSS」、「FLOCSS」など命名規則や記法、構造にそれぞれ特性があります。
自分はとりあえず「BEM」のルールでやってみることにしました。
BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。
BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号
とあります。Blockという要素の起点となるclassがあり、それに対してElementというclass、Elementのバリエーションとしてmodifierと呼ばれるclassが存在します。(詳しくは「CSS設計の教科書」をぜひ。)
このBEMの命名規則にのっとってclassを作り、html要素に付与していくわけです。
classの数がとても増えるので、IDセレクタを起点にスタイリングするより手間がかかります。でも、やってみてわかりました。この方法は、とても良かったです。
html要素を変更しても、cssを修正しなくてよいのはすごく楽でした。最初のclass付けに手間がかかったとしても、修正の労力がぐっと減ることの方がメリットがはるかに大きい。class名に意味を持たせて付けてやれば、思ったより煩雑にならない。
また、IDセレクタをやめてclassでスタイルを作るので、当然使いまわししやすくなりました。IDセレクタ直下のhtml要素にスタイルを当てる今までのやり方とは感覚が全く違います。
そしてこれこそSassの出番。@mixinや@extendが力を発揮します。むしろこれでSassを使う本当の意味が出てきたと感じました。(これも、もっと早くやればよかった！)
いろいろ書いてきましたが、まだまだBEMの記法を有効活用できていません。つい「IDセレクタ起点」風の記述をしてしまうことも多いです。
もっとスマートにCSSを記述できるよう、BEM修行はまだまだ続きます。
