CSSカスタムプロパティのとりあえずのメモ

CSSカスタムプロパティのとりあえずのメモ

CSSカスタムプロパティとは 基本的にはMDNに記載されますが要するにCSSに変数を定義して、関数で値を使えるようになる感じです。 :rootという擬似クラスを使用して、変数を設定します。以下、サンプルです。 :root { --primaryColor: #4525F2; --primaryActiveColor: #4324EA; --primaryDisabledColor: #4324EA; --secondaryColor: #F2F4F8; --secondaryDisabledColor: #E9ECF2; --White: #FFF; --Black: #1C2126; --Gray: #8B8B8B; } 変数名の付け方 変数名なのでなんでもいいんですが、わかりやすい方がいいので以下サイトを参考に自分でちょこちょこ変えてます https://material.io/design/color/the-color-system.html#color-theme-creation 意味のあるものは`Active`とか`Disabled`とかの名前をつけてあげて、意味のないものは`300`とか`700`とかをつけてあげるのが良いかと。 変数名をつけた方が良い要素 色 font-family（複数様々な場所で指定する場合） font-size margin padding border フォントサイズやマージンは数値を設定するだけなので、変数名の方が長くなってしまいあんま意味ないと思いがちです。 が、一番最初にメディアクエリを指定して画面サイズに応じて数値の設定をすると、どの画面サイズでもデザインとユーザービリティ両方を担保できるようになるので使い勝手がいいです。 以下見本です。 @media screen and (min-width:480px) { :root { --heading1Size: 24px; --heading2Size: 22px; } } @media screen and (min-width:768px) and ( max-width:1024px) { :root {
あんず
あんず

Python、例外処理の落とし穴

例外処理が何か知らない方は👇を事前に読む。Pythonの例外処理（try, except, else, finally） 例外処理は便利だ。何がって？どんなに深くネストした関数の底からでも、上位層の海面まで引っ張り上げてくれる事だ。処理を一つ一つこなしてゆき、どこかで問題が見つかれば総合的にデータの廃棄処理を実行する。これはプログラムを簡潔にするのに役立つ、そして”止まらないプログラム”を書くことが比較的容易になる。 ところが、便利と落とし穴は表裏一体といえる。プログラムは書いたとおりにしか動かないと言うが、自分の意図したとおりに動くとは限らない。この書いた≒意図したが成立してしまう原因が思い込みである。これを避けるには実際にコードを書いて仕様と意図の差を埋める作業が必要になる。 def divide(i): try: print(1) return 5 / i + int(i) except ZeroDivisionError as e: print(2, e) except Exception as e: print(3, e) else: print(4, "success") finally: print(5, "finaly") この関数にdivide(0), divide(1), divide("2")を入れたときに出力されるデータを正確に予想できる人はいるかな？ (/ω＼) p|дﾟ) 答え >> divide(0) 1 2 division by zero 5 finaly >> divide(1) 1 5 finaly Out[13]: 6.0 >> divide("2") 1 3 unsupported operand type(s) for /: 'int' and 'str' 5 finaly ここで重要なのはfinallyを必ず通る事である。一般的にreturn文は強力なので、慣れている人だとdivide(1)とdivide("2")はfin

Python、例外処理の落とし穴
100
Namuyang
Namuyang

spotlightにそれっぽいアマゾンの商品リンクを埋め込む方法

※スマホに対応しました。 spotlightにもnoteみたいにこういうアマゾンへのリンクを貼りたいですよね。 生成ツールなどは無いので自分で作ってみました。 嘘喰い 1 (ヤングジャンプコミックスDIGITAL) Kindle版 Kindle本 マンガ 遊ぶ金欲しさに闇金に手を出し、取立てに追われる青年・梶くんの前に現れた謎の男・斑目貘。自らギャンブラーと名乗り、借金返済を手伝うと豪語する貘は、闇カジノへと乗り込むが…!? 528円   ソースコード 上に貼った貼り付けるソースコードはこんな感じになっています。 <div style="display: flex; margin-left: 10px; border: 1px solid #e6e6e6; border-radius: 4px; max-wi

spotlightにそれっぽいアマゾンの商品リンクを埋め込む方法
100
ocknamo
ocknamo

システムエンジニアの条件【1.調査】

