質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2349閲覧

ボタン01と02があるときは並べて表示し、02しかないときは01の場所に02を表示させたい。

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/10 19:34

編集2016/10/11 06:37

###□補足
CSSを質問文の最後に補足しておきます。このCSSのアクションを崩さないように、目的を達成したいです。よろしくお願いいたします。

###■前提
WordPressを使っています。
・記事本文にタグを書くことでボタンを表示しています。(下記画像①)
・そしてCSSで装飾しています。(下記画像②)
・目的のとおりのボタンが表示されます。(下記画像③)
イメージ説明
イメージ説明
イメージ説明

###■目的
ボタンを複数表示したい場合がありあす。(下記画像④と④´)
イメージ説明

###■質問
この場合、①のHTMLと②のCSSでは対処できないので、その方法が知りたいです。

今は下記のように考えてしまっていて、わかりません。
すなわち、「ボタン01」の作り方がこう↓なんだから、

html

1<a href=“http://example.com/” class=“btn01”><span>ネコを<br>よろしく</span></a>

css

1btn01{margin: 30px 0px -210px -148px;

それならば、「ボタン02」はこう↓すればいいのか…?

html

1<a href=“http://example.com/” class=“btn02”><span>イヌも<br>よろしく</span></a>

css

1btn01{margin: 200px 0px -380px -148px;}

と考えていました。
これでは画像④にしかなりません。④´には対応できないんです。
btn01がないとき、btn02をbtn01の場所に表示したいということです。

CSSでできるのか、それともHTMLで条件を分岐させるのでしょうか?
とにかく、方法が分かる方、いらっしゃいましたら、よろしくお願いいたします。

###□補足
CSS全文は下記のとおりです。

CSS

1.btn01 { 2 color: #fff; 3 text-decoration: none; 4 text-align: center; 5 position: relative; 6 z-index: 10; 7 display: block; 8 width: 150px; 9 height: 150px; 10 margin: 30px 0px -210px -148px; 11} 12.btn01 span { 13 position: absolute; 14 top: 50%; 15 left: 50%; 16 transform: translate(-50%,-50%); 17 width: 120%; 18} 19.btn01::before { 20 content: ''; 21 background-color: #dda284; 22 display: block; 23 position: absolute; 24 width: 150px; 25 height: 150px; 26 z-index: -1; 27 border-radius: 50%; 28 box-shadow: 29 0 0 0 0 #fff, 30 0 0 0 0 #dda284; 31 transition: all .2s ease; 32 -webkit-transition: all .2s ease; 33} 34.btn01:hover::before { 35 transform: scale(0.8); 36 -webkit-transform: scale(0.8); 37 box-shadow: 38 0 0 0 25px #fff, 39 0 0 0 27px #dda284; 40} 41.btn01:hover{ 42 color: #FFF; 43}

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

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

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

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

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

kei344

2016/10/10 19:45

例示用ドメインはご自身で所有されていない限りexample.comを利用してください。
退会済みユーザー

退会済みユーザー

2016/10/10 19:53

あ、なるほど!バツバツバツのつもりでしたけれど、エックスエックスエックスって、誰かのドメインなのですね!すぐ修正いたします。無知は罪を併発しがちですね。ご指摘ありがとうございます。気を付けます。
guest

回答3

0

[再回答]

すみません。勘違いしていたので再回答します。
すべてのソースをいただいてないのでなんとも言えない部分もありますが、今の箇所で引っかかっているということは各HTML要素の挙動がつかめていないのが原因なのでは思ってます。たとえばdivはブロック要素でspanはインライン要素です。そして、ブロックにはブロックの振る舞いがあり、インラインにはインラインの振る舞いがあります。そしてフロートやpositionも振る舞いを知らず使っていると全然意味のわからない挙動に感じると思います。

今、どうにかマージンで修正しようとしていますがとりあえず今は置いておいて、ボタンのエリアを左に作り、ネコのエリアを右に作り、その中にボタンを配置したりテキストを配置するというような感じで外枠から作り直していく方が早いですし、ブラウザや端末によって多少挙動が変わったりするので、その対応で追われる必要もある程度なくなると思います。

できる限りシンプルに、HTML要素がもっている挙動を考えながら組んでいくといいと思います。

HTML

1<html lang="ja"> 2 <head> 3 <meta charset="UTF-8"> 4 <style type="text/css"> 5 a{ 6 text-decoration: none; 7 color: #fff; 8 } 9 10 #wrap{ 11 width: 740px; 12 margin: 0 auto; 13 overflow: hidden; 14 } 15 #left, 16 #right{ 17 padding: 50px 20px 20px; 18 min-height: 100%; 19 } 20 #left{ 21 float: left; 22 width: 260px; 23 background-color: #ccc; 24 } 25 #right{ 26 float: right; 27 width: 400px; 28 background-color: #ddd; 29 } 30 31 32 .btn01, 33 .btn02 { 34 color: #fff; 35 text-decoration: none; 36 text-align: center; 37 position: relative; 38 z-index: 10; 39 display: block; 40 width: 150px; 41 height: 150px; 42 margin: 80px auto; 43 } 44 .btn01 span, 45 .btn02 span { 46 position: absolute; 47 top: 50%; 48 left: 50%; 49 transform: translate(-50%,-50%); 50 width: 120%; 51 } 52 .btn01::before, 53 .btn02::before { 54 content: ''; 55 background-color: #dda284; 56 display: block; 57 position: absolute; 58 width: 150px; 59 height: 150px; 60 z-index: -1; 61 border-radius: 50%; 62 box-shadow: 63 0 0 0 0 #fff, 64 0 0 0 0 #dda284; 65 transition: all .2s ease; 66 -webkit-transition: all .2s ease; 67 } 68 .btn01:hover::before, 69 .btn02:hover::before { 70 transform: scale(0.8); 71 -webkit-transform: scale(0.8); 72 box-shadow: 73 0 0 0 25px #fff, 74 0 0 0 27px #dda284; 75 } 76 .btn01:hover, 77 .btn02:hover{ 78 color: #FFF; 79 } 80 81 #right .img{ 82 width: 280px; 83 padding: 100px 0; 84 background-color: #fff; 85 text-align: center; 86 } 87 #right .date{ 88 display: block; 89 font-size: 12px; 90 padding: 3px 0; 91 } 92 </style> 93 </head> 94 <body> 95 <div id="wrap"> 96 <div id="left"> 97 <a href="http://example.com/" class="btn01"><span>ネコを<br>よろしく</span></a> 98 <a href="http://example.com/" class="btn02"><span>イヌを<br>よろしく</span></a> 99 </div> 100 101 <div id="right"> 102 <span class="date">date 00000/00/00</span> 103 <div class="img">CAT</div> 104 <p>TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT</p> 105 </div> 106 </div> 107 </body> 108</html>

投稿2016/10/11 09:47

編集2016/10/11 09:56
IShix

総合スコア1724

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

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

退会済みユーザー

退会済みユーザー

2016/10/11 22:44

おはようございます! >各HTML要素の挙動がつかめていないのが原因なのでは~~~ まったく仰るとりです!笑 >ボタンのエリアを左に作り、ネコのエリアを右に作り、その中にボタンを配置したりテキストを配置するというような感じで外枠から作り直していく方が早い なるほど、その方が私が聞いてもきれいに感じますね。いまは無理矢理感丸出しですものね。 >ブラウザや端末によって多少挙動が変わったりするので、その対応で追われる必要 まさに!無理矢理やっていたせいで、各CSSの関係がめちゃくくちゃになっている状態です。ちょうと今、ブラウザによって表示か違っちゃっています… >できる限りシンプルに、HTML要素がもっている挙動を考えながら組んでいく leftとrightとは!!!ははぁ!こうして分けるとすごい見やすいですね!へぇ~!!動きもさっき起きてやってみたら、うまくいきました!すごい!勉強になりました。ありがとうございます。 ただ、今回はとりあえず無理矢理な状態のままやってとりあえず私の質問は完全に解決したので、先着順ということで別の方にベストアンサーとさせて頂きます。 ご返信遅くなってしまって申し訳ございませんでした。
退会済みユーザー

退会済みユーザー

2016/10/11 22:47

せっかく素敵な整理方法をご教示いただいたのに、すでに私のCSSのどこを消してleftとrightに整理すればいいかが、わからないっていう状態なのでした。ちゃんちゃん笑
guest

0

positionを使うとそういうレイアウトはしんどいですよね。
ポジションを使わないと簡単なので使わないのもありだと思いました。
ソース書いてみたので適当に.htmlにしてブラウザで見てみてください。

HTML

1<html lang="ja"> 2 <head> 3 <meta charset="UTF-8"> 4 <style type="text/css"> 5 a{ 6 text-decoration: none; 7 color: #fff; 8 } 9 .btn01, 10 .btn02{ 11 display: block; 12 width: 150px; 13 height: 100px; 14 padding: 25px 0; 15 border-radius: 50%; 16 text-align: center; 17 font-size: 28px; 18 margin: 150px 0 0 150px; 19 } 20 .btn01{ 21 background-color: #ff0000; 22 } 23 .btn02{ 24 background-color: #0037ff; 25 } 26 </style> 27 </head> 28 <body> 29 <a href="http://example.com/" class="btn01"><span>ネコを<br>よろしく</span></a> 30 <a href="http://example.com/" class="btn02"><span>イヌを<br>よろしく</span></a> 31 </body> 32</html>

投稿2016/10/10 21:12

IShix

総合スコア1724

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

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

退会済みユーザー

退会済みユーザー

2016/10/10 22:20

目的の形にはなりましたね! .btn01, .btn02 という風にカンマで区切れば、「上の(btn01)がなかったら下の(btn02)を表示して」という指示になるのですね!ありがとうございます。 しかし… 私のCSSのボタンには適用されませんでした。 全部の .btn01とか .btn01 spanとか を、 .btn01, .btn02とか .btn01 span, .btn02 spanとか に変えたのですが…なぞです。。
退会済みユーザー

退会済みユーザー

2016/10/10 22:30

あ、そっか。「positionという指示が入っていると、難しい」ということを冒頭で仰っていますもんね。 でも、どうやら私のボタンにはその指示が必須なようなのです。まぁこういうクールなアクションのボタンならなんでもいいのですけれどね。 ふあ。すっかり困り果てて…もうこれは朝ってやつですね。おやすみなさい。笑
退会済みユーザー

退会済みユーザー

2016/10/11 06:43

IShikawanさん、失礼いたしました。私がCSSを質問で端折っていたために、「目的は達成しているけど、私のCSSには合わない」というご回答を頂戴したんですものね。いちおうCSS補足しておきました。以上、お詫びとご報告でした。
guest

0

ベストアンサー

div要素などで囲ってしまえばいいのでは?位置に関する操作は囲った要素で行い、.btn01/.btn02はボタンスタイルのみ担当させる感じです。

HTML

1<div class="both"> 2 <a href="http://example.com/" class="btn01"><span>ネコを<br>よろしく</span></a> 3 <a href="http://example.com/" class="btn02"><span>イヌを<br>よろしく</span></a> 4</div>

出力前にあるかどうか判断して、外側の要素にクラスをつける方法とか。この場合は.btn01/.btn02は変えず、.both>.btn02{}で位置情報のみ指定する感じです。

PHP

1$html = <<<EOD 2 <a href="http://example.com/" class="btn01"><span>ネコを<br>よろしく</span></a> 3 <a href="http://example.com/" class="btn02"><span>イヌを<br>よろしく</span></a> 4 吾輩は猫である。名前はまだ無い。 5 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 6EOD; 7 8if ( ( strpos( $html, ' class="btn01"' ) !== false ) && ( strpos( $html, ' class="btn02"' ) !== false ) ) { 9 $html = '<div class="both">'.$html.'</div>'; 10}

投稿2016/10/11 02:26

kei344

総合スコア69366

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

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

退会済みユーザー

退会済みユーザー

2016/10/11 03:11

divで囲む作戦はダメでした。なぜかというと、ネコの画像があるからです。つまり、btn01だけの場合と、01と02の二つがある場合は、ネコの画像の高さが変わってしまいました。(>_<) これから二番目の作戦にチャレンジしてみたいと思います!が、 >この場合は.btn01/.btn02は変えず、.both>.btn02{}で位置情報のみ指定する感じ というのは、もう少し素人向けに言うと、どういうことでしょうか?汗 とりあえずワインまみれのカーテン洗ってきます。。
kei344

2016/10/11 04:19

> なぜかというと、ネコの画像があるからです。 関係なく出来るとは思いますよ。その周辺のHTMLとCSSをテキストの状態で質問文に追記してください。ネコは悪くない(笑)。 > もう少し素人向けに言うと がんばれ、ですかね。私個人の方針として、自分自身を「素人」と呼ぶ方には厳しくすることにしていまして。(どこまで説明すれば理解できるかがわからないため) とりあえず状況が再現できるHTMLとCSSを提示いただければ回答に追記できると思います。
退会済みユーザー

退会済みユーザー

2016/10/11 05:51

ボタンが2つあるときのマージンはこうです。 .both{margin: 80px 0px -408px -175px;} この高さが、ネコの写真がちょうどよい位置なんです。 もしボタンが1つのときにも同じmarginだと、ネコがやたら上に表示されてしまうんです。 なので、1つのときはmarginをこうしないと写真が同じ位置にきません。 .both{margin: 80px 0px -228px -175px;} とまぁ、これはさっき言いましたね。 それではHTMLいってみます↓
退会済みユーザー

退会済みユーザー

2016/10/11 05:51

</div><!-- .entry-metaここまで --> </header><!-- .entry-headerここまで --> <div class="entry-content"> <div class="both"> <a target="_blank" href="http://example.com/" class="btn02"><span>イヌを<br />よろしく</span></a> </div> <p style="text-align: center;"><img class="alignnone wp-image-2001" src="http://example.com/wp-content/uploads/2016/10/neko.jpg" alt="wagahai" width="600" height="450" /></p> <p style="text-align: center;">記事本文<br /> 記事本文</p> <!-- この下は昨夜伺ったカスタムフィールドの呼び出しです --> <div class="konotabino-wrap">
退会済みユーザー

退会済みユーザー

2016/10/11 05:54

ボタン1つのときは↑の感じで出力されます。 2つなら <a target="_blank" href="http://example.com/" class="btn01"><span>イヌを<br />よろしく</span></a> が1列増えるだけです。
退会済みユーザー

退会済みユーザー

2016/10/11 05:54

そして素人の件はたしかに。笑 家庭教師やってるときに困る質問ですね。 「どこがわからないかわからない」っていう。笑
kei344

2016/10/11 06:01

コードはコメント欄にではなく質問文に追記してください。(コメントだと他の方が見る可能性が減ると思っていいと思います) また、CSSもHTMLの構造に関わるところは端折らずに書きましょう。
退会済みユーザー

退会済みユーザー

2016/10/11 06:41

CSSそうですよね。端折ったせいで、IShikawanさんのようなに「目的はしてるけど、私のCSSには合わない」というご回答を頂戴したんですものね。失礼いたしました。(>_<)
think49

2016/10/11 06:50

kei344さんも指摘されていますが、HTMLの構造に関わるところは端折らずに書きましょう。 質問文に出てきたHTML/CSSをつなぎ合わせても再現できません。再現性は重要なので出した情報だけで再現できることを確認してみてください。 https://jsfiddle.net/xpfy8pdr/
退会済みユーザー

退会済みユーザー

2016/10/11 07:54

think49さん ご指摘ありがとうとうございます。 こちらがケイさんにご教示いただいた形(bothでくるむやつ)の表示です。 https://jsfiddle.net/xpfy8pdr/3/ ※marginは高さ-15として、ネコの画像がbtn02にぴったり重なる位置にしました。 さて、btn02だけにするとどうなるかというとこうなってしまいます。 https://jsfiddle.net/xpfy8pdr/4/ つまり、ネコの位置が高くなってしまうのです。 質問に書いた目的は、「ネコの位置を、ボタンが1つのときでも2つのときでも、同じ位置に保ちたい」ということなのです。 p.s. うわわわわわ!このサイトめっちゃくちゃ便利じゃないですか! 以前ケイさんに開発ツール「F12」を教えて頂きましたが、それに匹敵しますねこれは!!!やばすぎる!!
think49

2016/10/11 09:48

To: matsuzakaq さん .both { height: 300px; } を書き足すだけでいいんじゃないでしょうか。 https://jsfiddle.net/xpfy8pdr/5/ 本題とは関係ありませんが、一つ。 画面端に [ネコをよろしく] ボタンを持っていくためにネガティブマージンでデフォルトスタイルシートで設定されている body の margin or padding を相殺していますが、調整確認したブラウザ以外で崩れるのでやめた方が良いです。 本来は html, body { margin: 0; padding: 0; } で上書きすれば済む問題であり、このCSSに html, body { margin: 0; padding: 0; } を適用するとレイアウトが崩れます。 https://jsfiddle.net/xpfy8pdr/6/
退会済みユーザー

退会済みユーザー

2016/10/11 13:28

think49さん >書き足すだけ わ、ほんとですね。笑 ありがとうございます。一日悩んでましたわ。 >body の margin or padding を相殺しています うーん。どこのことだろう…探したけどわかりませんでした。 しかしよくお分かりになりましたね! とりあえず、ボタンの件は誠にありがとうございます!たすかりました! p.s. パワーポイントで見やすく、と思っておりましたが、教えていただいだサイトの方が断然いいですね!ほんとすごく便利!これから使わせて頂きます。 ; keyさん そうか、bothでの位置指定とは、heightも含めてのことだったのですねきっと。 marginだけbothに指定してましたわ。 今回もありがとうございます! …やはり、ネコは悪くなかったです。笑
kei344

2016/10/11 17:10

To: think49さん 補足&解決ありがとうございます! To: matsuzakaqさん まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。 あと、ハンドルネームを略したり他の名前にするのはやめていただけませんか?よろしくお願いします。
退会済みユーザー

退会済みユーザー

2016/10/11 22:31

kei344さん おはようございます。受付中の件、ご不快に感じさせたことはすみません。ただこのタイミングは「各々のユーザーが考える他ユーザーへの配慮によってご自由に」ってスタンスがよろしいんじゃないかなって信じてますので、ちょっと待ってくださいね(^◇^) お名前の件は、誠に申し訳ございません。これからは絶対に変えたりしませんm(__)m
退会済みユーザー

退会済みユーザー

2016/10/11 22:47

いまベストアンサー選びました!
kei344

2016/10/12 02:00

To: matsuzakaqさん > 受付中の件、ご不快に感じさせたことはすみません。 不快と言う話ではなく、単純に解決済にされることを忘れる方がいらっしゃるので、指摘するようにしています。自分が検索などでこのページにきたときに、「解決したのかしていないのかの情報が読まないとわからない」という状況は避けたいという私のエゴでありスタンスです。
退会済みユーザー

退会済みユーザー

2016/10/12 03:12

To: kei344さん わかりますわかります。そのご配慮も大事ですもんね☆
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問