こんなときに selectボックスを以下のようなシンプルな見た目にしたい。 ブラウザのデフォルトCSSを打ち消したい。 「▼」のために画像やWebフォントを導入するのはダルい。 コード Pug .wrap form(action="", method="post") .selectWrap select.select(name="select") option(value="1") item1 option(value="2") item2 option(value="3") item3 option(value="4") item4 SCSS .wrap { display: flex; justify-content: center; align-items: center; height: 500px; background-color: #ddd; } .select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: transparent; font-size: 30px; width: 104px; } .selectWrap { position: relative; &:after { content: '▼'; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #666; pointer-events: none; } } 解説 ポイント 疑似要素を使用。テキストの「▼」を使う。 selectに擬似要素はつかない。外側に疑似要素用のdiv（.selectWrap）を用意する。 疑似要素部分はデフォルトではクリックに反応しない、pointer-events: none;を適用すべし。 既存スタイルの打ち消し .select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: transparent; //略 } 疑似要素をつける .selectWrap { position: relative; &:after { content: '▼'; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #666; pointer-events: none; } } 疑似要素は、select外側のdivに指定。 位置をabsoluteでselect要素の範囲内、真横に持ってくる。 pointer-events: none; をつけると、▼を押して反応する。 実装サンプル https://codepen.io/dorara_css/pen/yWEPEa 参考 フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する | Will Style Inc.｜神戸にあるウェブ制作会社 －HTMLタグリファレンス フォーム要素のスタイルをリセットする | cly7796.net
selectボックスを以下のようなシンプルな見た目にしたい。
ブラウザのデフォルトCSSを打ち消したい。
「▼」のために画像やWebフォントを導入するのはダルい。
.wrap form(action="", method="post") .selectWrap select.select(name="select") option(value="1") item1 option(value="2") item2 option(value="3") item3 option(value="4") item4
.wrap { display: flex; justify-content: center; align-items: center; height: 500px; background-color: #ddd; } .select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: transparent; font-size: 30px; width: 104px; } .selectWrap { position: relative; &:after { content: '▼'; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #666; pointer-events: none; } }
.selectWrap
pointer-events: none;
.select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: transparent; //略 }
.selectWrap { position: relative; &:after { content: '▼'; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #666; pointer-events: none; } }
疑似要素は、select外側のdivに指定。 位置をabsoluteでselect要素の範囲内、真横に持ってくる。
absolute
pointer-events: none; をつけると、▼を押して反応する。
https://codepen.io/dorara_css/pen/yWEPEa
フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する | Will Style Inc.｜神戸にあるウェブ制作会社 －HTMLタグリファレンス フォーム要素のスタイルをリセットする | cly7796.net
プログラミング言語に慣れるためのお約束であるじゃんけんゲームを、CSSだけで作れないかと思ってやってみました。 以下成果物です。 See the Pen CSS JANKEN by kadowaki (@kadowaki) on CodePen. 画像はこちらからお借りしました。 説明 いきなり躓くのですが、まず、じゃんけんゲームにはお決まりの乱数の生成がCSSではできませんでした。 Sassのrandom()関数なんかをうまいこと使えないものかと思いましたが、これはコンパイル時にランダムな値を生成することができるというだけで、結局のところ静的なCSSにコンパイルして使用せざるを得ない都合上、試行のたびに違う結果を返すのは難しいわけです。 で、ひとまず思いついたのは、タイミングによって結果を変えてしまえばいいということです。同じボタンをクリックしたと（ユーザー側が）思っていても、違うボタンをクリックさせるような仕組みにしてしまえばいい。ということで、三種類のボタンを重ねて@keyframesで時間によって表示非表示を切りかえ、擬似的にランダムっぽくしています。 擬似クラス・一般兄弟演算子 今回は要素をクリックした時に付与される擬似クラス:focusを活用しています。 さらにそれと組み合わせたのが一般兄弟演算子~で、これは指定した要素の後ろにある兄弟要素を指定することができるものです。 擬似クラス:focusが当たっているinput要素、の後ろにある兄弟要素、のように指定することで、状態に応じてほかの要素に影響を与えることができます。 備考 はじめ擬似クラス:focusを付与する要素をbuttonにしていたのですが、これはFirefoxとSafariで動きませんでした。 調べてみると、そもそもそういう仕様のようでした。 input要素にreadonly属性をつけてボタンにすることで、今のかたちになりました。
プログラミング言語に慣れるためのお約束であるじゃんけんゲームを、CSSだけで作れないかと思ってやってみました。 以下成果物です。
See the Pen CSS JANKEN by kadowaki (@kadowaki) on CodePen.
画像はこちらからお借りしました。
いきなり躓くのですが、まず、じゃんけんゲームにはお決まりの乱数の生成がCSSではできませんでした。 Sassのrandom()関数なんかをうまいこと使えないものかと思いましたが、これはコンパイル時にランダムな値を生成することができるというだけで、結局のところ静的なCSSにコンパイルして使用せざるを得ない都合上、試行のたびに違う結果を返すのは難しいわけです。 で、ひとまず思いついたのは、タイミングによって結果を変えてしまえばいいということです。同じボタンをクリックしたと（ユーザー側が）思っていても、違うボタンをクリックさせるような仕組みにしてしまえばいい。ということで、三種類のボタンを重ねて@keyframesで時間によって表示非表示を切りかえ、擬似的にランダムっぽくしています。
Sass
random()
@keyframes
今回は要素をクリックした時に付与される擬似クラス:focusを活用しています。 さらにそれと組み合わせたのが一般兄弟演算子~で、これは指定した要素の後ろにある兄弟要素を指定することができるものです。 擬似クラス:focusが当たっているinput要素、の後ろにある兄弟要素、のように指定することで、状態に応じてほかの要素に影響を与えることができます。
:focus
~
input
はじめ擬似クラス:focusを付与する要素をbuttonにしていたのですが、これはFirefoxとSafariで動きませんでした。 調べてみると、そもそもそういう仕様のようでした。 input要素にreadonly属性をつけてボタンにすることで、今のかたちになりました。
button
Firefox
Safari
readonly
未来電子テクノロジーでインターンをしている田島一毅です。プログラミング初心者であるため、内容に誤りがあるかもしれません。 もし、誤りがあれば修正するのでどんどん指摘してください。 progateでcursorプロパティについて学んだ 現在僕は、プログラミング学習サイトのprogateでHTMLとCSSを学んでいます。 その中で、cursorプロパティというものを学びました。 cursorプロパティとは、以下のようにして、マウスカーソルが目的物に乗ったときにマウスカーソルの形を変化させるCSSプロパティです。 ××{ cursor: 値; } プログラミング初心者の僕は、マウスが乗ったときにマウスカーソルが指の形に変化しただけで非常に感動しました。 コーディングが非常に簡単なのも、感動の理由の一つです。 そこで僕は、cursorプロパティでマウスカーソルをどんなものに変化させることができるのか調べてみることにしました。 cursorプロパティで意外といろいろできる 調べてみると、cursorプロパティでマウスカーソルを様々な形に変化させることができることを知りました。 今回は、その中でも僕が気に入ったものをピックアップして紹介します。 1.auto ××{ cursor: auto; } autoは、初期値であり、状況に応じてマウスカーソルの形が変化します。リンクならpointer(人差し指)になり、テキストならtext(Iビーム)になります。 2.pointer ××{ cursor: pointer; } pointerでは人差し指を表示し、主にリンクで使われます。 progateでは最初にこれを学びました。 3.text ××{ cursor: text; } textはIビームを表示し、主にテキストで使われます。 4.not-allowed ××{ cursor: not-allowed; } not-allowedは、道路標識の進入禁止マークのようなものを表示します。 初めて見たのですが、メンテナンスなどで操作ができないものがある時に、「操作不可能」の意味で使うことができるなあと感じました。 5.resize ××{ cursor: 方角-resize; } resizeはある方向へのサイズ変更を表すために、矢印を表示します。 resizeは僕が一番面白いと思ったcursorの値です。 その理由は、その方角の表し方にあります。 例えば上は、northern(北)のnをとって、 ××{ cursor: n-resize; } といったように表します。 ここが面白いなと感じました。 左下ならsouthwest(南西)よりswとなります。 このほかにもいろいろある 今回は5つの値を紹介しましたが、値はまだまだたくさんあります。 よかったらぜひ調べてみてください。
未来電子テクノロジーでインターンをしている田島一毅です。プログラミング初心者であるため、内容に誤りがあるかもしれません。 もし、誤りがあれば修正するのでどんどん指摘してください。
現在僕は、プログラミング学習サイトのprogateでHTMLとCSSを学んでいます。 その中で、cursorプロパティというものを学びました。 cursorプロパティとは、以下のようにして、マウスカーソルが目的物に乗ったときにマウスカーソルの形を変化させるCSSプロパティです。
××{ cursor: 値; }
プログラミング初心者の僕は、マウスが乗ったときにマウスカーソルが指の形に変化しただけで非常に感動しました。 コーディングが非常に簡単なのも、感動の理由の一つです。 そこで僕は、cursorプロパティでマウスカーソルをどんなものに変化させることができるのか調べてみることにしました。
調べてみると、cursorプロパティでマウスカーソルを様々な形に変化させることができることを知りました。 今回は、その中でも僕が気に入ったものをピックアップして紹介します。
××{ cursor: auto; }
autoは、初期値であり、状況に応じてマウスカーソルの形が変化します。リンクならpointer(人差し指)になり、テキストならtext(Iビーム)になります。
××{ cursor: pointer; }
pointerでは人差し指を表示し、主にリンクで使われます。 progateでは最初にこれを学びました。
××{ cursor: text; }
textはIビームを表示し、主にテキストで使われます。
××{ cursor: not-allowed; }
not-allowedは、道路標識の進入禁止マークのようなものを表示します。 初めて見たのですが、メンテナンスなどで操作ができないものがある時に、「操作不可能」の意味で使うことができるなあと感じました。
××{ cursor: 方角-resize; }
resizeはある方向へのサイズ変更を表すために、矢印を表示します。 resizeは僕が一番面白いと思ったcursorの値です。 その理由は、その方角の表し方にあります。 例えば上は、northern(北)のnをとって、
××{ cursor: n-resize; }
といったように表します。 ここが面白いなと感じました。 左下ならsouthwest(南西)よりswとなります。
今回は5つの値を紹介しましたが、値はまだまだたくさんあります。 よかったらぜひ調べてみてください。
きっかけ 求人をみてるとよく、レスポンシブ対応ができる人〜とあり 「あ、レスポンシブはやっとかないといけない項目だ！」と思って ポートフォリオで使うことにしました。 いつもSassを使っているので今回も使っていきます！ （Sassって関数が使えるのを今回知りました〜） 導入と使い方 HTMLにviewportを記載する 参考サイト もう逃げない。HTMLのviewportをちゃんと理解する 時間ができたら細かく噛み砕いてここに追記します。 メディアクエリをかく 今回はスマホ、タブレット、PCに対応させます。 参考サイト SCSSの基本的な書き方 この、メディアクエリの部分を参考に書きました。 優先させたい画面サイズがもしスマホサイズなら、 スマホ対応メディアクエリから書いていき、最後にPCサイズのメディアクエリ のように順番が変わるようです。 レスポンシブ対応した見た目を確認するときはChromeのデベロッパーツールで確認できます。 おわり 今回の記事はほぼ参考サイトを書くだけになってしまいました... CSSは書くより見た目を考える方のが時間かかっちゃう気がします>< 関係ないですが、スマホ対応について色々調べてたら PWAなるものがあるらしく、やってみたいな〜って思いました。 PWAに興味を持っている人向けに概要とか動向とかをまとめた
求人をみてるとよく、レスポンシブ対応ができる人〜とあり 「あ、レスポンシブはやっとかないといけない項目だ！」と思って ポートフォリオで使うことにしました。
いつもSassを使っているので今回も使っていきます！ （Sassって関数が使えるのを今回知りました〜）
参考サイト もう逃げない。HTMLのviewportをちゃんと理解する 時間ができたら細かく噛み砕いてここに追記します。
今回はスマホ、タブレット、PCに対応させます。
参考サイト SCSSの基本的な書き方 この、メディアクエリの部分を参考に書きました。
優先させたい画面サイズがもしスマホサイズなら、 スマホ対応メディアクエリから書いていき、最後にPCサイズのメディアクエリ のように順番が変わるようです。
レスポンシブ対応した見た目を確認するときはChromeのデベロッパーツールで確認できます。
今回の記事はほぼ参考サイトを書くだけになってしまいました... CSSは書くより見た目を考える方のが時間かかっちゃう気がします><
関係ないですが、スマホ対応について色々調べてたら PWAなるものがあるらしく、やってみたいな〜って思いました。 PWAに興味を持っている人向けに概要とか動向とかをまとめた
こんなときに display: none; → display:block; という切り替えが必須な状況。 フェードインのアニメーションを追加したい。 cssだけでどうにかしたい。 フェードインしたらしっぱなし。フェードアウトの機能までは必要ない。 コード Pug .wrap input#show.check(type="checkbox") label.label(for="show") 表示 .box ふわー SCSS .wrap { background-color: #ddd; height: 300px; width: 100%; position: relative; padding: 30px; .box { height: 200px; width: 200px; margin: auto; background-color: #fadfaa; display: none; } .label { display: block; padding: 12px; border: 1px solid #444; position: absolute; bottom: 0; cursor: pointer; } .check { display: none; &:checked { & + .label { display: none; } & ~ .box { display: block; animation-name: fade-in; animation-duration: .7s; } } } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } 解説 今回のポイント displayはtransitionできないため、cssアニメーションを使用する。 アニメーションで、opacityが0→1に遷移するよう指定する。 displayの切り替え .box { //中略 display: none; } //中略 .check { display: none; &:checked { //中略 & ~ .box { display: block; animation-name: fade-in; animation-duration: .7s; //遷移時間 } } } .boxという要素をチェックボックスがonの状態になったら、表示する。 display:block → noneという切り替えを行いつつ、cssアニメーションの記述をする。 cssアニメーションの名前を設定。後に @keyframesで設定する。適当な文字列でOK。 遷移時間（秒）を設定する。 アニメーションの設定 @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } 0%が初期状態、100%がアニメ終了時の状態を表す。今回はopacityを0→1に遷移させるだけでOK。 動作サンプル https://codepen.io/dorara_css/pen/QRaXom 参考 CSS3 のみで display: none からフェードインさせる - Qiita この記事での内容、上記の記事の内容をベースに、コメントでの指摘を混じえたもの。 また今回は、以前の記事で扱った、チェックボックスによる「cssだけで非表示→表示にする手法」を用いている。 その解説の詳細は以下を参照。 CSSだけで「もっと見る」ボタン(使い切り)を実装
display: none;
display:block;
.wrap input#show.check(type="checkbox") label.label(for="show") 表示 .box ふわー
.wrap { background-color: #ddd; height: 300px; width: 100%; position: relative; padding: 30px; .box { height: 200px; width: 200px; margin: auto; background-color: #fadfaa; display: none; } .label { display: block; padding: 12px; border: 1px solid #444; position: absolute; bottom: 0; cursor: pointer; } .check { display: none; &:checked { & + .label { display: none; } & ~ .box { display: block; animation-name: fade-in; animation-duration: .7s; } } } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.box { //中略 display: none; } //中略 .check { display: none; &:checked { //中略 & ~ .box { display: block; animation-name: fade-in; animation-duration: .7s; //遷移時間 } } }
.boxという要素をチェックボックスがonの状態になったら、表示する。 display:block → noneという切り替えを行いつつ、cssアニメーションの記述をする。 cssアニメーションの名前を設定。後に @keyframesで設定する。適当な文字列でOK。 遷移時間（秒）を設定する。
.box
display:block
none
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
0%が初期状態、100%がアニメ終了時の状態を表す。今回はopacityを0→1に遷移させるだけでOK。
https://codepen.io/dorara_css/pen/QRaXom
CSS3 のみで display: none からフェードインさせる - Qiita この記事での内容、上記の記事の内容をベースに、コメントでの指摘を混じえたもの。
また今回は、以前の記事で扱った、チェックボックスによる「cssだけで非表示→表示にする手法」を用いている。 その解説の詳細は以下を参照。
CSSだけで「もっと見る」ボタン(使い切り)を実装
はじめに 最近ようやく簡単なアプリが作れるようになって、「フロントをいじり倒したい！」という欲が出てきました。（笑） そこで先輩エンジニアから伝授されたのが、CSSフレームワークです。 今回はそれについて書いていこうと思います。 まずCSSフレームワークって何だ？ CSSフレームワークとは、あらかじめデザインやレイアウトが用意されていて、クラス名を指定するだけで簡単にCSSを反映させることができるとても便利なフレームワークです。 HTMLを組んで、CSSで肉付けして・・・のような地道な作業を簡略化させてくれて、なおかつ初心者では作れないようなものが簡単に使えるようになる優れものです！（笑） 調子に乗った末・・・ これを知った僕は、案の定「すごい！楽！最高じゃん！」という感じで早速使いまくりました。 私が使用したフレームワークは「Materialize.css」です。 そして完成した、今の自分的には「めっちゃいいじゃん！」と思うアプリを他の人に見てもらうと、 「Materiallize感すごいね（笑）」 「これMateriallize使ってるでしょ（笑）」 ・・・・・・・。 なんでバレるんだよ！！！！！！！！！！！！！！！！！！！！！！！ というより使っちゃダメなのかよ！！！！！！！！！！！！！！！！！！！ となりました。（笑） 一体なぜ周りはこのような反応になったのでしょう・・・？ フレームワークの落とし穴 これだけ便利なものがあれば、みんな使いますよね。（笑） だからこそ、 「あー、これね」となってしまうようです。 確かに既存のデザインをみんなで使うという仕組みから考えれば、そうなっても仕方ないなと思います。 使うにしても、ベースのコードに自分で何かを書き加えたりして工夫することが大切なんですね・・・ 作業スピードは早くなっても、楽している分このような落とし穴があると痛感させられました。（笑） おわりに 正直、プログラミングを勉強する前は、「システムさえ作れればデザインとかはサクっといけるでしょ！」と勝手に考えていました。 しかし勉強している中でやっと、エンジニアが「フロントエンド」と「バックエンド」に分けられている意味がわかるようになりました。 本当にまだまだ知識不足です。 今はまだ駆け出しで、基礎を学んでいる最中ですが、早く自分の思い描くようなアプリが作れるように日々頑張っていこうと思います！ ありがとうございました＾＾
最近ようやく簡単なアプリが作れるようになって、「フロントをいじり倒したい！」という欲が出てきました。（笑） そこで先輩エンジニアから伝授されたのが、CSSフレームワークです。 今回はそれについて書いていこうと思います。
CSSフレームワークとは、あらかじめデザインやレイアウトが用意されていて、クラス名を指定するだけで簡単にCSSを反映させることができるとても便利なフレームワークです。 HTMLを組んで、CSSで肉付けして・・・のような地道な作業を簡略化させてくれて、なおかつ初心者では作れないようなものが簡単に使えるようになる優れものです！（笑）
これを知った僕は、案の定「すごい！楽！最高じゃん！」という感じで早速使いまくりました。 私が使用したフレームワークは「Materialize.css」です。 そして完成した、今の自分的には「めっちゃいいじゃん！」と思うアプリを他の人に見てもらうと、
「Materiallize感すごいね（笑）」 「これMateriallize使ってるでしょ（笑）」 ・・・・・・・。
なんでバレるんだよ！！！！！！！！！！！！！！！！！！！！！！！ というより使っちゃダメなのかよ！！！！！！！！！！！！！！！！！！！
となりました。（笑） 一体なぜ周りはこのような反応になったのでしょう・・・？
これだけ便利なものがあれば、みんな使いますよね。（笑） だからこそ、 「あー、これね」となってしまうようです。 確かに既存のデザインをみんなで使うという仕組みから考えれば、そうなっても仕方ないなと思います。 使うにしても、ベースのコードに自分で何かを書き加えたりして工夫することが大切なんですね・・・ 作業スピードは早くなっても、楽している分このような落とし穴があると痛感させられました。（笑）
正直、プログラミングを勉強する前は、「システムさえ作れればデザインとかはサクっといけるでしょ！」と勝手に考えていました。 しかし勉強している中でやっと、エンジニアが「フロントエンド」と「バックエンド」に分けられている意味がわかるようになりました。 本当にまだまだ知識不足です。 今はまだ駆け出しで、基礎を学んでいる最中ですが、早く自分の思い描くようなアプリが作れるように日々頑張っていこうと思います！
ありがとうございました＾＾
