どうも7noteです。transformを複数書く時は書き順に注意！！！ 要素を回転、拡大縮小、傾斜、移動することできるtransformですが、複数指定することができます。 まずtransformで使える指定の種類は以下の通り。 書き方 指定方法例 移動 translate transform: translate(100px, 100px); 回転 rotate transform: rotate(-45deg); 伸縮 scale transform: scale(2, 2); 傾斜 skew transform: skew(30deg, 30deg); ○ transformの正しい複数指定の方法 /* 正しいtransformの複数指定の方法 */ img { transform: translate(100px, 100px) rotate(-45deg); } transformを複数指定する場合は間を半角スペース空けます。 これが正しい複数指定の方法です。 × 間違った複数指定の方法 /* 間違った複数指定の方法 */ img { transform: translate(100px, 100px); transform: rotate(-45deg); } /* もしくは */ img { transform: translate(100px, 100px) , rotate(-45deg); } どちらも間違った書き方です。 もしこれを書いても前者の書き方ではtransformが上書きされrotate(-45deg)しか効きません。後者の場合はエラー扱いになり、cssが効きません 複数指定する場合は、順番に注意！！！ 実際に見ていただきましょう。 /* パターン１ */ img { transform: translate(100px, 100px) rotate(45deg); } /* パターン２ */ img { transform: rotate(45deg) translate(100px, 100px); } どうでしょうか？ 書き順によって、結果が変わってしまいます。 解説 これはcssの処理順が影響しているためです。 パターン１では先に100pxずつの移動をしてから要素を回転します。 逆にパターン２では先に回転した位置から100pxずつの移動をするので違う結果となります。 「パターン１の処理順」 translate(100px, 100px)からのrotate(45deg)。 「パターン２の処理順」 rotate(45deg)からのtranslate(100px, 100px)。 （画像が45度回転しているので、右下に移動後、左下に移動することで、結果下方向に移動したことになっている。） まとめ ・複数指定す際は半角スペースを空けて繋げる。 ・また指定する順番には注意！左から順番に処理される。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
要素を回転、拡大縮小、傾斜、移動することできるtransformですが、複数指定することができます。
transform
まずtransformで使える指定の種類は以下の通り。
/* 正しいtransformの複数指定の方法 */ img { transform: translate(100px, 100px) rotate(-45deg); }
transformを複数指定する場合は間を半角スペース空けます。 これが正しい複数指定の方法です。
/* 間違った複数指定の方法 */ img { transform: translate(100px, 100px); transform: rotate(-45deg); } /* もしくは */ img { transform: translate(100px, 100px) , rotate(-45deg); }
どちらも間違った書き方です。 もしこれを書いても前者の書き方ではtransformが上書きされrotate(-45deg)しか効きません。後者の場合はエラー扱いになり、cssが効きません
rotate(-45deg)
実際に見ていただきましょう。
/* パターン１ */ img { transform: translate(100px, 100px) rotate(45deg); }
/* パターン２ */ img { transform: rotate(45deg) translate(100px, 100px); }
どうでしょうか？ 書き順によって、結果が変わってしまいます。
これはcssの処理順が影響しているためです。 パターン１では先に100pxずつの移動をしてから要素を回転します。 逆にパターン２では先に回転した位置から100pxずつの移動をするので違う結果となります。
translate(100px, 100px)からのrotate(45deg)。
rotate(45deg)からのtranslate(100px, 100px)。
（画像が45度回転しているので、右下に移動後、左下に移動することで、結果下方向に移動したことになっている。）
・複数指定す際は半角スペースを空けて繋げる。 ・また指定する順番には注意！左から順番に処理される。
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
下記のように、元の秒数を3600で割った商、余りからhour, minute, secondを割り出して 文字列結合でフォーマットする。 index.html <!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"></head><body><div id="text"></div><script type="text/javascript" src="./script.js"></script></body></html> script.js function output(s) { let string = ""; let times = Math.floor(s / 5); for (i = 1; i <= times; i++) { if ((i * 5 + 1) > s) continue; string += generateChunk(i * 5, i * 5 + 1); } document.getElementById("text").innerText = string; } function generateChunk(start, end) { return format(start) + " > " + format(end) + "\n" + format(start) + " ～ " + format(end) + " hogehoge\n\n"; } function format(s) { let hour = Math.floor(s / 3600); let Surplus3600 = s % 3600; let minute = Math.floor(Surplus3600 / 60) let second = Surplus3600 % 60; let hh = (hour > 9) ? hour : '0' + hour; let mm = (minute > 9) ? minute : '0' + minute; let ss = (second > 9) ? second : '0' + second; return `${hh}:${mm}:${ss}.000`; }
下記のように、元の秒数を3600で割った商、余りからhour, minute, secondを割り出して 文字列結合でフォーマットする。
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"></head><body><div id="text"></div><script type="text/javascript" src="./script.js"></script></body></html>
function output(s) { let string = ""; let times = Math.floor(s / 5); for (i = 1; i <= times; i++) { if ((i * 5 + 1) > s) continue; string += generateChunk(i * 5, i * 5 + 1); } document.getElementById("text").innerText = string; } function generateChunk(start, end) { return format(start) + " > " + format(end) + "\n" + format(start) + " ～ " + format(end) + " hogehoge\n\n"; } function format(s) { let hour = Math.floor(s / 3600); let Surplus3600 = s % 3600; let minute = Math.floor(Surplus3600 / 60) let second = Surplus3600 % 60; let hh = (hour > 9) ? hour : '0' + hour; let mm = (minute > 9) ? minute : '0' + minute; let ss = (second > 9) ? second : '0' + second; return `${hh}:${mm}:${ss}.000`; }
Google翻訳の抑制 Chromeを使ってる時、 （中国語に）「翻訳しますか？」などと出てくる場合がある。 日本語サイトなんですけど・・・ 対策 以下タグを使う # まずはこれを試す <html lang="ja"> # それでもだめならこれを試す <meta http-equiv="content-language" content="ja"> # それでもだめならこれを試す <meta name="google" content="notranslate" />
Chromeを使ってる時、 （中国語に）「翻訳しますか？」などと出てくる場合がある。 日本語サイトなんですけど・・・
# まずはこれを試す <html lang="ja"> # それでもだめならこれを試す <meta http-equiv="content-language" content="ja"> # それでもだめならこれを試す <meta name="google" content="notranslate" />
form要素 データを送信する方法を定義します。その属性すべてが、ユーザーが送信ボタンを押すと送信されるリクエストを調整できるように設計されています。 action 属性 action 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 URL でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。 GET メソッド GET メソッドは、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。 POST メソッド POST メソッドは少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。
データを送信する方法を定義します。その属性すべてが、ユーザーが送信ボタンを押すと送信されるリクエストを調整できるように設計されています。
action 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 URL でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。
GET メソッドは、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。
POST メソッドは少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。
いつか整理します 1行が長いけどスクロールバーでなく折り返したい時 関連するstyle body { word-wrap: break-word; white-space: pre-wrap; overflow-wrap: break-word; } などを設定する. white-space overflow-wrap
関連するstyle
body { word-wrap: break-word; white-space: pre-wrap; overflow-wrap: break-word; }
などを設定する.
