【CSS】JavaScriptを使わない開閉メニュー【CSSのみで可能・はてなブログ記事で使用可能】 - Little Strange Software
どうも！LSSです！！ 最近、JavaScriptを使って色々やってみる事にハマり、記事もそればかりになってきていましたが、今回は 『JavaScriptを使わずに、はてなブログ記事内で使用可能な開閉メニュー』 の作り方を記事にしてみます！ ※はてなブログ以外でももちろん使えますよ^^ サンプルとそのコード ↓の「メニュー」をクリックすると、その下に文字が現れます！ コード 注意点！半角チルダについて とりあえず解説 「menu」と「tg01」は任意の名前です。 <input id="tg01" style="display: none;" type="checkbox" /> <label for="tg01">メニュー</label> <div id="menu">ああああああ</div> はてなブログ特有の注意点！<div>と</div>で囲んでいるのがミソ CSS部分の解説 #me
なぜダメなデザインが生まれるのか
ますます力を増すダークパターン ユーザーが思いもしなかった操作をさせて、会員登録、購入、サイト流入をさせるテクニックを「ダークパターン（Dark Patterns） / Dark UX」と呼ぶことがあります。サイトへアクセスしたら問答無用にモーダル UI を出すのは初歩と言っても良いくらい。中には行動心理や知覚をうまく利用したダークパターンもあります。 Twitter のハッシュタグ「#darkpatterns」で数多くの事例を見ることができるので、こちらも注目。 集中力が低くなった今日のユーザーは、即座に判断して行動をする傾向があります。これ自体悪いことではないですし、デザインの力が試される部分ではありますが、下記のような手法で悪用されることもあります。 情報をわざと見えにくくする ベストプラクティスを逆手にとる 罪悪感を促す 偽 X を設置する 嘘をつく ダークパターンは聞いたコトがな
見た目の美しさとアクセシビリティのパラドックス
UX Movementの著者および創設者です。UXのベストプラクティスとスタンダード、さまざまなテクニックに関する知識を共有することで、よりよいデジタルの世界をつくり出しています。 すべてのインターフェイスにはユーザーが存在し、そのユーザーはつねに多数派と少数派によって構成されています。たとえば、大半のユーザーは正常な視力をもっていますが、少数派となるユーザーは何らかの視覚障害をもっています。 正常な視力をもっているユーザーが見るものと、色覚異常および低視力のユーザーが見るものとの間には大きな隔たりがあります。何らかの視覚障害をもっているユーザーはテキストが小さすぎたり色のコントラストが低すぎると、文字がぼやけて見えたり、要素がよく見えなかったりする傾向にあります。 アクセシビリティの目標は、多くの場合忘れられがちな少数派のニーズを満たすことです。しかし、少数派のニーズを満たした結果、多数
2005年11月のYouTube投資検討｜平田 智基｜note
単刀直入に聞きます。 あなたは将来のYouTubeになりうるサービスを見抜く目が欲しいですか？ 私は何としても欲しいです。 2005年2月14日にローンチされたYouTubeは、2年も経たない2006年11月に$1.65BでGoogleに買収されました。 当時のYouTubeはほとんど売上がなかったこと、当時のGoogleにとって最大級の買収だったことからも絶対にリターンを回収できないと批判する声もありました。 しかし先日初めてYouTubeの収益が公開され、2019年には約150億ドルの売上を叩きだしており、さらに広告収入は前年比+36%で成長していることが明らかになり、Googleの慧眼たるやと思わずにはいられませんでした。 YouTubeの収益が初めて公開されました。 2017年：$8,150M 2018年：$11,555M 2019年：$15,149M 直近3年のCAGRは約35%
ECSの実践的コンテナ運用基礎を凝縮された30分ウェビナーで学ぶ | DevelopersIO
ECSを運用していくにあたり、気をつけておいたほうがよいことや改善ポイントがギュッと濃縮されたウェビナーでした。これからAWS上でコンテナワークロードを展開することを考えている全ての人にオススメな内容です。 みなさん、AWS INNOVATE視聴しましたか？ AWS Innovate オンラインカンファレンス | 2020 年 3 月 10 日 (火) 〜 4 月 17 日 (金) 開催 AWSの中の人が、幅広い分野で最新のクラウド事情を解説してくれるオンラインカンファレンスです。コロナウィルスの影響でなかなかリアルなイベントに参加する機会が難しくなりましたが、こういったオンラインで参加できるように設計されたカンファレンスはこの時期非常にありがたいですね。 いろんな分野がセッションあるのですが、自分は「実践的 AWS コンテナ運用ガイド -モニタリング、ロギング、デプロイ、スケーリングの実
効率よく学習するための20のルール
何かを学び、身につけることは時間がかかるものです。限られた時間の中で、効率よく多くのことを学ぶにはどうすべきかを、ポーランドの研究者で間隔を空けた反復学習法、SuperMemoの発案者であるピョートル・ウォズニアック氏が解説しています。 Effective learning: Twenty rules of formulating knowledge https://www.supermemo.com/en/archives1990-2015/articles/20rules ◆01：分かりにくい教材で勉強しない 学習用の教材はよくできているように見えて、実際は分かりづらい内容になっているものが多くあります。「いつか役に立つだろう」と無理して自分に合わない教材で勉強するのではなく、自分の身の丈にあった教材を探す必要があります。 ◆02：暗記する前に学ぶ 説明や解説をそのまま暗記するのではな
【Vue3に備える】実務で使うComposition APIについて考える
◆はじめにどうもこんにちは。Vueが好きすぎて社内でVueを布教している@_slontです。 今回のテックブログでは、これからリリースされる待望のVue 3を万全の体制で迎えるべく、新機能の中でも個人的にアツいと思っているComposition APIについての考察をしたいと思います。 Composition APIは一体僕たちにどんな驚きをプレゼントしてくれるのか。それを確かめるために我々はアマゾンの奥地へとむk(ry さて、近々リリース予定のVue 3は、パフォーマンス改善の他、Composition API, Fragment, Portal, Suspenceなど様々な新機能があります。 参考：まもなくやってくる Vue.js 3その中でも、大規模プロジェクトに弱いと言われていたVueの銀の弾丸として（？）、ユーザが待ち望んだComposition APIが、2系のプラグイン@vu
【保存版】課題から探すAI・機械学習の最新事例57選 | 宙畑
世の中の企業がどのように機械学習を活用しているのか事例を知り、業界全体や自社の目の前の業務で抱えている課題解決に活かせるかを考えるきっかけとなるよう、52種類の事例を紹介します。 近年、AIにおける要素技術のひとつである「機械学習」を活用したニュースを耳にすることが多く、漠然と自社でも活用したほうが良いのではないかと考えている方は多いのではないでしょうか。 世の中の企業がどのように機械学習を活用しているのか事例を知り、業界全体や自社の目の前の業務で抱えている課題解決に活かせるかを考えるきっかけとなるよう、57種類の事例を紹介します。 宇宙ビジネスメディアである本サイト「宙畑（そらばたけ）」では、そんな「機械学習」にインプットするデータの一つとして、俯瞰的・継続的にデータを取得可能な「衛星データ」を提案しています。事例と合わせて、「衛星データ」の可能性にも注目いただけると幸いです。 ※202
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
Vue.jsを使用してさまざまなフォームを簡単に実装できる -Vue Formulate
Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。 サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。 Vue Formulate Vue Formulate -GitHub Vue Formulateの特徴 Vue Formulateのデモ Vue Formulateの使い方 Vue Formulateの特徴 Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包
イミュータブルデータモデル - kawasima
CRUDのうちUPDATEがもっともシステムを複雑化する。更新には複雑なルールが伴うからだ。業務的に複雑なルールが存在するのは仕方ないこともあるが、システム、設計で複雑さを更に増さないようにしたい。UPDATEに着目し、その発生をできるだけ削ることによって複雑さをおさえるためには、まずデータモデルをそのように設計しておかなけれなならない。このイミュータブルデータモデルは、それを手助けする手法で、手順に沿って実施すればある程度のスキルのバラつきも吸収できるように組み立てられている。
LAMP 構成のシステムが抱えていた問題を Amazon API Gateway + AWS Lambda のサーバレス構成にして解消した話 - WILLGATE TECH BLOG
ウィルゲートのアーキテクト兼技術広報の岡田（@okashoi）です。 今からおよそ 1 年前に取り組んだ、社内システムをリニューアルによってサーバレス化した事例についての紹介と、1 年経過したところのふりかえりや所感を書きたいと思います。 システムリニューアルの背景 利用量の増加に対してスケールしにくい サーバリソースの利用効率が悪い エラーが発生した場合の原因究明が難しい リニューアルプロジェクト発足 目的は「スケーラビリティ向上」 「コスト削減」 「信頼性向上」 メンバー3 名でおよそ半年にわたるプロジェクト 目的へのアプローチ Amazon API Gateway + AWS Lambda によるサーバレスアーキテクチャの採用 Amazon Elasticsearch Service を用いたログの可視化と運用を考えたログ設計 プロジェクトでの取り組み 機能の洗い出し Go 言語 +
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
