記事一覧
デザインを回転させる
transform: rotate()で回転させることができる。 <style>.rotate { background-color: #00ff00 ; width: 50px; height: 50px; transform: rotate(-15deg);…
別タブでリンクを開く書き方。
別タブで開くリンク。
<body> <a href="http://" target="_blank"> リンク </a></body>
アコーディオンの書き方
アコーディオンの書き方。
<body> <details> <summary>タイトル1</summary> 内容1 </details> <details> <summary>タイトル2</summary> 内容2 </details> <details> <summary>タイトル3</summary> 内容3 </details></body
リストの書き方（カスタム文字）
好きな文字をリストの前に指定。
<style>ul { list-style: '#';}</style><body> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul></body>
リストの書き方（数字）
リストの数字の指定。
<ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol>
先頭に0を指定
<style> ol { list-style-type: decimal-leading-zero;}</style><body> <ol> <li>リスト1</li> <li>リスト2</li> <li
リストの書き方（点）
リストの書き方
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
指定で点を消すことができる。
<style> ul { list-style: none;}</style><body> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul><
画面の背景を半分にする
画面の背景色を左右で変える。
<style> .background-half { background: linear-gradient(to right, red 0%, red 50%, pink 50%, pink 100%); } </style> <body> <div class="background-half"> <br />
内部スクロールを行う
「overflow: auto;」の指定で内部スクロールを作成できる。
<style> .scroll{ height: 80px; overflow: auto; }</style><body> <div class="scroll"> あああああ <br /> <br /> <br /> <br /> <br /> <br />
「table」を作成する
「align」で配置場所を指定できる。
「width」で横幅を指定できる。
<body> <table border="1"> <tr> <th width="300" align="left">タイトル1</th> <th width="300" align="right">タイトル2</th> </tr> <tr> <td align="ce
グラデーション「border-image-source」で角丸を作れない
特に指定しない場合、角丸で表示される。
<style> .border{ padding: 20px; border: 10px solid blue; /* border-image-source: linear-gradient( 135deg, red, blue ); */ border-image-slice: 1; border-radius: 10px;}</style
英単語やURLを折り返すには
英単語やURLは折り返されない
<body> <div> aiueokakikukekosashisusesoaiueokakikukekosashisusesoaiueokakikukekosashisuseso aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div></body>
「word-break」の指定で折り返される。
「word-break:
両端に要素を配置する
<style> .ryotan { display: flex; justify-content: space-between; } .left-area { width: 20px; height: 20px; background-color: red; } .right-area { width: 20px; height: 20px;
もっとみるグラデーションを作る
linear-gradient()で線形のグラデーションを作る。
<style>.linear-gradient { background: linear-gradient(red, blue); width: 500px; height: 300px;}</style><div class="linear-gradient"></div>
radial-gra
デザインを回転させる
transform: rotate()で回転させることができる。
<style>.rotate { background-color: #00ff00 ; width: 50px; height: 50px; transform: rotate(-15deg);}</style><div class="rotate">aa</div>
transform: rot
cssで変数を使ってみる
var()を使用すると、変数としてcssの値を定義することができる。
<style>:root { --main-text-color: red; // 変数 --main-bg-color: blue; // 変数}.main-text { color: var(--main-text-color);}.main-bg { background-color: var(--main-bg