CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。
HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。
HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
Q&A
解決済
3回答
3685閲覧
総合スコア10
0グッド
0クリップ
投稿2021/02/14 06:53
0
] こちらは、illustratorで作成したテキストなのですが、見て取れる通り、平行四辺形に合うように左右をスライドさせています。 これを、CSSでもテキストの編集としてできるのでしょうか。 それともあらかじめPNGなどで画像データとしてだしてから、配置すべきなのでしょうか? ご存じの方いらっしゃいましたら、お教えください。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
質問へのコメント
回答3件
ベストアンサー
CSSでできないことはないですが、イラレで作っているなら、SVGにしてHTMLに組み込んだ方が良いかもしれません。
HTML1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>斜め</title> 6 <style> 7 .naname { 8 transform: skewy(0.95turn); 9 } 10 </style> 11</head> 12<body> 13 <div class="naname"> 14 あいうえお 15 </div> 16 <div class="naname"> 17 かきくけこ 18 </div> 19</body> 20</html>
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>斜め</title> 6 <style> 7 .naname { 8 transform: skewy(0.95turn); 9 } 10 </style> 11</head> 12<body> 13 <div class="naname"> 14 あいうえお 15 </div> 16 <div class="naname"> 17 かきくけこ 18 </div> 19</body> 20</html>
投稿2021/02/14 13:20
総合スコア21739
回答へのコメント
2021/02/15 09:09
「CSS テキスト 斜め」で出てくるような情報で確認して試行錯誤すれば、ある程度可能というのは見えるかと思いますが、1px単位を求めるのでしたら背景透過画像準備するのが簡単ではないでしょうか。
投稿2021/02/14 08:08
総合スコア80875
完全再現は難しいかもしれませんが、transform等↓や https://sunagitsune.com/csstransformrotate/
アニメーション系のライブラリがあるのでライブラリを探していけば 近いことを実現できるようなものはあるかもしれません。 https://photoshopvip.net/120163
テキスト css ライブラリ などで検索すると色々ヒットすると思います。
投稿2021/02/14 10:12
総合スコア349
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
15分調べてもわからないことはteratailで質問しよう!
ただいまの回答率85.35%
質問をまとめることで思考を整理して素早く解決
テンプレート機能で簡単に質問をまとめる
テキストを斜めに傾けて配置する方法を教えてください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/15 09:09