Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

ブログに色々詰め込んでみた☺️✨(自己満マン)

まだまだ試行錯誤中ですが、 「操作ナビゲーション(モバイル系のみ)・メニュー」 今持てる全てを出し切りました (๑ ˃̶̤̀д˂̶̤́ )◞~♪ メニューは試行錯誤しまくりでしたが、何とか実装する事ができました こういう透けっちン なアニメーションを以前どこかのHP…

はてなブログの "もくじ" で『scroll to id アニメーション with jQuery』

(17.3.24追記)無駄をひとつ見つけました🌟 コードをシンプルにスマートに~((ノ")`ω´(ヾ) もう既出でしょうか。。 ページ内をジャンプする際の「jsスクロールアニメーション」を、はてなブログのもくじ用にカスタマイズしたものです。コードあまり綺麗ではありま…

【js/後半】window.requestAnimationFrame() を解説してみた🌟

On function parameterパラメーター(共数) と function argument引数(実述) requestAnimationFrame()のcallback function の parameterパラメーター(共数) では後半です。 invoke - 要請する(実行する) function - 関数 parameterパラメーター(共数) - パラ…

【js】pure JavaScipt で jQuery のToggleアニメーションを実現してみた

基礎編 応用編 基礎編 button1 list1-1 list1-2 list1-3 HTML <button id="btn1">button1</button> <ul id="list1"> <li>list1-1</li> <li>list1-2</li> <li>list1-3</li> </ul> CSS #list1 { transition: all .45s ease; } #btn1 { transition: all .2s; } JavaScript "use strict"; var _ = console.log; var btn1 = document.quer…

Google Font / early access (日本語) : 全9種

Google Font / early access ゴシック体 明朝体 その他 一気に試したい人用 Google Font / early access - https://fonts.google.com/earlyaccess - https://googlefonts.github.io/japanese/ 右側のテスト文章部分は、「クリック」すれば、文章を編集できま…

カラー・スペース(色空間)外観/ 変換方法 まとめ

Basic Color Conversion (theory) Color Conversion (source code -js -) Recommend article and Others Basic List of color spaces and their uses --Wikipedia.en -- https://en.m.wikipedia.org/wiki/List_of_color_spaces_and_their_uses Color Models:…

【js・備忘録】コンストラクター / プロトタイプ

Constructor ( function ) Prototype 国民的アニメ『サザエさん』の名前を使って、Constructor, prototype のコードを書いてみました( 現在学習中ですので、拙い部分もあるかと思います。ご注意下さい(*ฅ•̀ω•́ฅ*) あ、あとサザエさんの子供を、タラちゃん以…

【初学者向け】Chroma.js の使い方

code { font-size: inherit !important; } div[class*="cTitle"] { position: relative; display: table; top: 1em; left: .25em; border-radius: 14px; color: #fff; padding: 5px 16px; font-size: 20px; line-height: 20px; text-align: center; vertical…

iOS( iPad ) で "HTMLソースコード" を見る方法:: + 簡単コピー + スムーズ・スクロール

Apple ToolBox さんを参照 + カスタマイズしてみました🌟 http://appletoolbox.com/2014/03/how-to-view-webpage-html-source-codes-on-ipad-iphone-no-app-required/ javascript:(function(){ var a = window.open().document; a.write('<div></div>'); var b = a.body.a…

シンプル&明快。プログラミング本の著者さん🌟

著者: Allen B. Downey( アレン・B・ダウニー) 『Think』シリーズ ~ コンピューター・サイエンティストのよう考えるには ~ 『Think』Series --- how to think like a computer scientist --- Other Green Tea Press.com 教科書のマニフェスト*2 Textbook Man…

【js/前半】window.requestAnimationFrame()を解説してみた🌟

code { font-size: inherit !important; } li.title_s > code { font-size: inherit !important; font-weight: inherit !important; } .callback { font-style: italic !important; color: #ee6666 !important; } #compCode { position: relative; } #js1, #…

ColorWheel を作成中…::(っ`ω´c)::💦 + Chroma.js さんが秀逸過ぎる

Chroma.js Brian Grinsteadさんのコードを参照させて頂き、ColorWheelの仕組みを理解し、もう一度自分で作れるか一から自作中です✨ Colorwheel 1K - Brian Grinstead don't code today what you can't debug tomorrow: color wheel on Canvas jsコード自体は…

Outside The World ~ 外側の世界へ ~ ❶

[ Mare Serenitatis, Moon : Taked By NASA : photo via Unsplash.com ] この記事は、僕が英語習得を開始してから約一年半の間に、新しく知った事をキュレーションする記事の、プロローグである。 英語学習のキッカケとなった出来事を、少しばかり振り返って…

Google翻訳の精度Upしてたよ✨♪

Philosophy [ Wikipedia.en (17.0121) ] 哲学(翻訳) Google翻訳の翻訳精度が、大幅にUpしたみたいです Google翻訳 英語や外国語が更に身近なものになりました。本当にありがたい事です。Googleさん、ありがとうございます(* ˊ˘ˋ)*_ _))ペコリン という事で。今…

"タブレット + 英語" で始める、プログラミング

メイン オンライン・インタラクティブ学習サイト W3Schools 5.0 SoloLearn 4.8 learn x.org 4.5 書籍 無料のプログラミング本(英語) :: 雑談:: 僕の場合(JavaScript) リファレンス 辞書 Merriam Webster Dictionary 5.0 Cambridge Dictionary 4.9 Vocabulary…

2016年、僕が最もお世話になったアプリ17個( iOS + Web )

主要使用デバイス: iPad Air 2 デザイン Coolors Graphic Adobe LightRoom Adobe Comp Adobe Capture Pinterest タスク・学習 Box Documents Calculator HD + Pocket Puffin Browser Merriam Webster Vocaburary.com Cambridge Dictionary コーディング Text…

W3C 仕様書 --- 一覧リスト(HTML, CSS, DOM)

W3C 仕様書 --- 一覧リスト( HTML, CSS, DOM ) Documentation と Specification の違い Web Development系(HTML, CSS, DOM) の一次ソースである W3C の仕様書を一覧で観たくてリスト化してみました。全ては網羅できていません。それでも結構な量になった気が…

はてなブログ・テーマ製作用ツール

はてなブログの id, class(.less) box_2 はてなブログの id, class( ビジュアライズ版 ) その他 id, class を取得する為のjs github にテーマ製作の際に使えそうなツールをupしてみました。 js, less が少し分かると、より使いやすいかもしれません。 あまり…

デモ・エントリー

ゼロから始めるプログラミング ゼロから始めるプログラミング ゼロから始めるプログラミング ゼロから始めるプログラミング ゼロから始めるプログラミング ゼロから始めるプログラミング ゼロから始めるプログラミング ゼロから始めるプログラミング ゼロか…

Re: ゼロから始める{less} 生活

Less.js 公認 日本語翻訳ページ その他の日本語ページ 実際に LESS 試してみた 基本編 ちょっと応用編 Nested ruleとは [ ::雑談スペース:: ] Less.js http://lesscss.org LESS*1 As an extension to CSS, Less is not only backwards compatible with CSS, …

【js】この前のお休みに、気になっていた単語をどっぷり調べてみたよ🌟

不適切箇所 検出ツール ES Lintパ マルチプラットフォーム対応のjsコードに変換してくれるツール Bableパ 具体例 ES Lint 試してみた 【↓オンラインdemo↓】 【↓ 解説ページ(no-undef)】 [補足1] 「ソフトウェア」 と 「ソフトウェア・パッケージ 」の違い […

【js】getBoundingClientRect() がヤバ良い(初出は2008年⁉︎( ˙◊˙◞ )◞💡 )

element.getBoundingClientRect() ( i )Not スクロールイベント時 ( ii )スクロールイベント時 一次ソース その他の分かりやすい解説 getBoundingClientRect() の 対応ブラウザ 後日談 element.getBoundingClientRect() この method は、document内の指定し…

iPad 最強テキストエディタ アプリ、..\Textastic/..

これを最強と言わずして何を最強といおうか。 Textastic https://www.textasticapp.com 全部のせのです。入門者~中級者までをカバーできうる、和馬が選ぶ、2016年ベストのテキストエディタ アプリです 特徴 ●ほとんどの言語のコード・ハイライト機能 ●ブラウ…

【CSS】CSS のみ( Pure CSS )で「スクロール・ナビ.js」と同じ事が出来た⁉︎

jsだと、iOSの場合、position ヂェンジの際に、どうしてもシームレスに表示されない…。一旦position ヂェンジの際に、その要素の表示が消えてしまう。。 それをを解決したいと、ずっと頭の片隅にあって、 「もしやPosition を変える以外に方法は→ 色々試すが…

【js】ムリやり#Box2(サイドバー) を記事内にねじ込んでみた結果w

はてなブログの記事ページを、他のTech系サイトの様なレイアウトにしてみては!? とふと思い立ち実行してみました。 ただ、はてなブログのHTMLの構造上、サイドバー(#box2)を記事内に入れるのは、CSSではレイアウト調整が面倒くさくなるだろうなと思い、JavaS…

【js】Clipboard.js テスト

.foo { position: absolute; top: 0; } Copy クリップボード.js ができるかテスト中~。ただいまテスト中です。 本文が短いと「bad request」になるので、テキストで埋めています。テキストで埋めています。 //

【js】沈黙を越えて。『スクロールナビ.js(はてブロ.ver)』。プロトタイプ

「もくじ」の表示のさせ方 実際のデモ画像 まだ完全ではありません。また、JavaScriptもゆえ、ムダ等多いと思いますが…::(っ`ω´c):: 何にせよ、出来た事がかなり嬉しい(つ´ω`c)✨✨♪ まだ「h3ハイライト」しかできませんが宜しければどうぞ 「設定」→「フッタ…

【js】JavaScript 備忘録(骨子系)

Return Value の type 日本語に翻訳するとしたら「返値 」という語がいい気がする。多分造語だけど。翻訳調べたらありましたw 調べて明確に理解したが、「return valueのタイプ」というのは そもそもJavaScriptの扱えるData Type と、密接に関連している。 …

ブログがゲシュタルト崩壊を起こしたので…→

次制作中の「マークダウン風シンプル」テーマをお楽しみ下さい🌟0(:3 )~ ('、3_ヽ)_←(w) 不完全理解のものを、ブログに詰め込みすぎました(*⚫︎ー⚫︎)b 💦w

John Resigさんの「JavaScript Ninja」買ってみた🌟

英語である事、"良い値段"である事から、凄く欲しいと思いながらも購入に踏み切れずにいました。、が⁉︎ ついに先日購入に踏み切りました(°∀° )/(°ω° )/(°Д° )/✨ Manning.pubさんから電子書籍版を購入しました [manning links] そして基本はタブレットで読む…

ブログ、只今絶賛工事中です👷🚧L( •̤ㅂ•̤)┘三└(•̤ㅂ•̤)」🌟

タイポグラフィーを少し意識してみました。 font-size, font-weight, line-height, letter-spacing。 最近気づきました。実は中学生の頃ぐらいから、ずっと字フェチだったのかもしれません( ˙◊˙◞ )◞ そう言えば、中学の美術で初めて「レタリング」をやった時…

【jq】jQueryが最強すぎておらおどれーてる(′ʘ⌄ʘ‵)✨

jQueryとは、JavaScriptのライブラリです。 jquery.com 「ライブラリ」とは 「ライブラリ」 - e-Words IT用語辞典 sp.e-words.jp ... ITの分野では、ある特定の機能を持ったコンピュータプログラムを他のプログラムから呼び出して利用できるように部品化し、…

【js,jq】Qiitaにも実装されている"例の"便利なや~つ~『スクロール・ナビ.js』✨✨

ちょっと見つけにくかったけれど、探したらありましたよ~✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)✨♪♪ スクロールと同時に、ナビゲーションバー( もくじ )が出現し、その箇所になると対応部分がハイライトされる例のやつです。なんて呼べばいいか分かりませんw [追記 : シンプルに『ス…

【js】JavaScript とは??

[via GitHub - voodootikigod/logo.js: A community logo for JS / eu より] 「JavaScript」と言う時、その言葉が表しているものは、2つあります。 ❶ECMAScript-262 ❷JavaScript( Mozilla ) 多くの場合、❶を指していると考えて差し支えありません。 では、な…

「勉強」はやりたくなければしなくても良い説

[書きかけ系ですが、これも投稿しておこうと思います。データ等詳細をまだまだ詰められていませんが…(;◔ิд◔ิ)w その内に。。うん、多分、きっと。。w] 理由 ❶やりたくない事、楽しくない事は頭に入ってこないから。すぐ忘れるから ❷教育科目は「仕事の実務…

祝!暇な女子大生さん

小説すばるに暇女さんのコラムがご掲載されたようです joshi-daisei.hatenablog.com 本当におめでとうございます 賞嘆すると共にお慶び申し上げます(*ö*) 僕がはてブロを始めた頃辺りに暇女さんを存じ上げ、以後、定期的に拝読させていただいております(* ˊ˘…

【CSS】「アスペクト比一定 + サイズ変化するBox」と、そのカラクリ

// (かなり書きかけ感満載ですが、投稿できる見込みが( ³ω³ ).。o なので、とりあえず投稿しておきます。 関係が複雑なものを「分かりやすく」説明するのは、難しい、難しぃ~0(:3 )~ ('、3_ヽ)_ ) 1:1 2:1 1:2 4:3 16:9 画面幅を変えてみて下さい。タブレット…

テーマ製作の効率化・簡便化を、皆で出来れば嬉しい|*´-`)チラッ

- 自分がテーマ製作やカスタマイズする際にも「階層・クラス名を参照できるhtmlテンプレート」があると便利 - 他の人もカスタマイズ・テーマ製作がしやすい・時間短縮になる と思い、githubにレポジトリ作ってみました|*´-`)チラッ✨ 初めてで少し緊張しておりま…

『難しく感じる』理由

何かを理解するとき「難しい」「理解しにくい」と感じるのはなぜだろうか。 具体的に言えば、「どういった時に、人は難しいと感じる」のだろうか。 それを自分なりに認知科学的観点から考察してみました。 ここで想定しているのは、身体的な技術の習得の際に…

【js】JavaScript の一次ソースがクッソ分かりやすい件

やはり、「一次ソースに当たる」事が非常に大切だと実感。 6thは600p超あって驚きましたがw 1thバージョンは120-130p程で、そちらから始めようかと思いますw 以前の記事でも「一次ソースに当たる事」について書いたけれど、コンピューター・サイエンスも全く…

HTML5 のなるほど話

Why Semantic HTML5 Elements? With HTML4, developers used their own favorite attribute names to style page elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ... This made it impossi…

【js, DOM】 一次ソース リファレンス をまとめてみた

JavaScript, HTML DOMの、oroperty, method の全てを一覧で見たくて、探しました。 HTML DOM において、JavaScriptが実行可能な property, method 全て DOM 4 - W3C https://www.w3.org/TR/dom/ Document Object Model (DOM) - W3C https://www.w3.org/DOM/ …

【CSS】このブログのテーマ

logとして。 使いたい方おられたらですが|*´-`)チラッ.。oO(いたら嬉しい✨) ご自由にお使い下さい(•ᵕᴗᵕ•)⁾⁾ペコリ🌟 コード汚くてすみません。。(;◔ิд◔ิ)💦w github.com

【CSS】ボタン - ホバーエフェクト作ったよ🙌🌟

コードロップスさんの記事を参照 & 自己アレンジしてみました🌟 Line Menu Styles --- Codrops --- type1 type2 type2e type3 type4 type5 type6 type7 type8 html <button class="btn type1">Type1 </button> CSS /*========= background ==========*/ body { background:radial-gradient(#444141…

【js】僕は .scrollTopメソッドを愛しすぎているw

0 やはり、この動くのと同時に数字が変化するのが、単純ですが面白すぎて病みつきになりますww え、こんなので喜ぶなんてあなたも単純ですって?(๑≧∀≦)ฅ??← 一番下に、Javascriptのコードも載せておきます Javascript document.addEventListener( "scroll", m…

「プログラミングを学ぶなら、英語で学ぶ方が良い」理由

甚だ私見ではありますが(;๑≧∀≦)ฅそう考えるに至った理由について、以下にまとめてみましたw 先ずは僕の学習言語と期間を。。 【 言語 】 HTML,CSS, JavaScript 【 期間 】 約8ヶ月(短い…??) 【 その他 】 触り程度だが、C, C++, Pythonなどの日英両方のRefer…

【js】記事内のリンクを別ウィンドウで開くようにする

やっとできた 終わったらたった数行なんだけど、そこに辿り着くまでに結構時間がかかりまする::(っ`ω´c):: まだまだJavascriptに慣れてない。これからちょっとづつ、試行錯誤&調べながらコード書きまくるぜ~((꜆꜄•௰•)꜆꜄꜆»シュシュシュッ Javascript var e = document…

【css】timing-function "Cubic-Bezier"

CSS Transitions [WD] -2013.11.29 https://www.w3.org/TR/css3-transitions/#transition-timing-function-property 2.3. The ‘transition-timing-function’ Property cubic-bezier(<number>, <number>, <number>, <number>) Specifies a cubic-bezier curve. The four values specify points</number></number></number></number>…

【css】ちょっとややこしいけど、使いやすいと知った"em"

W3Cさんを参照してみました。em,rem,px。3つを使い分けることで、レイアウトしやすくなりそう。 em --- 流動的 rem --- 準・流動的 px --- 固定的 ただ、少しだけややこしいかも。。 CSS Values and Units Module / Level 3 - W3C W3C CR*1 / 2016.09.29 htt…

【js】JavaScriptで「show / hide 」を書いてみた

やっとできた⁉︎ ただ、多分余計な記述も多そうだけど一応upしときます。 後で自分の進歩も分かるので。 誰かの参考になる可能性は…低いですw 経緯 はてなブログできたテーマ制作の際に、エディタではてなブログの仮想環境を作っていて、「#box2 のアーカイブ…

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️