• 締切済み

HTMLの書き直す

HTMLファイルにある一部分のリンクをハイライトしたいですが(例えば:色変わりなど)、perlでどうしたらいけますか?よろしくお願いします。 例えば:<IMG ALT="dot" WIDTH="15" HEIGHT="18" ALIGN="bottom" SRC="/images/sky-dot.gif"><font size="2"> <a href="interesting/">面白いページ</a></font><br><br> から <IMG ALT="dot" WIDTH="15" HEIGHT="18" ALIGN="bottom" SRC="/images/sky-dot.gif"> <font size="2" color=#666666><a href="interesting/">面白いページ</a></font><br><br>

  • Perl
  • 回答数2
  • ありがとう数1

みんなの回答

noname#227796
noname#227796
回答No.2

ファイルから1行読み込んで、その行を正規表現で引っかけて置換してやればいいかと。 open(OUT,">c:\newpage\hogehoge.html"); open (FILE,"c:\oldpage\hogehoge.html"); while(<FILE>) { s/<IMG ALT="dot" WIDTH="15" HEIGHT="18" ALIGN="bottom" SRC="\/images\/sky-dot.gif"><font size="2">/<IMG ALT="dot" WIDTH="15" HEIGHT="18" ALIGN="bottom" SRC="\/images\/sky-dot.gif"><font size="2" color="#666666">/ig; print OUT $_; } close(FILE); close(OUT); こんな感じかな。 元のファイルを直接書き換えるのは、置換が間違ってたときに号泣ものなので、別の場所に出力するようにした方が良いよ。 まあ、この場合はスタイルシートを使うようにした方が後々メンテが楽なので良いと思うけどね。

kenchen
質問者

お礼

わかりましたが、どうもありがとう

kenchen
質問者

補足

超初心者ですが、スタイルシートの使い方また調べたいと思いますが、何かアドバイスがございましたら、宜しくお願いします。

noname#25358
noname#25358
回答No.1

 ソース内のHTMLをそのまま書き直せばいいんです。  ただし <font>タグは <a>タグの内側にもっていった方がいいです。

kenchen
質問者

補足

ありがとうございました。初心者ですので、分からないところ多いですが、どうぞよろしくお願いします。 質問の意味は、PERLを使って、どうしたら(たとえば如何な関数を使って)、ファイル内のリンクの文字(例:面白いページ)を探して、自動的にHTMLファイルを変換できることです。

