ウェブ家の備忘録

ウェブデザイナーの備忘録

JavaScript

jQuery産UIのデモサイト

https://jqueryui.com/demos/

HTMLでリアルな計算機

作者 Mark Cruz様 HTML <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width-device-width,initian-scale=1.0"> <title></title> <link rel="stylesheet" type="text/css" href="style5.css"> </head> <body> <script type="text/javascript" src="style5.js"></script> </body></html>

累乗の表記 : PC表記、JavaScript、HTML

JavaScriptで2^3ができなかったので。こういうのするの私だけかもしれないけど。 JSでは2^3はMath.pow(2,3)でできます。 Excel等PC表記 2^3 JavaScript Math.pow(2,3) HTML 2<sup>3</sup>

Onsen UI CDN

Onsen UIガイドページの中ぐらいより。 Onsen UI CDN <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script></link></link>

Three.js入門

https://ics.media/tutorial-three/quickstart/ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script> <script> // ページの読み込みを待つ window.addEventListener('load', init); function init() { // サイズを指定 const width = 960; const height = 540; // レンダラーを作成 const renderer = new THR…

Webアイコンフォント2種類 HTMLに組み込む用

Font Awesome 使い方 Simple Icons

HTML : ボタンなど

後で消します ここに表題を入れる 長いサブタイトル 長いサブタイトル 長いサブタイトル 新規登録はこちら or sign up with Facebookで登録 Twitterで登録 <style> .top-wrapper { padding: 180px 0 100px 0; background-image: url(https://cdn-ak.f.st-hatena.com…

JavaScriptの使わない仕様

「=.」で小数点以下の数字を指定して格納。 <script> var num; console.log(num=.1);//0.1 </script>

今日やったミス

誤まって<script>の中にCSSを書いていて、CSSが動かずに苦慮する。 <script> .hoge{ /* 色々 */ } </script>

疑問

艦めし https://www.mod.go.jp/msdf/kanmeshi/ ここはheaderとdiv id="header"を同時に使ってます。どういう理由なんだろう。

HTML学習に良さそうなYoutube動画メモ

https://www.youtube.com/channel/UCsHf7xViISLGYjlQztO7--ghttps://www.youtube.com/channel/UCzk-Ck1hnzEl44Y7PASfA7Q/videos

JavaScript : if(false)って無能のふりして滅茶苦茶便利じゃん。

感動しました。多分私だけかもしれないけど。 JS Bin等のコードがリアルタイムに表示されるツールでは、書きかけのループ処理が無限ループしてエラーすることがあり、ループ処理を書く際はコメントアウト等で気を使って書かなければなりませんでした。 ■書き…

コードのルールのサイト

https://rules.sonarsource.com/

JavaScript : if(true)はスコープ汚染防止、if(false)はコメントアウトに使える。

一見何の利用価値もないif(true)の利便性について考えてたら、そういえばスコープ汚染防止になるじゃんと気付く。 まあスコープ汚染防止の用途だと即時関数が被ってて、そっちのほうが多機能です。 用途がスコープ汚染防止の目的だけだったらif(true)もあり…

JavaScript : 論理演算子について

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators xorないんだ。

JavaScript : 比較演算子について

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

JavaScript : console.logについて

<script> var i = 2; console.log(i < 3);//true i = eval(i < 3); console.log(i);//true </script>

jQuery : 対象をクリックすると別の対象が消える

// クリックすると下文を隠す 消える文字 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script> $(function(){ $('#trigger').click(function(){ $('#hide-text').slideUp(1500); }); }); </script> <div id="trigger">クリックすると下文を隠す</div> <p id="hide-text">消える文字</p>

JavaScript : お嬢様語変換

https://www2.kokugakuin.ac.jp/nihongo/ojyo.html ソースコードは短いJavaScriptでできてます。

JavaScript : キーの同時押しを認知

https://teratail.com/questions/38689#reply-61733 <script> 'use strict'; function handleKeydownUp (event) { var keyCode = event.keyCode, keyCodes = this.keyCodes, i = keyCodes.indexOf(keyCode); switch (event.type) { case 'keydown': if (i === -1) { …

JavaScript : キー入力を感知してURLを開く

chromeにAlt+■というショートカットがちらほら割り振られてるんで、accesskey属性が競合するとchromeのショートカットが優先されてしまうことがあるんですよね。 競合回避するのに今回のJSコードを作成。じきにEnter+■というショートカットでURL開けるように…

現在やってる単語登録

VScodeやれよっていうツッコミはおいておいて。 読み 語句 メールアドレス メールアドレスの一文字目 メールアドレス jQuery j $('').();

jQuery : HTMLタグの中身を非表示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $('h1').hide(); }); </script> <h1>h1タグの内容は消える</h1>

EMMET : HTML書くのを楽にする

https://haniwaman.com/emmet/

練習 HTMLのお問い合わせフォーム

お問い合わせ メールアドレス(必須) お問い合わせ内容(必須) ※必須項目は必ずご記入ください <style> .contact-form{ padding-top: 100px; } input,textarea{ width:400px; margin-top:10px; margin-bottom:30px; /* http://www.htmq.com/style/margin.shtml * …

relの意味

aタグやlinkタグで見られるrel属性の意味について。 https://saruwakakun.com/html-css/basic/link-rel 使われるタイミング <link rel="stylesheet" type="text/css" href="xxx.css"> <a rel="external" href="https://www.searchdesk.com/"> rel属性の意味 ・検索エンジンにページの関係を伝える。なのでSEOに良い その他参考HP http…</a></link>

同業他社勉強

しょうこちゃんねる WordPress5.X系使ってる個人様。 自作テーマ、jQueryページ、熟練を要する有料テーマ(Jet Elements、Slider Revolution、Elementor PRO)などをさらっと使えている印象。 レベル高い。素敵。https://umasho.com/ しょうこちゃんねる実績の…

モダンなJavaScript

https://sbfl.net/blog/2019/08/26/javascript-bracketed-variables/

WPでテーマ複数入れられるプラグイン

https://ownedmedianoie.com/how-to-use-multiple-themes-for-wordpress/

JavaScriptでHTMLを書く案

まあ普通にHTML書いた方が楽なんですけどね。 <section> <h1>こんにちは</h1> <p>本日もいい天気ですね</p> </section> 案1 普通にdocument.write <script> document.write( '<section>' +'<h1>こんにちは</h1>' +'<p>本日もいい天気ですね</p>' +'</section>' ); </script> 案2 タグ用ユーザー定義関数作る <script> fu…