昔のカーラジオの選局ボタンを模したデザインのGUIのひとつで、『ひとつをオンにするとほかのボタンがオフとなる』ようなボタンのこと。←→「チェックボックス」 見た目は、ボタンではなく、ポチマークのよう。 一例で言えば、このキーワードのスコアのところの『リンク不要/リンク可』の左についているものが、ラジオボタンそのものである。
どうも!LSSです!! かなり前に、 little-strange.hatenablog.com という記事を出し、その後も何度かそれに似たものを出していました。 これはチェックボックスを使用した、単一のメニューの開閉を実現するものでしたが、今回はラジオボタンを使用して「複数のうちからひとつを開く」開閉メニューを作ってみました。 ラジオボタンによる開閉サンプル コード 使い方 あとがき ラジオボタンによる開閉サンプル .rdd input{display:none;} .rdd label,.rdds{display:block;} .rdds{ width:300px;height:35px…
どうも!LSSです!! JavaScriptを使わず、CSSだけで動作するフォトギャラリーを作ってみました。 CSSで作るフォトギャラリー コード 使い方 あとがき CSSで作るフォトギャラリー .cglry{ display:grid; /*gridレイアウト*/ grid-template:repeat(8,1fr)/1fr 6fr 1fr; /*縦8行に分割/横1:6:1の比で3列に分割*/ gap:5px; /*各グリッドの間に5pxの隙間*/ } .cglry input{display:none;} /*ラジオボタン非表示*/ .cglry label{grid-column:1/…
今回は、HTMLのフォームタグを復習したので見返して使えるように簡単な備忘録として残します。 色々なフォーム部品がある。 フォームタグ 1行テキストのフォーム <input type="text"> <input type="text", value="hello"> # value属性で初期値を入れておける。画像の左から2番目 パスワードのフォーム <input type="password"> # 画像の左から3番目 複数行テキストのフォーム <textarea name="テスト">ああああ※初期値はここに入力する</textarea> # 画像の一番右 入力例を入れておきたい場合 記入…
Button COMPは、Button Typeを「Radio Up」にして、同じラベルを付けるとラジオボタンになります。 ただマウスでボタンを押すのはめんどくさいので、キーボード入力のラジオボタンを作ってみました。 ※もっと良い実装を知ってる方、よろしければ教えてください🙇♂️ まずは、必要なオペレーターを配置します。今回は1~4のキー入力を使ったラジオボタンを作るので、Keyboard In CHOPを4つ配置して、それぞれCount CHOPとMath CHOPを繋げます。 そしたら、keyboardin1のkeysを1に、keyboardin2のkeysを2という感じにkeyboar…
CakePHPのラジオボタンですが、ヘルパーで設置すると縦並びになって、個人的に非常に嫌でした。そこでこのラジオボタンを横並びにする方法を説明していきます。結論から言うと、自分でCSSを書くのが一番手っ取り早いです。自分でdisplay: flex;などして、上書きしてしまう方法です。もともとのコードをいじるとなると、かなり細かい作業になってしまうので、オススメしません。 元々のかんじ 書き換えたビューテンプレート CSSを読み込む CSSを書く 終わりに 【自分の環境】macOS Catalina PHP7.4.2 CakePHP3.8 MAMP5.7 Apache2.2 MySQL5.7 …
今回は、GUI部品(ラベル、テキストボックス、チェックボックス、ラジオボタン)を表示してみます。 Python(tkinter)は少し自分の知っているものとしくみが異なるようで、ラベルなどを生成する関数にウィンドウ(フレーム)を渡すことで、その渡したウィンドウ(フレーム)に表示されます。 自分が知っている言語では、ラベルなどのオブジェクトを作成、ウィンドウ(ラベル)に追加する流れで部品が表示されました。 そんなライブラリですので、少し関数を組んで部品を追加表示するようにしてみました。 # -*- coding: utf-8 -*- # 日本語コメントをエラーとしないように、UTF-8で保存 #…
どうも!LSSです!! だいぶ前の記事になりますが というのを書いていました。 HTMLのフォームパーツであるチェックボックスを非表示で用意し、「チェックボックスの状態からCSSで分岐できる」というのを利用したものですね。 実際のところ、CSSでユーザー操作によるオン/オフ切り替えは、この「チェックが入ってるか否か」ぐらいしか方法がないようです。 ですが、「HTMLのフォームパーツ」で「チェック状態にできる」ものとしては、チェックボックスの他に「ラジオボタン」があります。 ラジオボタンってのは、 こんな風に、「いくつかの選択肢から一つを選んで、ひとつだけ有効になる」というパーツですね。 今回は…
目次 クラスレスCSS(simple.css)を@importして拡張する simple.css simple.cssを@importして拡張する @importして拡張する クラスレスCSS(simple.css)を@importして拡張する CSSは「Bootstrap」・「Bulma」・「Buefy」などのフレームワークを使ってきました。 どれも、かっこいいですし気に入ってたのですが、ふと「フレームワーク」に依存してCSSの基本的なことを忘れかけている自分に気づいて個人で使うのをやめました。 今は「クラスレスCSS」を主に使っています。 クラスレスCSSはファイルサイズも小さく読む気にな…
今回は、バースデイギフトの購入からお返し到着までの流れ、また中身について紹介します! ギフトの購入を検討している方のご参考になれば幸いです。 お急ぎの方は目次から見たい項目に飛んでくださいね! ごあいさつ 実際に購入してみた。(購入までの流れ) まずはストア画面へ! 住所・支払い方法入力、購入! お返しが届いたぞ!気になる中身は…? 箱は?どう届く? 箱を開けるぞ! ①称号アクリルキーホルダー ②メッセージカード ➂お返しアクリルキーホルダー おわりに ごあいさつ こんにちは!プロセカ大好き一般人のヨダカです。 突然ですが、推しの誕生日、祝ってみたくないですか? 様々な作品において推しの誕生日…
みなさん、こんにちは! ともやです! 【この記事を書いている私について】 ・ブログ歴約1ヶ月 ・製造業勤務 はてなブログにお問い合わせフォームを設置してみました! はてなブログでお問い合わせフォームを設置する方法は10の手順があります。 はてなブログでお問い合わせフォームを設置する方法 ① Google Chromeをインストール ② 下にひたすらスクロール ③ 紫のフォームを選択 ④ Googleフォームを使ってみる ⑤ 「空白」をクリック ⑥ フォームの詳細を入力 ⑦ コピーを作成する ⑧ 再度フォームの詳細を入力 ⑨ HTMLコードをコピー ⑩ 設置する では、順に説明していきます。 手…
完全年功序列の当社に人事考課制度を導入するために奮闘したことを思い出しています。kittan.hatenadiary.jp 業務改善は意識改善でもある 導入が決定した制度について 制度の全容と導入に至るポイント 改善提案アプリ ①提案用部分 ②評価者使用部分 ③プロセス管理 最後に 業務改善は意識改善でもある 先述した3つの案は導入には至りませんでしたが、会社として「何かしらの評価をし、賞与に反映しよう」という考えにはなってきてはいるようでした。従業員側も、「一律の評価」に対する不満の声も上がるようになってきました。 こういった意識の改善が業務改善の大きなポイントでもあると思います。 そういう…
神奈川でスマブラの大会の主宰をしているクロマキバレットです。 以前「smash.gg」に関する記事を書いたのですが、 ・名称がsmash.ggからstart.ggに変更になったこと ・記事が古くUI等が変化していること もあるので、改めて記事にしておこうと思います。 過去記事 smash.ggをオフラインのゲーム大会で使用すべき理由と、イベント登録方法についてまとめ - Necromakeycon-ネクロマキコン- smash.ggの当日の操作方法と注意点まとめ - Necromakeycon-ネクロマキコン-
これを見ればPythonマクロ実行までできる。
今日は久しぶりに真面目に勉強した日となりました!合計7時間くらいしたかな? 本日の学習内容 DOMについて(DOMツリーやNode) 要素の取得 querySelector、getElementById 複数の要素の取得 querySelectorAll、getElementsByClassName、getElementsByTagName addEventListener 要素の属性を操作する方法 class属性を扱うために便利なclassList JavaScriptでカスタムデータ属性を扱う方法 要素をDOMに追加する方法 createElement、appenedChild 要素の複製…
前回の続き 基本の土台としてはそれなりにカタチになったと思うので、スライダー以外のUIパーツを作ってみようと思います。 今回の仕様はキーボードのカーソルキーで操作する想定にしています。 スライダーがUIパーツとして登場する画面にありそうなやつを 3種 選んで作ってみようと思います。 Index スピンボックス Designer Graph レベル選択 Designer Graph チェックボックス Designer Graph 組み込む Designer Graph 最後に スピンボックス あらかじめ決められたいくつかの選択肢が、順番に切り替えられるタイプ。コンシューマーゲームが登場したころか…
こんにちは、ちょこです。 このページでは、ゲームUIデザイナーを目指す学生さんが知っておいた方が良さそうな用語をまとめています。 言葉を知ることで人に伝えやすくなったり、検索しやすくなります。 感覚的には以下の3つの要素を掛け算している感じです。 グラフィックデザイナー UIデザイナー ゲーム業界の専門性 用語は随時追加、更新します。 グラフィックデザイナー 基礎 デザイン4大原則 グラフィック アイコン サムネイル ピクトグラム インフォグラフィック 配色 4つの原理 ユニバーサルカラー プルキンエ現象 レイアウト マージン グリッドシステム アスペクト比 セーフエリア ランドスケープ ポー…
いつも読んで頂きありがとうございます。 週末はブログ活動はしないで家族サービスと自分の自由な日にしています。 ユニフォームを忘れる息子 当日は買い物の予定だった 帰りに思わぬ出来事 次の日にディーラーで確認 最後に ユニフォームを忘れる息子 息子は土曜日に函館でサッカーの試合があるので前日から持ち物を用意して朝ユニフォ ームに着替え上にジャージを着て家を出て行きました。息子が家を出た後に嫁が着替え を片付けようするとユニフォームの短パンがあるのに気づきます。 そして息子にLINEで確認すると履いていないので函館まで持ってきてと言われます。 さて、ここで問題です。なぜ息子はユニフォームの短パンを…
1ページに ・テキストボックス ・ラジオボタン ・チェックボックス ・チェックボックスが選ばれていた場合のみ入力するテキストボックス が混在していて、入力や選択された情報を、どうやってデータベースに登録するか悩みました。項目に合わせて、カラムを用意してもいいのですが、項目が変わったら、テーブルも設計しなおしになって、手間がかかりそうです。どうすべきかと考えて、 ・項目名称と入力や選択された情報を、それぞれカラムを用意して、必要なだけテーブルにレコードを登録する。 ・読み込んだ後は、項目名称を使って、データを扱う。 という方法を採用しました。 Photo by Markus Spiske on …
気合入れなおしてまたやっていきます!今回でとりあえずhtmlとcssの範囲は最後です。明日からはjavascriptの学習に入っていきます。こちらも学習期間は1週間くらいが目安かなぁ、まあ期間は個人的にあんまりこだわってないけど…。 本日の学習内容 HTMLのフォーム部品 <input><textarea>タグとそれらに関係する属性 <label>タグとそれを紐づける方法 ドロップダウンリストの作り方と<select><option>タグ チェックボックスの作り方と<fieldset><legend>タグ ラジオボタンの作り方 新しいブラウザで使用可能なフォーム部品 ボタンの作り方と<butt…
Googleフォームの使い方を説明します。 ほかの解説動画はこちら。 Googleフォームとは Googleアカウント作成、ログイン Googleフォーム作成と保存 フォームの入力アドレスは? 回答を表にまとめるには?(保存先の設定) 回答の削除 質問の作り方 回答後のメッセージ 解説動画の作り方 9VAeきゅうべえのダウンロード 画面キャプチャ方法 キャプチャ画像を9VAeに読みこむ 文字、矢印を入れる 文字の色、縁、影をつける ひとコマアニメーションにする アニメGIF、動画出力 9VAe は素材動画が作れる無料アプリ 9VAeきゅうべえに関する質問 Googleフォームとは ユーザーアン…
ある日の夜中娘を抱っこしていた時ふと、昔勤めていた会社の事を思い出し、「あの会社がkintoneを導入していたらどうなっていたのかな」という妄想が走りました。学生やチームがTシャツやスウェットやウィンドブレーカーなどのオリジナルチームウェアを作成する会社で、私は「製造部技術科」という部署で実際にウェアにプリント加工をしていくという作業をしていました。20年近く前のことになるので記憶も薄れてきてはいますが、何となく効率が悪くてモヤモヤしていた記憶を頼りに妄想kintone化をしてみようと思います。 kintone化できそうな業務 受注から出荷まで 受注一覧アプリ デザイン確認アプリ 顧客管理アプ…
皆さんこんにちは、pregum_foxです。 今回はエラー監視サービスとしてよく使われるSentryをFlutterで使ってみました。 スクショの部分から見たい方は こちらから 以下目次です。 開発環境 動作環境 Sentryとは Flutterからエラーレポートを送信する前の事前準備 Sentryにアカウント登録 Flutterのアプリからレポートを送る Sentry側の作業 プロジェクト作成 Flutter側の作業 サンプルアプリのClone DSNの設定 スクリーンショットも合わせて送る方法 Flutter側の作業 リビジョンの変更 コードの実行 (注意)iOSの場合 感想 参考サイト