HTML
<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
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…
文字が太い <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>…
後で消します ここに表題を入れる 長いサブタイトル 長いサブタイトル 長いサブタイトル 新規登録はこちら or sign up with Facebookで登録 Twitterで登録 <style> .top-wrapper { padding: 180px 0 100px 0; background-image: url(https://cdn-ak.f.st-hatena.com…
誤まって<script>の中にCSSを書いていて、CSSが動かずに苦慮する。 <script> .hoge{ /* 色々 */ } </script>
艦めし https://www.mod.go.jp/msdf/kanmeshi/ ここはheaderとdiv id="header"を同時に使ってます。どういう理由なんだろう。
<div class="size red">hoge</div> <style> .size{font-size:20px} .red{color:red;} </style>
まあこんなことをする人はいないけど。 インライン要素の途中でブロック要素を挟むとCSSがリセットされる？
https://www.youtube.com/channel/UCsHf7xViISLGYjlQztO7--ghttps://www.youtube.com/channel/UCzk-Ck1hnzEl44Y7PASfA7Q/videos
https://rules.sonarsource.com/
// クリックすると下文を隠す 消える文字 <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>
https://www2.kokugakuin.ac.jp/nihongo/ojyo.html ソースコードは短い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) { …
chromeにAlt+■というショートカットがちらほら割り振られてるんで、accesskey属性が競合するとchromeのショートカットが優先されてしまうことがあるんですよね。 競合回避するのに今回のJSコードを作成。じきにEnter+■というショートカットでURL開けるように…
VScodeやれよっていうツッコミはおいておいて。 読み 語句 メールアドレス メールアドレスの一文字目 メールアドレス jQuery ｊ $('').();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $('h1').hide(); }); </script> <h1>h1タグの内容は消える</h1>
ソース <style> .font{ opacity:0.5; /* 透明度 */ font-size:45px; letter-spacing:5px; /* 文字間隔 */ } </style> <div class="font">文字列</div> 動作結果 文字列
レスポンシブです。 フリー素材の山岳 test0123456789。あいうえおかきくけこ <style> .top{ padding:120px 0; background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sirakabaararagi/20200403/20200403042518.jpg); color:white; background-si…
参考 .example { margin: 10px; /* 上下左右 */ margin: 10px 20px; /* 上下 左右 */ margin: 10px 20px 30px; /* 上 左右 下 */ margin: 10px 20px 30px 40px; /* 上 右 下 左 */ } .example2 { margin: 10px 0; /* 上下のみ、左右を0にする */ } .example3…
https://qiita.com/pugiemonn/items/eaa597b79fe59a1f1506 私が気になった宣言名 wrapper : 囲っているもの。親。-top -bottom -left -right
h1です h2です h3です h4です h5です h6です