関連するQ&A

  • 下記が私のHPのタグなのですが

    文字化けをしてしまいます。 タグは文字制限を超えるため、これで全部ではありませんが、 文字化けの原因はどこにあるのでしょうか? 編集のプレビュー等では文字化けせず表示されますが、 アップすると、文字化けしてしまうのです。 下記はアップした後、右クリックでソースをコピーしたものです。 文字化けの原因をお教え願います。 よろしくお願い申し上げます。 <HTML> <HEAD> <META name="GENERATOR" content="IBM HomePage Builder 2001 V5.0.0 for Windows"> <TITLE></TITLE> </HEAD> <BODY><!-- geoguide start --><div align=center><script language="JavaScript">var jps=382116062;var jpt=1379958019</script><script language="JavaScript" src="http://bc.geocities.yahoo.co.jp/js/gg.js"></script></div><!-- geoguide end --><!-- geoguide start --><div align=center><script language="JavaScript">var jps=382116554;var jpt=1379847951</script><script language="JavaScript" src="http://bc.geocities.yahoo.co.jp/js/gg.js"></script></div><!-- geoguide end --><DIV ALIGN=CENTER><!--#geoguide--></DIV> <TABLE width="734" height="112"> <TBODY> <TR> <TD height="81" width="116" bgcolor="#33FF00" align="left"><IMG src="im/Scome.gif" width="114" height="79" border="0"></TD> <TD height="81" width="602" bgcolor="#33FF00"><IMG src="im/midasi.jpg" width="600" height="80" border="0"></TD> </TR> </TBODY> </TABLE> <TABLE align="left"> <TBODY> <TR> <TD width="115" valign="top" bgcolor="#FFFFFF" height="601"><FONT size="3"><img src="@geocounter"><BR> <BR> <IMG src="im/M04_01.gif" width="13" height="13" border="0"><B><FONT color="#000000"><A href="col5/whatsnew.html"><FONT color="#000000">what's new</FONT></A></FONT></B><B><BR> <A href="col1/profile.html"><FONT color="#000000"><IMG src="im/M04_01.gif" width="13" height="13" border="0">・ラ・愠ユ・」。シ・</FONT></A><BR> </B><B><A href="col3/new.html"><FONT color="#000000"><IMG src="im/M04_01.gif" width="13" height="13" border="0">ツミタ�ョタモ</FONT></A></B><B><BR> <A href="col2/member.html"><FONT color="#000000"><IMG src="im/M04_01.gif" width="13" height="13" border="0">・皈ミ。シセメイ</FONT></A><BR> </B></FONT><FONT size="2"><B><FONT color="#000000" face="」ヘ」モ 」ミフタトォ"><IMG src="im/M04_01.gif" width="13" height="13" border="0"></FONT></B></FONT><FONT size="3"><B><FONT color="#000000" face="」ヘ」モ 」ミフタトォ">・ョ・罕鬣遙シ</FONT></B></FONT><BR> <IMG src="im/M04_01.gif" width="13" height="13" border="0"><FONT size="2" color="#000000"><FONT color="#000000" size="3"><B>ナキオ、ヘスハ<BR> </B></FONT></FONT><FONT size="2" color="#000000"><A href="http://www.wni.co.jp/cww/docs/yoho/s12.html"><FONT color="#000000"><!-- begin webleague Link --></FONT></A><A href="http://www.webleague.net/teamdb.html"><IMG src="http://www.webleague.net/teamlink/images/teamlink01.jpg" border="0"></A><A href="http://www.okaten.com/baseball/index.html"><FONT color="#000000"> <!-- end webleague Link --></FONT></A></FONT><BR> <IMG src="im/ten-bun.gif" border="0"><BR> <A href="mailto:manesitana@ybb.ne.jp"><IMG src="im/fingermail.gif" width="77" height="20" border="0"></A><BR> <B><A href="http://www2.g-7.ne.jp/~yakyu/index.shtml"><FONT color="#00CCCC">チ鋙蠕ノ</FONT></A></B><BR> <A href="col2/fuso.html"><IMG src="im/fuso.jpg" width="112" height="20" border="0"></A><BR> <B><FONT size="2" color="#99CC00">ナミサウイネ<BR> </FONT><FONT size="2" color="#666666">ウーナ�</FONT></B><BR> <FONT color="#666666"><B>car doctor<BR> </B></FONT><FONT color="#666666" size="2"><B>・「・ム・�</B></FONT></TD> </TR> </TBODY> </TABLE> <TABLE width="618" height="388"> <TBODY> <TR> <TD align="left" valign="top" width="420"> <TABLE> <TBODY> <TR> <TD valign="top" height="150" width="208" align="center"><IMG src="im/allspirits.jpg" width="203" height="146" border="0"></TD> <TD height="150" width="196" valign="top" align="left" bgcolor="#FFCC00"><A href="butting.html"><FONT color="#000000">「」イハウリ、ケ、�鋙蝪ハツヌキ筍ヒ<BR> <SPAN style="FONT-SIZE: 9.5pt; COLOR: black; FONT-FAMILY: '」ヘ」モ フタトォ'; mso-hansi-

    • ベストアンサー
    • HTML
  • HTMLで画像を貼り付け

    不明な点がありましたら補足要求かけてください。よろしくお願い致します。 自分のHPにリンク先の背景を乗せ、後付けでその背景の上に動画像(heart1とbanner)2タイプを左右端上貼りたいのです。 以下が背景タグでこれに画像を乗せたいのです。 (プライベートな部分は★に変えてあります。) <table width="390" border="0" cellpadding="3" cellspacing="0" bgcolor="#241C43" height="80"> <tr> <td width="19%" height="52"><a href="http://www.★.net/ring/index.htm" target="_top"> </a> <a href="http://www.★.net/ring/index.htm"><img src="heart1.gif" width="66" height="50" border="0"></a> </td> <td width="81%" height="52"> <div align="center"><a href="http://www.★.net/ring/index.htm"><img src="ring_banner.gif" width="306" height="35" border="0"></a><br> <font size="1"> <font color="#FFFFFF">   ★★</font></font> </div> </td> </tr> <tr> どうぞよろしくお願い致します。

  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか? ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • プルダウンメニューがうまくいかない

    スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。 サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。 ■HTML■ <a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a> <span>|</span> <a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a> <span>|</span> <div id="menu1" onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)"> <a href="event/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">お知らせお知らせ</a> <div class="submenu" id="submenu1"> <a href="event/index.html"><img src="images/submenu.gif" width="8" height="12">イベント1</a> <span>|</span> <a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント2</a> <span>|</span> <a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント3</a> </div> </div> <span>|</span> <a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a> <span>|</span> <div id="menu2" onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)"> <a href="mainmenu1/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">メインメニュ1</a> <div class="submenu" id="submenu2"> <a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ1</a> <span>|</span> <a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">さぶめにゅ2</a> <span>|</span> <a href="mainmenu1/submenu3.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ3</a> </div> </div> 省略 </div> ■スタイルシート■ .menu { font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; height:2em; width:140px; border-top:solid 1px #33cc99; position:absolute; text-align:left; left:0; top:95px; padding-left:10px } .menu a { color:#33cc99; border-bottom:solid 1px #33cc99; text-decoration:none; display:block; width:100%; line-height:2em; text-align:left; } .menu a:hover { background-color:#ffffcc; } .menu span { color:#000000; display:none; } .menu img { margin-right:10px; margin-left:5px; border:0 } .submenu a{ background-color:#33cc99; border-bottom:solid 1px #ffffff; color:#ffffff; width:100%; } .submenu { visibility:hidden; position:absolute; left:0; width:140px; padding-left:10px; } .submenu a:hover { background-color:#0099cc; width:140px; } #submenu1 { position:absolute; left:0; } #submenu2 { position:absolute; left:0 } #submenu3 { position:absolute; left:0 } #submenu4 { position:absolute; left:0 } #submenu5 { position:absolute; left:0 } #submenu6 { position:absolute; left:0 } ■Javascript■ function MenuOn(x){ obj=document.getElementById("submenu"+x).style.visibility="visible"; } function MenuOff(x){ obj=document.getElementById("submenu"+x).style.visibility="hidden"; }

  • このテーブルタグの中の色を白にするには

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .border{ font-size : 1pt; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_1.gif" width="20" height="20" border="0"></TD> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> <TD colspan="2" rowspan="2"><IMG src="images/001_base_2.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="18"></TD> </TR> <TR> <TD width="2" bgcolor="#000000"><BR> </TD> <TD width="18"></TD> <TD>ここに内容を書きます(画像<A href="images/001_base_1.gif">1</A>・<A href="images/001_base_2.gif">2</A>・<A href="images/001_base_3.gif">3</A>・<A href="images/001_base_4.gif">4</A>)</TD> <TD width="18"></TD> <TD width="2" bgcolor="#000000"><BR> </TD> </TR> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_4.gif" width="20" height="20" border="0"></TD> <TD height="18"></TD> <TD rowspan="2" colspan="2"><IMG src="images/001_base_3.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 現在はテーブルの内側の色が透明色(背景の色)になっています。 これを透明でなく白にする方法をおしえてください!

  • HTMLとCSSの記述で表示がうまくされません

    現在HTMLとCSSを使ってウェブのページを作っているのですが どうしても思ったように表示が出来ません。 HTMLの他にCSSの記述を記載致しました。 なにが出来ないかと申しますと 下記の <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは? </p> 記述部分を枠の中に入れたいのですが、どうしても外に出て表示されてしまいます。 どなたか解決方法をご存知の方はお教え頂けないでしょうか? HTMLの記述がこちらになっております。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01//EN" "​http://www.w3.org/TR/html4/strict.dtd">​ <html lang="ja"> <meta http-equiv="Content-Type"content="text/html;charset=shift_jis"/> <head> <title>aaaa</title> <meta http-equiv="description"content="bbbb"> <meta http-equiv="keywords"content=""> <link rel="stylesheet" type="text/css" href="index.css" media="all"> </head> <body> <p class="head"><span lang="en"></span></p> <h1></h1> <div class="img"><img src="header.gif" alt="" width="800" height="165"></div> <div class="menu"> <a href="index.html"><img src="navi_top.gif" width="195" height="35" alt="top"></a> <a href="02.html"><img src="navi_ijime.gif" width="195" height="35" alt=""></a> <a href="03.html"><img src="navi_shokuba.gif" width="195" height="35" alt=""></a> <a href="04.html"><img src="navi_plofile.gif" width="195" height="35" alt=""></a> </div> <p class="section"> <h2>解決できる方法</h2> <img src="mark.gif" alt="*" width="14" height="18"><font color="#FF0000">再短時間と最小の労力で職場や学校のマルマルが解決できる方法!!</font> 心理学の知識がない人でも簡単にできた<br> あまりにも効果的な<font color="#FF0000">『門外不出』</font>の<font color="#FF0000">aaaaa</font>対処法とは? </p> <p class="text_bg"> <div class="text">text</div> </p> </body> </html> CSSの記述がこちらになっております。 body{ text-align:center; width:800px; } p{ text-align:center; font-size:0.85em; color:#333333; } p.head { font-size:0.6em; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight:bold; color:#666666; text-align:left; margin-bottom:0px; } .img{ margin-top:0; margin-bottom:0; } .menu { padding-left:1px; margin-bottom:0; margin-top:0; } h1{ font-size:0.5em; display:none; } h2{ font-size:0.5em; display:none; } h2 img{ vertical-align:middle; } .mark{ margin-right:10px; } .section{ font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; margin-bottom:0px; margin-top:0px; background-image:url(back_01.gif); background-repeat:no-repeat; width:800px; height:165px; color:#666666; font-size:1em; } p.01{ text-align:center; font-size:1.05em; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } p.text_bg{ background-image:url(back_02.jpg); background-repeat:no-repeat; margin-top:10px; width:800px; height:365px; } .text{ margin-top:10px; text-align:center; }

    • ベストアンサー
    • HTML
  • HTMLのことで・・・・・・・・。

    さきほども質問したのですが、少々説明不足だったので、もう一度質問したいと、思います。。。;;; この下は、今の私のソースです; ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <Html> <Head> <Title>~</Title> </Head> <Body> </div> このバナー <!-- content end --> <!-- topleft --> <div id="left"> <a href="#"><img src="ban_seitokai.jpg" width="200" height="60" alt="生徒会の一存"></a> <br> <a href="#"><img src="bn_key.gif" width="200" height="60" alt="key"></a> <a href="#"><img src="" width="" height="" alt=""></a> <a href="#"><img src="" width="" height="" alt=""></a> </div> <div id="right"> <div align="center"><h1>タイトル</h1></div> <p>文章</p> </div> </div> <!-- topleft end --> </div> <!-- maincontent end --> </Body> </Html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー この画像の上の図が↑のソースです。 下の図は、『こうしたい』という図です。 画像の隣に文章を表示させたいのですが、どうすればなりますか? できれば、わかりやすく、例や見本を書いてくれますと助かります;

  • ドロップダウンメニューの方法を教えてください

    ■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }

  • CSSで、画像を左寄せにして全体を中央にする方法

    画像5点を左寄せで配置しています。 添付画像のようにブラウザの幅によって段数を変更できるようにしていますが、 どうしても、画像部分がセンタリングされません。 他のサイト等を丸2日かけて調べましたが、どうもうまい事できません。 どなたかご教授くださいませ。 よろしくお願いいたします。 以下、現状のHTMLとCSSです。 ■HTML <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="css/style2.css" media="all"> <title>タイトル</title> </head> <body> <header> <p>ヘッダー</p> </header> <div id="contents"> <a href="http://○○○○○○○/001.html"><img src="images/001s.jpg" > <a href="http://○○○○○○○/002.html"><img src="images/002s.jpg" > <a href="http://○○○○○○○/003.html"><img src="images/003s.jpg" > <a href="http://○○○○○○○/004.html"><img src="images/n004s.jpg" > <a href="http://○○○○○○○/005.html"><img src="images/005s.jpg" > </div> <footer> <p>フッター</p> </footer> </body> </html> ■CSS @charset "UTF-8"; *{ margin: 0;padding: 0} a { text-decoration : none} ul, ol { list-style : none} img { vertical-align : top} html { font-family : verdana, sans-serif; font-size : 120%; line-height : 150%; margin : 0; width : 100%; text-align:center; } body { width:100%; text-align:center; } header { width:100%; margin-bottom: 0px; color: #fff; font-size: 20px; height:30px; background : url(../images/back.jpg) } #contents { width:100%; padding : 30px 0 10px; text-align:left; } #contents img { margin-bottom : 24px; } footer { color: #fff; width:100%; font-size: 10px; height:30px; background : url(../images/back.jpg) }

    • 締切済み
    • CSS
  • 色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか?

    色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか? <tr> <td width="864" class="style49"> <p align="center"><a href="link/ryoukin.html" class="style49"><br /> <img src="image/web_004.gif" alt="格安引越が出来る理由" width="200" height="50" border="0"/></a><strong><a href="link/ryoukin.html" class="style49"><span class="style51"><img src="image/web_003.gif" alt="重要事項説明" width="200" height="50" border="0"/></span></a><a href="link/ryoukin.html" class="style49"><img src="image/web_005.gif" alt="料金計算書・オプション価格" width="200" height="50" border="0"/></a><br /> </strong></p> <p align="center"><strong><br /> <br /> <img src="image/web_010.gif" alt="引越プラン" width="130" height="35" /><br /> <br /> <a href="link/link1.html" class="style49"><span class="style58"><img src="image/web_007.gif" alt="フローチャート式お見積作成" width="200" height="95" border="0"/></span></a> <span class="style58"><a href="link/link0.html" class="style49"><img src="image/web_008.gif" alt="お荷物記載による個別お見積作成" border="0"/></a></span> <a href="http://*****.**.****.**/postmail/postmail2.html" class="style49" ><img src="image/web_009_03.gif" alt="各種お問合せ" border="0"/></a><br /> </strong></p> <p></p> ちなみに引越プランからフローチャート式お見積作成、お荷物記載による個別お見積作成、各種お問合せまで全部を一枠で部分的に外枠で囲みたいのですが、どのようなやり方があるでしょうか? 部分的に囲めなくてすごく困っています。どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう