ファイルのダウンロード fontawesomeのダウンロードページからFor The WebのFree For Webからファイルをダウンロードする ディレクトリ ダウンロードしたファイルを解凍すると以下のようなディレクトリになっているかと思います。 fontawesome-free-6.1.1-web ├ css ├ js ├ less ├ metadata ├ scss ├ sprites ├ svgs ├ webfonts └ LICENSE.txt SCSSをよく読んでないのであれですが、恐らく使うファイルはscssとwebfontぐらいだと思いますがわからなければすべて自分のcssフォルダに移しまししょう。 今回は以下のように設置します。 css ├ fontawesome-free-6.1.1-web │ ├ css │ ├ js │ ├ less │ ├ metadata │ ├ scss │ ├ sprites │ ├ svgs │ ├ webfonts │ └ LICENSE.txt └ common.scss SCSS編集 common.scss $fa-font-path: "./fontawesome-free-6.1.1-web/webfonts"; @import "./fontawesome-free-6.1.1-web/scss/fontawesome.scss"; @import "./fontawesome-free-6.1.1-web/scss/solid.scss"; @import "./fontawesome-free-6.1.1-web/scss/brands.scss"; common.scssに上記を記述してください。ファイルの設置個所が違う場合は読み込めるように書き直してください。 $fa-font-pathはfontawesome-free-6.1.1-webの中のwebfontsまでのパスを書いてください。 $fa-font-pathのパスが間違っている場合はページでアイコンの表示が□になっており、検証ツールのconsoleに GET file:///C:/[使用しているパス]/fontawesome-free-6.1.1-web/webfonts/fa-brands-400.ttf net::ERR_FILE_NOT_FOUND のようなエラーが出るのパスを正しく入力してください。

