CSS
■あらまし VBにてエラーメッセージ「String"+"から型'Decimal'への変換は無効です。」が出る。 何千行もある全ソースコードの"～"の中の+を全部探さなければならなくなって、その物量にめまい。 ……じゃあツール作るか。その方が労力少ないわ。 正直自力で作…
仕事に使うので作りました。 テキストエリアに載せた文字列を変数replaceCodeの規則で置換します。より複雑な置換はJSいじってください。 <script>/*変換ｺｰﾄﾞ*/ var replaceCode=[ ['置換前','置換後'] ,[' ',' '] //,['',''] ]; </script> <style>textarea {resize: both; …
<style> h7{background-color:black;color:white;} </style> <center><h7>某サイトから<s>丸パクリ</s>リスペクトしました</h7></center> <p> 文章の途中で<h7>協調したいことをハイライト</h7>する感じでも使いたいです。</p> 協調の字違ってるわ。強調だわ。
<style> .nonScrollbar{ /*縦バー*/ -ms-overflow-style: none;/*IE Edge*/ scrollbar-width: none;/*Firefox*/ /*横バー*/ white-space: nowrap; } .nonScrollbar::-webkit-scrollbar{ /*縦バー*/ display:none; } </style>
はてなブログ内でPC表示・スマートフォン表示で別内容を表示する方法を、はてなブログ公式が機能か何かで準備してくれているだろうと散々色々調べましたが、多分はてなブログは機能もそれらしい変数も持ち合わせてなかったんで、一日苦悩して私なりのやり方…
ネタ元様 スコープ汚染は敵だという認識は全プログラマーの総意であり、スコープ汚染に寛容な言語であるCSSは廃さなければならぬ。という傾倒思想に浸かった男がたどり着いたソースコードが下記。 動作 (function(){ let imgSrc="https://assets.techacademy…
Feather Forge Icons Simple Icons Tabler Icons Unicons Icon Library
ソースコード <script> (function(){ //即時関数の中でCDN let output='<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">'; output +='<div class="w3-panel w3-blue">' + '<p>即時関数の中</p>' +'</div>' ; document.write(output); }())</script>…
やり方 処理初めにperformance.now()で現在時刻を計測、処理終わりでもう一度performance.now()をして初めのperformance.now()との差を出す。 /* ■■■JavaScriptを計測する場合■■■ */ <script> //処理 const start = performance.now(); process(); console.log('処理</script>…
https://fonts.adobe.com/fonts
■動作結果 行間詰める。行間詰める。 ■コード <p style="line-height:1;">行間詰める。<br>行間詰める。</p>
このブログに来てくださる皆様のおかげでGoogleAdSence開設１週間で230万円の収入が出ました！ 皆さまありがとうございます！ 今後とも当ブログをご愛顧のほどよろしくお願いいたします！ というのは嘘なんですけどね。 上の画像は確かに私のPCのスクリーン…
<style> a[href *= "abc"]{background-color: lightgreen;} </style> <a href="abc.html">...</a> <a href="http://www.abc.com/">...</a> <a href="http://www.hoge.com/abc">...</a> aタグの属性の中にabcが含まれれば適応。 「a[href *= ".jpg"]{～}」みたいに使う。
DL[GitHub] https://github.com/lukehaas/Scrollify CDN <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1/jquery.scrollify.min.js"></script> デモサイト https://projects.lukehaas.me/scrollify/#home https://projects.lu…
https://jqueryui.com/demos/
作者 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>
CSS3 Loader & Spinners https://vineethtrv.github.io/loader/?fbclid=IwAR07qdEA3alnTnpoPfw6bLgjd5K11TNMzmYx3vb2c682dpjFUPENFoWmKEI https://codepen.io/vineethtrv/pen/NWxZqMM?fbclid=IwAR3G8Ud1GYBr0god_o8O_neaEcFQtcOalTZ7e4lL_PjLQicp3Hu4QYiBylQ…
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>
簡素なボタン <style> .btn { display: inline-block; border-radius: 10px; background-color: #5dca88; padding: 15px 40px; box-shadow: 0 7px #1a7940; cursor: pointer; } </style> <span class="btn">簡素なボタン</span>
<div style="text-align:center;"> <a href="https://enjoynet.co.jp/free_snsicon/icon_nanasekurumi4/"> <p><img width="200px" src="https://enjoynet.co.jp/icon/icon_menherachan04_02.jpg"></p> <p style="font-size: 11px;">使わせていただいたアイコンのページ</p> </a> </div> <hr> <head> <style> .section { text-align: center; …</head></hr>
<style> .heart{ background:red; width:40px; height:60px; margin:15px auto; border-radius:50px 50px 0 0; transform:rotate(-45deg); position:relative; } .heart:after{ content:''; width:40px; height:60px; background:red; border-radius:50px 50px 0 0;…
https://qiita.com/7dt/items/29f45132cc7c0c4a6d19 https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
文字が太い <span style="font-weight: bold;">文字が太い</span>
あくまでメモ。後で消します。 <style> .container { width: 1000px; padding: 0 15px; margin: 0 auto; } header { height: 65px; width: 100%; background-color: rgba(34, 49, 52, 0.9); } .logo { width: 124px; margin-top: 20px; } .header-left { float: lef…
マウスオーバーすると真っ赤に染まる <style> .trans {transition: all 1s;} .trans:hover{background-color: red;} </style> <div class="trans">マウスオーバーすると真っ赤に染まる</div>
はてぶの仕様でCDNできないんで表示されてないけど、下のボタンの文字列の左端にFacebookのロゴが本来は入ってます。 FB的ボタン <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <style> .btn { padding: 8px 24px; color: white; display: inline-block; opacity: 0.8; border-radius: 4px; } .btn:hover {op…</link>
Font Awesome 使い方 Simple Icons
出典 : https://www.facebook.com/groups/programmershub1/作者 : Rãhmát Àfghán氏 <html> <head> <meta charset="utf-8"> <title>hoge</title> <style> body{ margin:0; padding:0; background-image:url(https://cdn-ak.…</meta></head></html>
http://www.htmq.com/css3/border-radius.shtml border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px; を指定 <style> .sample2 { width:280px; height:130px; background-color:#ccecf4; border:solid 20px #7fcfe2; border-radius: 100px 25px 50px 50px </style>…
「:hover」はマウスオーバーした際の動作を指定する。 「:hover」の仕様 https://developer.mozilla.org/ja/docs/Web/CSS/:hover <style> a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; } </style> <a href="#">このリンク</a>…
