🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

291閲覧

atomなどの効率のいい置換方法について

ganu

総合スコア8

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/10/01 09:51

編集2019/10/01 09:55

wordで納品された記事をhtml形式に置換し入稿したいのですが、その際にいちいち<em></em>を入力して強調しなければなりません。
そこで質問なのですが、マウスで選択した文字列が自動的に<em></em>で挟み込まれるといった置換方法はないでしょうか。
知っている方教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

下記のようなプラグインがあります。
atom-wrap-in-tag
atom-tag-wrapper

投稿2019/10/01 10:55

Kapustin

総合スコア1186

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ganu

2019/10/01 12:35

ありがとうございます。
guest

0

Markdownエディタで、強調したい部分を指定してから、それをHTMLに変換するのはいかがでしょうか?

https://markdowntohtml.com/

投稿2019/10/01 09:59

TakahiroHayashi

総合スコア33

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

atomでなくても良いと思いますが、
「名前を付けて保存」→html(フィルター後)とか

イメージ説明

html

1<html> 2 3<head> 4<meta http-equiv=Content-Type content="text/html; charset=shift_jis"> 5<meta name=Generator content="Microsoft Word 15 (filtered)"> 6<style> 7<!-- 8 /* Font Definitions */ 9 @font-face 10 {font-family:"MS 明朝"; 11 panose-1:2 2 6 9 4 2 5 8 3 4;} 12@font-face 13 {font-family:Century; 14 panose-1:2 4 6 4 5 5 5 2 3 4;} 15@font-face 16 {font-family:"Cambria Math"; 17 panose-1:2 4 5 3 5 4 6 3 2 4;} 18@font-face 19 {font-family:"\@MS 明朝"; 20 panose-1:2 2 6 9 4 2 5 8 3 4;} 21 /* Style Definitions */ 22 p.MsoNormal, li.MsoNormal, div.MsoNormal 23 {margin:0mm; 24 margin-bottom:.0001pt; 25 text-align:justify; 26 text-justify:inter-ideograph; 27 font-size:10.5pt; 28 font-family:"Century",serif;} 29.MsoChpDefault 30 {font-family:"Century",serif;} 31 /* Page Definitions */ 32 @page WordSection1 33 {size:595.3pt 841.9pt; 34 margin:99.25pt 30.0mm 30.0mm 30.0mm; 35 layout-grid:18.0pt;} 36div.WordSection1 37 {page:WordSection1;} 38--> 39</style> 40 41</head> 42 43<body lang=JA style='text-justify-trim:punctuation'> 44 45<div class=WordSection1 style='layout-grid:18.0pt'> 46 47<p class=MsoNormal><b><span style='font-family:"MS 明朝",serif'><i></i></span></b></p> 48 49</div> 50 51</body> 52 53</html> 54

このようなWebサービスもあるにはあります。
ONLINE Word TO HTML5 CONVERTER

html

1<!DOCTYPE html > 2<html lang="en"> 3<head> 4<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 5<meta charset="utf-8" /> 6</head> 7 8<body style="margin: 0;"> 9 10<div id="p1" style="overflow: hidden; position: relative; background-color: white; width: 909px; height: 1286px;"> 11 12<!-- Begin shared CSS values --> 13<style class="shared-css" type="text/css" > 14.t { 15 -webkit-transform-origin: bottom left; 16 -ms-transform-origin: bottom left; 17 transform-origin: bottom left; 18 -webkit-transform: scale(0.25); 19 -ms-transform: scale(0.25); 20 transform: scale(0.25); 21 z-index: 2; 22 position: absolute; 23 white-space: pre; 24 overflow: visible; 25} 26</style> 27<!-- End shared CSS values --> 28 29 30<!-- Begin inline CSS --> 31<style type="text/css" > 32 33#t1_1{left:130px;bottom:1103px;} 34#t2_1{left:145px;bottom:1103px;} 35#t3_1{left:162px;bottom:1103px;} 36 37.s1{ 38 FONT-SIZE: 64.2px; 39 FONT-FAMILY: NotoSansCJKjp-Bold-VKana_9; 40 color: rgb(0,0,0); 41} 42 43.s2{ 44 FONT-SIZE: 66.4px; 45 FONT-FAMILY: NotoSansCJKjp-Bold-VKana_9; 46 color: rgb(0,0,0); 47} 48 49.t.m0_1{ 50 -webkit-transform: matrix(0.97,0,-0.26,0.97,0, 0) scale(0.25); 51 -ms-transform: matrix(0.97,0,-0.26,0.97,0, 0) scale(0.25); 52 transform: matrix(0.97,0,-0.26,0.97,0, 0) scale(0.25); 53} 54 55</style> 56<!-- End inline CSS --> 57 58<!-- Begin embedded font definitions --> 59<style id="fonts1" type="text/css" > 60 61@font-face { 62 font-family: NotoSansCJKjp-Bold-VKana_9; 63 src: url("fonts/NotoSansCJKjp-Bold-VKana_9.woff") format("woff"); 64} 65 66</style> 67<!-- End embedded font definitions --> 68 69<!-- Begin page background --> 70<div id="pg1Overlay" style="width:100%; height:100%; position:absolute; z-index:1; background-color:rgba(0,0,0,0); -webkit-user-select: none;"></div> 71<div id="pg1" style="-webkit-user-select: none;"><object width="909" height="1286" data="1/1.svg" type="image/svg+xml" id="pdf1" style="width:909px; height:1286px; -moz-transform:scale(1); z-index: 0;"></object></div> 72<!-- End page background --> 73 74 75<!-- Begin text definitions (Positioned/styled in CSS) --> 76<div id="t1_1" class="t s1"></div> 77<div id="t2_1" class="t m0_1 s2"></div> 78<div id="t3_1" class="t s1"></div> 79 80<!-- End text definitions --> 81 82 83</div> 84</body> 85</html> 86

まぁ、
デザインレイアウトとは言え**「そもそもWordで納品させない」**のが一番と思います。
まだPhotoshopとかのほうが良いですね。

というか大抵はモックでHTMLがくるものだとは思いますけど、さすがにWordはWeb上で再現するのが難しい部分はあります(色とかレイアウトとか)

投稿2019/10/01 12:27

m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問