ラジオボタンのカスタマイズの仕方をいつも忘れてしまうので、自分用にメモ。 HTML <label> <input type="radio" name="性別" value="男性" class="bl_gender"> <span>男性</span> </label> 男性、女性で選択できるラジをボタンを想定。 CSS .bl_gender { display: none; /* 初期のラジオボタンを非表示 */ } .bl_gender + span { /* .bl_genderの次のspan */ position: relative; padding-left: 40px; } .bl_gender + span::before { /* ラジオボタンを作成（外側） */ content: ""; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #969696; background: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .bl_gender + span::after { /* ラジオボタンを作成（内側） */ content: ""; width: 12px; height: 12px; background: #006688; border-radius: 50%; position: absolute; top: 50%; left: 6px; transform: translateY(-50%); opacity: 0; /* 基本は非表示 */ } .bl_gender:checked + span::after { /* 選択されたボタンだけ表示 */ opacity: 1; } ↓ こんな感じになります。 bl_genderというクラス名をつけてますが、input[type="radio"]でもいけるとおもいます、たぶん！

はじめに 先日、対戦型ポケモンWordleをリリースしました。 リリース当初、ただテキストボックスにポケモンの名前を入力する形にしており、入力履歴の管理ができておりませんでした。 入力履歴の機能を追加しようと、大元のWordleを参考に入力用のボタンを用意しようと思いました。 ただ、日本語は50音＋濁点・半濁点で80ボタン以上必要で、このボタンからポチポチするのは入力が大変だろうなと思いました。 そこで、ブラウザ上でフリック入力できる仮想キーボードを作ってみました。 完成品 See the Pen フリック入力 by yotty (@yotty) on CodePen. パソコンからでは直接フリック機能が使えません。 パソコンからフリック機能を確認したい方は、デベロッパーツールでデバイスを変更することで試すことができます。 ※Chromeの場合 F12でデベロッパーツールを開き、以下のアイコンからデバイスをモバイル端末に変更 実装 以下、実装内容の解説です。 事前準備 事前準備としてさくっと外観を作っておきます。 また、フリック入力の際、長押しで文字選択されたり、入力のタップでズームされたりしないように以下を追加しておきます。 css body{ user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; touch-action: none; } さらに、フリックした際、濁点・半濁点の切り替えを行った際に入力すべき文字を特定するために以下のような配列を用意しておきます。 const l_word = [ ['ア', 'イ', 'ウ', 'エ', 'オ' ] , ['カ', 'キ', 'ク', 'ケ', 'コ' ] , ['サ', 'シ', 'ス', 'セ', 'ソ' ] , ['タ', 'チ', 'ツ', 'テ', 'ト' ] , ['ナ', 'ニ', 'ヌ', 'ネ', 'ノ' ] , ['ハ', 'ヒ', 'フ', 'ヘ', 'ホ' ] , ['マ', 'ミ', 'ム', 'メ', 'モ' ] , ['ヤ', '', 'ユ', '', 'ヨ' ] , ['ラ', 'リ', 'ル', 'レ', 'ロ' ] , ['ワ', 'ヲ', 'ン', 'ー', '' ] ]; const l_word_switch = [ ['ア', 'ァ'] , ['イ', 'ィ'] , ['ウ', 'ゥ'] , ['エ', 'ェ'] , ['オ', 'ォ'] , ['カ', 'ガ'] , ['キ', 'ギ'] , ['ク', 'グ'] , ['ケ', 'ゲ'] , ['コ', 'ゴ'] , ['サ', 'ザ'] , ['シ', 'ジ'] , ['ス', 'ズ'] , ['セ', 'ゼ'] , ['ソ', 'ゾ'] , ['タ', 'ダ'] , ['チ', 'ヂ'] , ['ツ', 'ッ', 'ヅ'] , ['テ', 'デ'] , ['ト', 'ド'] , ['ハ', 'バ', 'パ'] , ['ヒ', 'ビ', 'ピ'] , ['フ', 'ブ', 'プ'] , ['ヘ', 'ベ', 'ペ'] , ['ホ', 'ボ', 'ポ'] , ['ヤ', 'ャ'] , ['ユ', 'ュ'] , ['ヨ', 'ョ'] ]; フリック入力 フリックを検知するために、「touchstart」「touchmove」「touchend」の3つのイベントを利用します。 「touchstart」で、タッチした場所を記憶しておきます。 その他、フリックしたときのオブジェクトの位置や文字などの設定もしています。 touchstart function onTouchStart(event) { $(event.currentTarget).addClass('gray_for_touch'); position = event.originalEvent.touches[0]; direction = 'c'; //フリックのオブジェクトの位置を移動させておく offset = $(event.currentTarget).offset(); $('.kb_key_u').offset({ top: offset.top - 48, left: offset.left }); $('.kb_key_d').offset({ top: offset.top + 48, left: offset.left }); $('.kb_key_l').offset({ top: offset.top, left: offset.left - 48 }); $('.kb_key_r').offset({ top: offset.top, left: offset.left + 48 }); //テキストセット var l = l_word.find(x => x.includes($(event.currentTarget).text())); $('.kb_key_u').text(l[2]); $('.kb_key_d').text(l[4]); $('.kb_key_l').text(l[1]); $('.kb_key_r').text(l[3]); }; 「touchmove」では、移動した現在の位置を取得して上下左右にどれだけ移動したかを計算します。 上下左右それぞれの移動距離のmaxを取って移動方向を検知し、閾値20を超えたらその移動方向にフリックしたと判定させています。 touchmove function onTouchMove(event) { direction = 'c'; $('.kb_key_u').addClass('transparent'); $('.kb_key_d').addClass('transparent'); $('.kb_key_l').addClass('transparent'); $('.kb_key_r').addClass('transparent'); $(event.currentTarget).addClass('gray_for_touch'); $(event.currentTarget).removeClass('transparent'); var new_position = event.originalEvent.touches[0]; var u = position.screenY - new_position.screenY; var d = new_position.screenY - position.screenY; var l = position.screenX - new_position.screenX; var r = new_position.screenX - position.screenX; var max = Math.max(u, d, r, l); if (max < 20) { return; } var input_key = $(event.currentTarget).text(); $(event.currentTarget).removeClass('gray_for_touch'); $(event.currentTarget).addClass('transparent'); if (max == u) { direction = 'u'; $('.kb_key_u').removeClass('transparent'); } else if (max == d) { direction = 'd'; $('.kb_key_d').removeClass('transparent'); } else if (max == l) { direction = 'l'; $('.kb_key_l').removeClass('transparent'); } else if (max == r) { direction = 'r'; $('.kb_key_r').removeClass('transparent'); } }; 「touchend」では、「touchmove」で検知したフリックの方向から入力すべき文字を判断します。 フリックの方向によってindexを変えて、事前に用意した「l_word 」から入力する文字を決定します。 あとは、テキストボックスの値の最後にその文字を付与します。 touchend function onTouchEnd(event) { $('.kb_key_u').addClass('transparent'); $('.kb_key_d').addClass('transparent'); $('.kb_key_l').addClass('transparent'); $('.kb_key_r').addClass('transparent'); $(event.currentTarget).removeClass('gray_for_touch'); $(event.currentTarget).removeClass('transparent'); var input_key = ''; var key = $(event.currentTarget).text(); var l = l_word.find(x => x.includes($(event.currentTarget).text())); var index = 0; if (direction == 'c') { index = 0; } else if (direction == 'u') { index = 2; } else if (direction == 'd') { index = 4; } else if (direction == 'l') { index = 1; } else if (direction == 'r') { index = 3; } var txt = $('#txt').val(); if (l[index] == '') { return; } $('#txt').val(txt + l[index]); }; 濁点・半濁点切り替え テキストボックスに入力されている最後の文字を「l_word_switch」から探し、indexを1ずらして濁点・半濁点を切り替えて文字を取得しています。 濁点・半濁点切り替え function onTouchStart_switch(event) { $(event.currentTarget).addClass('gray_for_touch'); temp_word = $('#txt').val(); targer_word = temp_word.slice(-1); var l_switch = l_word_switch.find(x => x.includes(targer_word)); if (l_switch === undefined) { return; } var index = l_switch.indexOf(targer_word); if (index < 0) { return; } else if (index == l_switch.length - 1) { index = 0; } else { index += 1; } input_key = l_switch[index]; $('#txt').val(temp_word.slice(0, -1) + input_key); }; バックスペース テキストボックスの最後の文字を削除するだけで実装できます。 バックスペース $(document).on('touchstart', '#kb_key_bs', function (event) { $(event.currentTarget).addClass('gray_for_touch'); var temp_txt = $('#txt').val(); $('#txt').val(temp_txt.slice(0, -1)); }); おわりに 実際のアプリでは、今回紹介したフリック入力を組み込み、入力欄を細かく分けることによって入力履歴の管理を実現しています。 アプリが気になった方はこちらから遊ぶことができるので、ぜひ一度触ってみてください！ 参考

今まで Sass と CSS変数 を組み合わせた利用はできないと思っていました。 がしかし インターポレーション #{} を利用すれば利用できたんですね… もっと早く知りたかった… たとえば、カテゴリーごとに見出しやボタンなど、要素の色を変えることって結構ありますよね？ 今までは Sass のマップで色を管理し、 @each を使って各セレクタに色を設定していました。 これだと、色を変更する要素が増える度に設定しなければならず、とっても大変… というわけで、Sass と CSS変数 を組み合わせて色をラクラク管理しちゃいます！ 準備 Sass のマップを利用して色を管理します。 そして、 @each を使って body 要素にカテゴリーごとのCSS変数を設定します。 scss $category-colors: ( 'primary': #FF0000, 'secondary': #0000ff, 'tertiary': #ffff00 ); @each $name, $color in $category-colors { body.#{$name} { // インターポレーションを利用してCSS変数にSass変数を代入 --category-color: #{$color}; } } 色を利用する CSS 色を利用したい要素にCSS変数を設定します。 style.css .title { color: var(--category-color); } .btn { background-color: var(--category-color); } HTML 利用したい色のカテゴリー名（Sass のマップのキー）を body 要素の class に設定します。 body 要素の class名 を変更するだけで要素の色を変えることが可能です。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <!-- Sass のマップのキーを設定する --> <body class="primary"> <h1 class="title">タイトル</h1> <button type="button" class="btn">ボタン</button> </body> </html>

CSSでリストマーカーを作成する。 CSSのリストマーカーはdiscなどがあるが、色を変更することや形を変更することができない。 css li { position:relative; padding-left:15px; list-style :none; } li:before { content:""; width:10px; height:10px; background:#ff0000; position:absolute; left:0px; top:5px; } 上の例では赤い四角のリストマーカーが作成できる。 丸いマーカーが欲しい場合は li:beforeの中にborder-radiusを追加する

CSSでリストマーカーを作成する CSSのリストマーカーはdiscなどがあるが、色を変更することや形を変更することができない。 css li { position:relative; padding-left:15px; list-style :none; } li:before { content:""; width:10px; height:10px; background:#ff0000; position:absolute; left:0px; top:5px; } 上の例では赤い四角のリストマーカーが作成できる。 丸いマーカーが欲しい場合は li:beforeの中にborder-radiusを追加する