AKB48の推しメンをセンターにできちゃうかもしれない!? >>

https://codepen.io/LandonSchropp/pen/xLtif

こちらのscriptの
words = [ "the", "of", "and", …];
に日本語を入れて、なおかつ途中で改行をしたいと思っています。

例 words = [ "ああ\nあああ", "いいいい\nいいい", "うううう\nううう", …];

合間に\nを入れて、replaceで元のコード

$word.text(word);

$word.text(word.replace(/\n/g,"\<br /\>"));

と書いたのですが、ソースでは<br>が

&lt;br&gt;

↓ソース
<h1 style="background-color: hsl(288, 100%, 50%);"><svg xmlns="http://www.w3.org/2000/svg" role="img"><title class="title">Random</title><text class="word" dominant-baseline="central" fill="#222" stroke="#222" stroke-linecap="round" stroke-width="1.5%" text-anchor="middle" x="50%" y="50%">いいいい&lt;br /&gt;いいい</text><text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="50%">いいいい&lt;br /&gt;いいい</text></svg></h1>

と表示され、ブラウザで見ると<br>と表示され、改行はされぬままです。

色々と自分で検索して調べてはいるのですが、知識不足で分かりません。
お分かりになる方、助けて頂けませんでしょうか

「改行をしたいが、&lt;br&gt;とな」の質問画像

A 回答 (4件)

No3です。



少し調べてみたら、もう少し要領の良い書き方ができそうなので・・・
(同じtextタグを2度書かなくても良くなります)
・defタグ内に雛形を定義しておくことで、これを2回参照します。
・改行はtspanで実現します。行送りはdy属性で変更可能
・文字サイズはfont-sizeで指定可能
・・・etcです

(位置の基準は左上基準にしてあります)

<svg width="500" height="500" viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<text id="word1" font-size="40px" fill="white" x="0" y="0" >
<tspan x=0 dy="0">ああああああ</tspan>
<tspan x=0 dy="40">いいいいいいい</tspan>
<tspan x=0 dy="40">うううううう</tspan>
</text>
</defs>

<use x="100" y="100" href="#word1" stroke="#222" stroke-width="1.5%" />
<use x="100" y="100" href="#word1" stroke="white" />
</svg>
    • good
    • 0

こんにちは



私の環境では、ご提示のリンク先が見られないので、どのようにして作成しているのかがわかりませんが、出来上がったソースを見る限りでは、普通のSVGのようですので、「与えられたテキストをSVGに変換してくれるサイト」なのかなと想像しました。

フォントのアウトラインをどのように実現しているかというと、黒色の文字を太さを太くして描いた上に、白の少し細くした文字をまったく同じ位置に重ねることで、アウトラインに見せているという仕組みですね。
ですので、必ず同じテキストを持ったタグが二つセットで並んでいるはずです。
(黒文字用と白文字用)
制御コード(改行等)は文字としては表示できないので処理対象にならないですね。
(処理前にHTMLタグ(=文字)に変換しているものと想像)


複数行の表示をしたいのでしたら、1行ずつを作成して縦に並べても良いですが、縦位置を制御できますので、同じSVG内ににまとめて記してしまった方が簡単でしょう。
仕組みさえわかってしまえば、直接タグを編集することも可能です。

<h1 style="background-color: hsl(28, 100%, 50%);">
<svg xmlns="http://www.w3.org/2000/svg" role="img">
<text class="word" dominant-baseline="central" fill="#222" stroke="#222" stroke-linecap="round" stroke-width="1.5%" text-anchor="middle" x="50%" y="40%">ああああああ</text>
<text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="40%">ああああああ</text>
<text class="word" dominant-baseline="central" fill="#222" stroke="#222" stroke-linecap="round" stroke-width="1.5%" text-anchor="middle" x="50%" y="70%">いいいいい</text>
<text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="70%">いいいいい</text>
</svg></h1>

四つある<text>タグのうち、最初の2つが「ああああああ」の黒と白文字、後の2つが「いいいいい」の黒と白文字です。
表示された結果は、以下の添付図のようになります。


SVGの記述法を手っ取り早く知りたければ
http://memopad.bitter.jp/w3c/graphics/svg_text.h …

仕様書は
https://triple-underscore.github.io/SVG11/index. …
「改行をしたいが、&lt;br&gt;とな」の回答画像3
    • good
    • 0

<や>は制御記号である為、それを制御記号として機能させずに<や>を文字として表示したい場合にエスケープする訳です。



今回は、そうじゃ無くて、そのまま制御記号として機能させたわけでしょ?

だったら、直接
words = [ "ああ<br>あああ", "いいいい<br>いいい", "うううう<br>ううう", …];
    • good
    • 0

この辺参考になりませんか?


https://qiita.com/hrdaya/items/4beebbdb57009b405 …
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Qjavaが文字コードの影響でコンパイルが通りません。

java jdk-12 , windows10 , Tera Pad でコンパイルしようとしていますが、

 1つ目、

  エラー: この文字(0xEF)は、エンコーディングwindows-31jにマップできません

のエラーが出てコンパイルが通りません。 

ネットで調べて -encoding UTF-8 を追加してコンパイルしたら通ったのですが、次に

 2つ目、

  エラー: '\ufeff'は不正な文字です

というエラーが出ます。

UTF-8のBOMが原因のようですが、ネットで調べた方法をいくつか試してみても

コンパイルが通りません。

どのようにしたらよいでしょうか?


試した方法: UTF-8N にする , 一度Shift-Jisに変換してみる
$ nkf --overwrite --oc=UTF-8 ($は内部コマンドまたは...認識されませんと出ます)
ネット上のBOMをスキップする方法というソース

java jdk-12 , windows10 , Tera Pad でコンパイルしようとしていますが、

 1つ目、

  エラー: この文字(0xEF)は、エンコーディングwindows-31jにマップできません

のエラーが出てコンパイルが通りません。 

ネットで調べて -encoding UTF-8 を追加してコンパイルしたら通ったのですが、次に

 2つ目、

  エラー: '\ufeff'は不正な文字です

というエラーが出ます。

UTF-8のBOMが原因のようですが、ネットで調べた方法をいくつか試してみても

コンパイルが通りません。

ど...続きを読む

Aベストアンサー

>エラー: この文字(0xEF)は、エンコーディングwindows-31jにマップできません

日本語環境のWindowsで、普通に起動したコマンドプロンプトはShiftJISなんじゃないですかね?
https://qiita.com/user0/items/a9116acc7bd7b70ecfb0

TeraPadで保存時の文字コードをShiftJISにしたらどうなるでしょう?

とは言え…JavaならUTF-8とかでしょうかねぇ。
先程掲示したURLの方法でコードページをUTF-8にしてみてはどうでしょうか。

>$ nkf --overwrite --oc=UTF-8 ($は内部コマンドまたは...認識されませんと出ます)

Windowsには標準でnkfは入っていないと思いますけど、そこのところどうなんです?
vectorとかからDLして入れたんですか?
そして…コマンド入力時にプロンプトは入力しませんよ?
# Linuxとかのシェルのプロンプトだと思いますが…。

Qあるタグが反応しません...

mi:first-letter {
font-size: 2em;
color: #7172ac;
}

あるサイトで見つけて使おうと思ったのですがこれが反応しません...どうすれば...

Aベストアンサー

mi とは何でしょうか?
div.mi か div#mi の間違いである可能性はないですか?

疑似要素 ::first-letter については以下を参照
https://developer.mozilla.org/ja/docs/Web/CSS/::first-letter

Qhtml 文字化け

html と php で現在勉強していますが
画像のように文字化けしてしまいます。

何が原因なのでしょうか?
教えていただけると助かります。

Aベストアンサー

HTMLの文字コードをUTF-16にしても変わりませんか?

QCSVで文字化けしてしまうのを直すマクロ

いつもお世話になっております。
Excel2013を使用していますので
アドバイスどうぞよろしくお願いします。

"ファイル名"というシートのA列2行目からCSVファイルのファイル名が書いてあります。
日によるのですが、だいたい5~10件程度です。
そしてこのCSVファイルがくせ者でファイルを開くと文字化けを起こしてしまいます。下記のサイトを参考にマクロを作ったのですが、文字化けはしないものの文字に必ず""がついてしまい、また一行しか転記されません。

http://officetanaka.net/excel/vba/file/file10.htm

例 空白→""、 神奈川→"神奈川"

