前提
状態:-
閲覧数:1,894
投稿日:2016-11-11
更新日:2016-11-11
下記タグがあります。
・各hタグには予め左marginを設定しています
この時、「・<a href=""></a>」もしくは「<li></li>」の左marginを、兄弟要素(h1l～h5タグ何れか)の左marginを取得して、適用するにはどうすれば良いでしょうか？
最終的にやりたいこと
・各hタグには予め左marginを設定しています
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
HTML内容として、「・<a href=""></a>」もしくは「<li></li>」を動的に追加していきます<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h1></h1>
<h2></h2>
・<a href=""></a>
・<a href=""></a>
<h3></h3>
<h4></h4>
・<a href=""></a>
<h5></h5>
・<a href=""></a>
・<a href=""></a>
・<a href=""></a>
<h2></h2>
・<a href=""></a>
・<a href=""></a>
<h3></h3>
<h4></h4>
・<a href=""></a>
<h5></h5>
・<a href=""></a>
・<a href=""></a>
・<a href=""></a>
<h1></h1>
<h2></h2>
<li></li>
<li></li>
<h3></h3>
<h4></h4>
<li></li>
<h5></h5>
<li></li>
<li></li>
<li></li>
<h2></h2>
<li></li>
<li></li>
<h3></h3>
<h4></h4>
<li></li>
<h5></h5>
<li></li>
<li></li>
<li></li>
Q
この時、「・<a href=""></a>」もしくは「<li></li>」の左marginを、兄弟要素(h1l～h5タグ何れか)の左marginを取得して、適用するにはどうすれば良いでしょうか？
最終的にやりたいこと
<h1></h1>
<h2></h2>
・<a href=""></a>
・<a href=""></a>
<h3></h3>
<h4></h4>
・<a href=""></a>
<h5></h5>
・<a href=""></a>
・<a href=""></a>
・<a href=""></a>
<h2></h2>
・<a href=""></a>
・<a href=""></a>
<h3></h3>
<h4></h4>
・<a href=""></a>
<h5></h5>
・<a href=""></a>
・<a href=""></a>
・<a href=""></a>
A.案1.一般兄弟セレクタ
<style>
h1{
font-size:300%;
line-height:1.5;
}
h2{
font-size:200%;
line-height:1.5;
margin-left:1em;
}
h3{
font-size:150%;
line-height:1.5;
margin-left:2em;
}
h4{
font-size:120%;
line-height:1.5;
margin-left:3em;
}
h5{
font-size:110%;
line-height:1.5;
margin-left:4em;
}
h1 ~ a {
margin-left:1em;
}
h2 ~ a {
margin-left:2em;
}
h3 ~ a {
margin-left:3em;
}
h4 ~ a {
margin-left:4em;
}
h5 ~ a {
margin-left:5em;
}
h1 ~ div {
margin-left:1em;
}
h2 ~ div {
margin-left:2em;
}
h3 ~ div {
margin-left:3em;
}
h4 ~ div {
margin-left:4em;
}
h5 ~ div {
margin-left:5em;
}
</style>
h1{
font-size:300%;
line-height:1.5;
}
h2{
font-size:200%;
line-height:1.5;
margin-left:1em;
}
h3{
font-size:150%;
line-height:1.5;
margin-left:2em;
}
h4{
font-size:120%;
line-height:1.5;
margin-left:3em;
}
h5{
font-size:110%;
line-height:1.5;
margin-left:4em;
}
h1 ~ a {
margin-left:1em;
}
h2 ~ a {
margin-left:2em;
}
h3 ~ a {
margin-left:3em;
}
h4 ~ a {
margin-left:4em;
}
h5 ~ a {
margin-left:5em;
}
h1 ~ div {
margin-left:1em;
}
h2 ~ div {
margin-left:2em;
}
h3 ~ div {
margin-left:3em;
}
h4 ~ div {
margin-left:4em;
}
h5 ~ div {
margin-left:5em;
}
</style>
・一般兄弟セレクタ
正規表現置換対応
内容
置換前
・<a href="任意の文字列">任意の内容</a>
置換後
<a href="任意の文字列">・任意の内容</a>
コード
置換前
・<a
置換後<a
置換前
(<a href=".*?">)
置換後\1・
・秀丸で正規表現