10年以上SEを仕事としてきたが、多様な役割がある中でSEの条件は以下の3つに集約されると考えている。 1.調査2.設計3.提案 この3つのどれか一つ欠けると、SEとしてイマイチな人材になってしまう。 SE を目指されている方は、これからのキャリアでこの３点が磨かれるようなポジションをプランニングされることをお勧めしたい。 各要素についての紹介と、なぜその3つなのかを解説する。 今日は調査能力について。 SEは、日々システムトラブルと相対する。プログラムのバグ、ミドルウェアの不具合、ハードウェア障害。 これらは様々なテスト手法で炙り出されるだけでなく、時に予測不可能な挙動を持って唐突にエンジニアを襲う。 自身の、チームの生産物であり、守るべき資産であるシステムが発した異常からは、おおよそ逃げる事ができない。 事象に関する調査は、その第一段階のアプローチであり、この深さが深いほど正確な判断材料となる。 解決への糸口だけでなく、原因が判明すればそれが人為的なものか、製品の抱えた問題であるのか、あるいは製品やプログラムの組み合わせによって生じた問題か、が明らかになる。 その問題を取り除くためのより良い、「設計」は何であるか。また、解決するためのアクションを「提案」する材料たり得るかは、この調査という行為によって導かれる。 基本にして最も重要なSEの能力だ。 （つづく）  

システムエンジニアの条件【1.調査】
kana_k
kana_k

Unity を IPFS にホストする方法

概要 Unity ：ゲームを作成し、IPFS 用にエクスポートします。 Github：デプロイのためにゲームをGithubにアップロードします。 Fleek：FleekはGithubからコンテンツを取得し、IPFSに公開します。Githubへのアップデートは自動的に更新されます。 Unity Unityのセットアップは割愛します。 作成したゲームをエクスポートします。 その際、WebGLを選択しプラットフォームを切り替えます。 プロジェクトをビルドして保存します。   Github Githubアカウントを作成し、リポジトリに移動して、[新規]をクリックします。 リポジトリに名前を付けます。必要に応じてREADMEを初期化します。 UnityからエクスポートしたファイルをGithubリポジトリに追加します。 私は試しにGithubにアップされている MozillaReality/unity-webxr-export をフォークしてIPFSにアップしてみました。こちらSetting up a Unity project for WebXRを参考に後ほど個人的にいじってみたいと思います。   Fleek Fleek.coにSIGN UPしてGithubでログインします。 「Add New Site」ボタンで新しいサイトを追加します。 「Connect with Github」ボタンでGithubに接続します。

Unity を IPFS にホストする方法
masia02.eth
masia02.eth

【Spotlightの使い方】アイキャッチ画像に最適のサイズとは？

Spotlightで記事を書く際のアイキャッチ画像に最適のサイズを解説します。 先に要点を書きます。 記事アイキャッチの表示サイズは約 736 × 386 ピクセル 最新記事サムネイルの表示サイズは 420 × 189 ピクセル 過去記事サムネイルの表示サイズは 96 × 96 ピクセル※画像は自動リサイズ・自動トリミングされる 以下、サンプル画像を使って、表示される領域を詳しく解説します。 ↓サンプルに使う画像はこれ。 ベルギービールとチーズと生ハムのお店の「サンタルヌー」で、店主ヨースケが美味しそうな生ハム原木を切ってる写真です。 世界初のNEM決済のお店であり、ICOにて店舗移転を実行したお店です。 ↓実際に記事のアイキャッチ画像として使用したらこうなりました。写真の上下が切れてしまいましたね。 ↓ソースコードを拝見。記事アイキャッチの表示サイズは約 736 × 386 ピクセルのようです。（小数点は切り上げました）  ↓つまり、約19:10の長方形にトリミングされ、グレーになっている部分は表示されません。（上下が切れる） ↓Spotlightに投稿した直後は、最新記事としてトップページに表示されます。ここでの表示サイズも考慮しましょう。 <img src="https://s3-ap-northeast-1.amazonaws.com/spotlight-s3-001/article/20200725110547mceu_76679313171595642748184

【Spotlightの使い方】アイキャッチ画像に最適のサイズとは？
114
#にすた氏
#にすた氏

インフラシステム保守運用の仕事

システムの保守運用は過酷な仕事だ。ここ1年弱ほどとあるシステムの保守運用に関わって、つくづくそう思う。 大企業や公的に用いられる基幹システムは年間を通して稼働し続け、システム停止可能な時間が短い設計である事が多い。 何かしらシステムの変更を加えるならば、原則、土日祝日の対応となることがほとんどだ。 <p style="font-size: 16px; box-sizing:

インフラシステム保守運用の仕事
kana_k
kana_k

【Spotlightの使い方】記事にツイートを埋め込む方法

こちらが完成図。 #支払いはモナで pic.twitter.com/lFn5TlQNKW — もなこいにすた3.0⭐⭐ (@MONACOINISTA) September 8, 2019 Twitterのツイートを埋め込む では、下記で具体的にその方法を説明します。 １．ツイートを選択し、右上のメニューを押します。 ２．「ツイートを埋め込む」を押します。 ３．青色の「Copy Code」を押すと、クリックボードにコードがコピーされます。 ４．Spotlightの記事投稿画面で、クリックすると下記が表示されます。 ５．「Embed」を押します。 ６．コードをペーストします。（３．でコピーしコード。） <img src="https://s3-ap-northeast-1.amazonaws.com/spotlight

【Spotlightの使い方】記事にツイートを埋め込む方法
#にすた氏
#にすた氏

悟りコインの開封率を調べてみた

前置き あまり覚えていないのだが2016年6月頃だったようだ。悟りコインの配布が某通貨コミュニティの板で話題になった。当時、界隈の空気がどん底だった(のだろうか？)ので募集者が少なく(割れたはず)、人によっては5枚とか25枚とまとめて送られてきた。 上記は所有している悟りコイン。青いのはZaifのキャンペーンで配布されたもの。もちろん今でも大事に保存してある。Bitflyerからオリジナル悟りコインが販売されていたようだが購入していない。惜しいことをしたと今でも悔いている。 本題 他にもガチャで販売されたりと配布イベントは多くあったようだ..たぶんね。大量に配布＆販売された..そうなると気になってくる事がある。これにはホログラムシールにより0.001BTCの入ったアドレスの秘密鍵が隠されている。いったいどれだけの所有者が開封したのだろう？ ブロックチェーンは取引がすべて記録され公開される。なのでアドレスさえわかれば調べる事はできる。悟りコインの公式サイトにて全てのアドレスが公開されている。Link 今のところ50500個の悟りコインが存在し、1TXにつき1000～2000のoutputsで分配されている。なので25~50TXを集計すればいいが、手作業ではやっていられない。そこでPython🐍でスクリプトを組んで集計する。 結果 まぁ妥当な数字だなっというのが感想。副産物として例外的な悟りコインが発見されてとても面白い。これが本当のレアモノという事だろうか？ 3000P=30円で購入してもらえると以下の４項目が見れます。 スクリプト 集計 0.009BTCの悟りコイン 例外の正体とは メンバーでない人も登録時に運営から1000P配布されるので心配する必要はない

悟りコインの開封率を調べてみた
3,000
Namuyang
Namuyang

Reckless広告

掲載方法はこちら

人気の記事

  1. COFFEE HERE!でビットコイン支払いができる！
    250
    yumi_coffeehere
    yumi_coffeehere

  2. BTCにおけるRSI戦略の一考
    150
    高井
    高井

  3. はじめてのグランピング体験
    MURAKAMI
    MURAKAMI

  4. ビットコイン価格が2020年の高値を更新（10月22日）
    100
    坂本 不惑（さかもと・ふわく）
    坂本 不惑（さかもと・ふわく）

  5. 三重県餅街道～最終編（伊勢市編）
    紫雲和尚
    紫雲和尚

  1. Uniswap で買えるけど二度と売れないトークンを買った話
    5,000
    紫藤かもめ
    紫藤かもめ

  2. COFFEE HERE!でビットコイン支払いができる！
    250
    yumi_coffeehere
    yumi_coffeehere

  3. 最近のモナコインで目立つトランザクションについて
    100
    Cryptocoin Junkey
    Cryptocoin Junkey

  4. 開発より保守
    100
    Cryptocoin Junkey
    Cryptocoin Junkey

  5. 2020年9月の仮想通貨ニュースまとめ【仮想通貨の定点観測】
    200
    ジャノメ羊ノブナガ
    ジャノメ羊ノブナガ

  1. Ampleforth Geyserの概要と基礎知識
    80,000
    Shingen
    Shingen

  2. SpotlightのLN決済動向を初公開！
    100,000
    Yuya
    Yuya

  3. XRPの証券性のガチ検証　前編
    100,000
    Guko
    Guko

  4. Ampleforth(AMPL)の仕組み　～資産増加メカニズム～
    Guko
    Guko

  5. 【光と闇】モナコインポスターラリーハードフォーク史
    25,250
    #にすた氏
    #にすた氏

おねだり中のユーザー

もっとみる