やりたいこととしてはファイル名とあるシートのA列2行目に書いてあるCSVファイルを開き、文字化けを直してSheet1にデータを表示させ、それをファイル名が書いてある最終行まで行いたいです。

Sub macro()
Dim i1 As Long, x As Long
Rbook As Workbook
Rsheet As Worksheet, Ssheet As Worksheet
Set Rbook = ThisWorkbook

Sheets("ファイル名").Select
Set Rsheet = Rbook.Worksheets("ファイル名")
For i1 = 2 To 10
If Rsheet.Cells(i1, 1).Value <> "" Then
Sheets("SHEET1").Select ’表示させるシート
Set Ssheet = Rbook.Worksheets("SHEET1")
Ssheet.Cells.Clear
Ssheet.Range("A1").Select

’文字化けを直す
Dim buf As String, Target As String, i1 As Long
Dim tmp As Variant, j As Long
Target = "¥アドレス" & Ssheet.Cells(i, 1).Value
With CreateObject("ADODB.Stream")
.Charset = "UTF-8"
.Open
.LoadFromFile Target
Do Until .EOS
buf = .ReadText(-2)
i = i + 1
tmp = Split(buf, ",")
For j = 0 To UBound(tmp)
Cells(i, j + 1) = tmp(j)
Next j
Loop
.Close
End With

’別のマクロ実行

End if
Next i1

’2行目、3行目と続く

End Sub

どうぞよろしくお願い致します。

いつもお世話になっております。
Excel2013を使用していますので
アドバイスどうぞよろしくお願いします。

"ファイル名"というシートのA列2行目からCSVファイルのファイル名が書いてあります。
日によるのですが、だいたい5~10件程度です。
そしてこのCSVファイルがくせ者でファイルを開くと文字化けを起こしてしまいます。下記のサイトを参考にマクロを作ったのですが、文字化けはしないものの文字に必ず""がついてしまい、また一行しか転記されません。

http://officetanaka.net/excel/vba/file/fil...続きを読む

Aベストアンサー

こんにちは。

>そのあと"buf = .ReadText(-2)"で止まり
>"パラメーターが間違っています"と表示されてしまいます。。。
>アドバイスどうぞよろしくお願いします。

ご指摘の部分は、残念ですが、想定外の問題で、ADODBを使って別のやり方はありますが、そのデータ自体の問題であり、原因は分からないままにコードを変えて何度も繰り返す可能性のほうが高いです。別のファイルでも、2番めに同じように起こりますか?

   Next j
  Loop
  .Close
 End With
 Set Strm = Nothing '←は入れたらどうでしょうか。
End Sub '←ここが最後の行

それと、私は、参照設定で、Adodb を入れていること。(Microsoft ActiveX Data Objects 2.8 Library)
Dim Strm As ADODB.Stream

これらは、あまり関係ないけれども、実際に自分がする時はこうします。もちろん、ご質問者さんが選んだ方法を完動するように書き上げただけですから、この延長上に、同様のエラーがなくなるという可能性は低いのではないかと思います。

今、思いついたのは、Excel 関数のClean 関数を間に入れる方法はあるとは思います。
それは、エラーを起こすと予想されるバイナリコードを除去する働きがあります。ただし、エラーがバイナリコードであれば、という条件です。

しかし、こちら側では、根本的な解決策は見当たりません。が、何度もトライするよりも、ダメだったファイルが、どうしてだめだったか、エディターなどで調べていただいたほうが良いですね。そちらのほうが早いのです。
巨大なファイルではない限りは、文字変換で、UTF-8 から、SJISに変換するツールで、一旦変更してから、インポートするほうが楽だと思います。Vector で、Unix系のツールなどいくつかあるようです。

こんにちは。

>そのあと"buf = .ReadText(-2)"で止まり
>"パラメーターが間違っています"と表示されてしまいます。。。
>アドバイスどうぞよろしくお願いします。

ご指摘の部分は、残念ですが、想定外の問題で、ADODBを使って別のやり方はありますが、そのデータ自体の問題であり、原因は分からないままにコードを変えて何度も繰り返す可能性のほうが高いです。別のファイルでも、2番めに同じように起こりますか?

   Next j
  Loop
  .Close
 End With
 Set Strm = Nothing '←は入れたらどうでし...続きを読む

