ナンの実りもないクソアプリを作った
ナンを咲かせる木を作った題して「枯れ木にナンを咲かせましょう」 See the Pen 枯れ木にナンを咲かせましょう by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen. 「ナンを咲かせる」ボタンを押したら木にナンが生るクソアプリを作りました。 20個までナンを咲かせることができます。遊び方1. 「ナンを咲かせる」ボタンを押す2....
View ArticleClik here to view.
HTML テーブルの空セルに斜線を引く方法
テーブルの空セルに斜線を引く方法を紹介します。まずはテーブルを作成します。index.html<table><tr><th></th><th>タイトル1</th><th>タイトル2</th><th>タイトル3</th></tr><tr><td>1...
View ArticleCSS擬似クラスnth-of-typeが予想以上に使える件
nth-of-typeとは擬似クラスnyh-of-typeは、同じ階層にある同じ要素で指定した順番の要素をセレクトすることができる擬似クラスです。...
View ArticleClik here to view.
Chrome拡張機能開発の公式チュートリアルを解説+補足 前編
はじめにGoogleのChrome拡張の公式が出してるチュートリアルを解説します。僕なりに分かりやすくなるように、公式の流れに沿って書こうと思います。ただの翻訳といえば否定できませんが、それだけだとつまらないので、ところどころ補足欲しいなぁ〜て自分が感じたところを付け足していきます。僕は英語が嫌いなので、僕と同じように英語で書いてあるサイト読むのだりぃ〜って人の役に立てばと思います。説明に入る前に、...
View Articledisabled にしたボタンの hover スタイルが消えなくて困った時の対処法
修正前のコードdisabled="disabled"にしても hoverのスタイルが適用されてしまう... See the Pen xxbdWvX by Shiori SHONO (@sshono1210) on CodePen. 修正後のコード「〜はスタイルを除外したい」というものを指定できる :not()を使う See the Pen qBEmoxm by Shiori SHONO...
View Article初心者によるプログラミング学習ログ 192日目
100日チャレンジの192日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。192日目はおはようざいます192日目udemyで、Vue.jswebサイトコーディングの練習#100DaysOfCode#早起きチャレンジ#駆け出しエンジニアとつな...
View ArticleClik here to view.
[ライブコーディング]JavaScriptでモンテカルロ法シミュレータを作る
モンテカルロ法とはルーレットの必勝法とか言われる掛け方の法則。実際にカジノで実践するには紙とペンが必要になるので、それをWebアプリ化したかった言い訳事前準備のない、ガチのライブコーディングをやりたかった。そして、フレームワークとか、IDEだとか、ネーミングとか一切気にせずただただ頭に浮かんだコードを書いて、htmlとjscssで楽しく遊ぶことを意識した結果とんでもないコードができあがった。inde...
View ArticleクリスマスツリーをCSSで作ってみた
はじめにアドベントカレンダーといえばクリスマス。クリスマスといえばツリー。ということで、とってもありきたりですがクリスマスツリーをCSSで作ってみることにしました。用意するものもみの木電飾てっぺんの星オーナメント作ってゆくもみの木まずはもみの木から。これがないと始まりませんからね。何となくもみの木は3段のイメージでいたんですが、画像検索してみるとそんなことないんですね。いいんです。気にしません。bo...
View ArticleClik here to view.
React-SpringのHooksベースAPIでブラウザアニメーションを基本から極めよう!
🎄メリークリスマスイブ!🎄この記事は、React-Spring1というアニメーションのライブラリを紹介する NTTテクノクロス Advent Calendar 2019の24日目の記事です。23日目は@yuitomoさんの記事、明日25日最終日は@korodroidさんの記事です。 2019年、令和初の年末も押しせまってまいりましたが、みなさん如何おすごしでしょうか?...
View Article[Angular] 親コンポーネントから子コンポーネントのスタイルを変更しようとしたらハマった
やりたかったこと親コンポーネントで定義したスタイルを子コンポーネントへ反映させたかった。parent-compomemt.html<parent-compomemt><child-compomemtclass="double-border"></parent-compomemt>child-compomemt.html<inputtype="text"cla...
View ArticleCSSにおけるシャドウ効果の影
対象読者「このシャドウはCSSで再現可能かな？」とお悩みのデザイナーの方「このシャドウどうやってCSSで再現しよう、、」とお悩みのフロントエンドの方注意Sass芸(Sassの@for等を利用して、複雑な形を再現したりする行為)ではなく、無理なく使える範囲を狙いますIEには疲れたのでこの記事中では存在しないことにします作例はPug +...
View ArticlegulpでコンパイルしたCSSの改行コードをLFからCRLFにする
はじめにタスクランナー(gulp)でscssをコンパイルした所、cssの改行コードがLFに切り替わってしまうという事案が発生し、色々と検索をかけてもなかなかヒットしなかったので、今後同じようなことが起こった時用の備忘録です。（備忘録しか書いていない気がする）インストールするnpmgulp-load-pluginsgulp-からはじまるnpmパッケージを簡素化してくれます。require()ばっかりに...
View Article[HTML/CSS]CSSアニメーションだけでアコーディオンつくるぞ
inputとlabelでアコーディオンつくったinputとlabelを使って、CSSだけでアコーディオンを作ったので備忘録として書くぞ。 See the Pen CSSでアコーディオン作る by mame_hashbill (@mayu-mameuda) on CodePen....
View Articleスピードに特化したコーディング規約【QuiCSS】
QuiCSSとはどのタグにクラスをつけるか、クラス名はどうするか、どこにスタイルを記述するか...コーディングには迷う要素がたくさんあり、迷いこそが制作スピードのボトルネックになっています。QuiCSS（クイックス）は、迷う時間を最小化し高速でコーディングをするために設計された、BEMベースのコーディング規約です。背景FLOCSS、SMACSSなどいくつかのコーディング規約を試してみたのですが、規約...
View ArticleRails6でjqueryアニメーションライブラリanimsitionの使用 | 躓いたことなど．．．
1. rails6でanimsitionを使うビューにアニメーションを付けようと思い、試しにanimsitionというjqueryライブラリを使った．いくつか、躓いて勉強になったことをまとめる．2. まずはダウンロードライブラリを下記のサイトからダウンロード（ZIP形式）https://github.com/blivesta/animsition3....
View ArticleClik here to view.
【CSS】基礎
CSSとは HTMLを飾り付けしてくれる。（文字の色を変えてみたり、大きさを変えるなど） HTMLとは別のファイルに記述する。要素名に対してどういった飾り付けをするのかを指定していく HTMLでは要素名と呼ばれていたがCSSではセレクタと呼ばれる書き方の説明セレクタ { プロパティ: 値; }...
View Article忘年会のプレゼント交換で使用するWebサービスを作成した話
はじめにこの記事はOIC ITCreate Club Advent Calendar 2019の25日目の記事です。きっかけ弊部の忘年会の際にプレゼント交換をすることになったのですが、先輩から「なんか作れない？」という無茶振りを受け、作成しました。実装※忘年会前日に6時間で作成したものです。完成したものはGitHub...
View ArticleClik here to view.
Clik here to view.
要素の表示非表示は visibility:hidden の方が display:none よりも高速
はじめにACCESS Advent Calendar 2019 の25日目最終日です。初めまして、今年一番ハマったソシャゲはドラクエウォークの @naohikowatanabeです。HTML 的要素の表示非表示の基本一般的には HTML 的に要素の表示非表示を行う際、以下のように言われます。・要素の非表示は display:none か visibility:hidden...
View Article