Qスーパーハッカーやホワイトハッカーが未だにプログラムをキーボードを使ってアナログな入力を10年前と変

スーパーハッカーやホワイトハッカーが未だにプログラムをキーボードを使ってアナログな入力を10年前と変わらずに未だにガチガチキーパンチャーしてるのって一般人から見たら超絶ダサいらしいですよ。

マツコデラックスがスーパーハッカーがプログラムをキーボードで打っていたのを見て「まだキーボードで打ってるんだ。人工知能や音声を文字化出来るようになってるのに10年前と変わらずキーボードで打ってるの?!」と言っていましたが、本当にそうだなと思いました。

未だにキーボードでプログラミングしてるって古くさいというか自動化、自動化と言ってる割にプログラマーが1番アナログだったりして。

Aベストアンサー

それは普通の文章入力しか想像できない人の発想ですね。

プログラミング言語では記号を多用しますが、これをいちいちダブルコーテーションだのアットマークだの言うのは手間だし、実は記号じゃなくてダブルコーテーションは”じゃなくそのままダブルコーテーションっていう文字列にしたかったんだけど…みたいな区別に困ることもあります。その辺をきれいに解決する手段が今のところないってこと、また「キーボード入力の方が話すよりも速くてしかも正確に入力できる」と言う事実があること、またいちいち口に出すと言うことは意外に労力を要すること、といった事情から音声認識でどうにかしようという空気にならないのでしょう。

QReDim

下記のコードを詳しく教えて
   
x2 = Range("C3:E5").Value

ReDim ans2(1 To 1, 1 To UBound(x2)) ←この部分の意味

    For i = LBound(x2, 2) To UBound(x2, 2)

      For j = LBound(x2) To UBound(x2)

       この部分の意味 → ans2(1, i) = ans2(1, i) + x2(j, i)

      Next j

    Next i

Aベストアンサー

全体として以下の様な動作をしています。
ans2(1,1) = Range("C3")~Range("C5")の合計を代入
ans2(1,2) = Range("D3")~Range("D5")の合計を代入
ans2(1,3) = Range("E3")~Range("E5")の合計を代入


> x2 = Range("C3:E5").Value

x2は、要素が行方向1~3、列方向1~3の二次元配列になります。
 x2(1,1)がC3セルの値
 x2(1,2)はD3セルの値
 …
 X2(3,3)がE5セルの値



> ReDim ans2(1 To 1, 1 To UBound(x2))

各列の合計を代入するans2は要素が行方向1~1,列方向が1~3の二次元配列の構成が必要となります。
その割り当てを行っています。



そして以下で各列の合計を計算しています。
> For i = LBound(x2, 2) To UBound(x2, 2)   '列方向の要素変化(1~3/C列~E列)
>   For j = LBound(x2) To UBound(x2)    '行方向の要素変化(1~3/3行~5行)
>     ans2(1, i) = ans2(1, i) + x2(j, i) '各列ごとに行の値を足しこむ
>   Next j
> Next i



試しに
 Range("A1:C1").Value = ans2
とすれば対応するセルに計算結果が表示されます。

全体として以下の様な動作をしています。
ans2(1,1) = Range("C3")~Range("C5")の合計を代入
ans2(1,2) = Range("D3")~Range("D5")の合計を代入
ans2(1,3) = Range("E3")~Range("E5")の合計を代入


> x2 = Range("C3:E5").Value

x2は、要素が行方向1~3、列方向1~3の二次元配列になります。
 x2(1,1)がC3セルの値
 x2(1,2)はD3セルの値
 …
 X2(3,3)がE5セルの値



> ReDim ans2(1 To 1, 1 To UBound(x2))

各列の合計を代入するans2は要素が行方向1~1,列方向が1~3の二次元配列の構成が必要となります...続きを読む

Qphpで文字列に"や'などが含まれているかどうか判別する方法

phpで文字列に「"」「'」「,」「.」「(」「)」「-」が含まれているかどうか確認にはどうやったらいいのでしょうか?

「,」「.」「(」「)」「-」は下記でできたのですが、

if(strpos($text,',') !== false){
echo 'カンマが含まれています';
}

「"」「'」だとうまくできませんでした。
どのようにしたらいいのでしょうか。

また、「"」「'」「,」「.」「(」「)」「-」をまとめて判別する方法も可能でしょうか?

Aベストアンサー

preg_match('/["\',.()-]/',文字列) かと
以下サンプルソース
<?php
function test($data)
{
echo "<$data>\n";
if (preg_match('/["\',.()-]/',$data) > 0){
echo("match <$data> \n");
}
}
test('"');
test("'");
test(",");
test(".");
test("(");
test(")");
test("-");
?>

実行結果
php sample.php
<">
match <">
<'>
match <'>
<,>
match <,>
<.>
match <.>
<(>
match <(>
<)>
match <)>
<->
match <->

Qwed業界に詳しい方教えてください。 職業訓練、オンラインスクール(ウェブカツ)どちらで学ぶのが、就

wed業界に詳しい方教えてください。

職業訓練、オンラインスクール(ウェブカツ)どちらで学ぶのが、就職やフリーランスの近道でしょうか?

●職業訓練6か月500時間(html5.css.javascript.PHP.MySQL.WordPress.Bootstrap.Sass.Emmet.Gulp.Git)
●オンラインスクール(ウェブカツ)
6か月400時間
プログラミング(html.css.javascript.jQuery.MySQL.PHP-Fuelphp.)、ネットワーク、セキュリティ、プロジェクト設計、データベース設計、マーケティング、営業

宜しくお願い致します。

Aベストアンサー

何になりたいかによりますかね。
デザイナーやコーダー、プログラマーなど現場の作業をやりたいなら職業訓練、プロマネやSEや営業系までやりたいならスクールかな。

以上、実際の中身まではわからないので、内容を見ただけでの感想です。
いずれにしてもいきなりフリーランスは無理でしょう。
現場で叩き上げられた経験や実績がないと仕事なんてこないし、来たとしてもしょぼい仕事しか無いと思いますよ。
またフリーランスで生きていくならある程度全般を網羅した知識やマネジメント能力、コミュニケーション能力も欠かせません。
勉強もそうですが、就職先の業種や配属される仕事内容もよく考えたほうがいいと思う。

Q無料のプログラミングスクールを途中でやめる場合

30代女性です。事務職経験あり、PC作業には抵抗ありません。
HP製作も趣味でしていました。
エンジニアに転向しようかと思い、
東京の転職保証型の無料プログラミングスクール(GEEK JOBなど)に通おうか迷っています。

途中で合わないと感じたら辞めてもOKとサイトに記載されていますが
本当でしょうか?
終了ギリギリになって辞める人もいるんでしょうか?

地方でも0円スクールなどあるようですが、カリキュラムが古いなどという
情報を見たのでスクールは厳選しようと考えています。

または、有料でもなるべく安くて良いオススメのスクールがあれば教えてください。

Aベストアンサー

20代向けと書いてあるけど行けるのかな?
プログラミングは生半可な気持ちではできないよ。
数学の数列とか2次元配列とか好きでした?

Qwebサイト制作やそのサイトをアプリ化するために必要なプログラミング言語について。 まず一番知りたい

webサイト制作やそのサイトをアプリ化するために必要なプログラミング言語について。

まず一番知りたいのは、PHPやHTMLやCSSがないと文字が表示されないと思っていたんですが、どうやら違うみたいで、例えばPythonでサイト上に文字を表示することはできるんですか?
Pythonでサイトを作るとして、そのサイトをアプリ化するためにはPythonだけでいいんでしょうか?
Pythonを学ぼうと思ってますが、HTMLなども学んだ方がいいんでしょうか。

Aベストアンサー

ブラウザに文字を表示するだけならただのテキストファイルだって表示できますよ。

ハイパーリンクさせたり文字を飾ったりするためにHTMLがあり、それの効率化のためにCSSがあるわけです。
単に文字を表示させるだけならperlでもphpでもpythonでもshでもCでもなんでもOK。「echo」とか「print」とかのコマンドで文字出力できます。
自分のやりやすい言語を使ってください。
もちろんpythonだけでも良いですが、文字の羅列だけの表示というわけにもいかないでしょうからHTMLの知識も必須でしょうね。

あとは何を作りたいのかによりますが、もしかしたらデータベースの知識とかセキュリティの知識なんかも必要かもしれないです。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング