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

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

ただいまの
回答率

89.13%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,459
退会済みユーザー

退会済みユーザー

□補足

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

■前提

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

■目的

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

■質問

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

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

<a href=“http://example.com/” class=“btn01”><span>ネコを<br>よろしく</span></a>
btn01{margin: 30px 0px -210px -148px;}

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

<a href=“http://example.com/” class=“btn02”><span>イヌも<br>よろしく</span></a>
btn01{margin: 200px 0px -380px -148px;}


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

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

□補足

CSS全文は下記のとおりです。

.btn01 {
    color: #fff;
    text-decoration: none;
    text-align: center;
    position: relative;
    z-index: 10;
    display: block;
    width: 150px;
    height: 150px;
    margin: 30px 0px -210px -148px;
}
.btn01 span {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 120%;
}
.btn01::before {
    content: '';
    background-color: #dda284;
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    z-index: -1;
    border-radius: 50%;
    box-shadow:
        0 0 0 0 #fff,
        0 0 0 0 #dda284;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}
.btn01:hover::before {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    box-shadow:
        0 0 0 25px #fff,
        0 0 0 27px #dda284;
}
.btn01:hover{
    color: #FFF;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/10/11 04:45

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/10/11 04:53

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

    キャンセル

回答 3

+1

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

<html lang="ja">
    <head>
    <meta charset="UTF-8">
    <style type="text/css">
        a{
            text-decoration: none;
            color: #fff;
        }
        .btn01,
        .btn02{
            display: block;
            width: 150px;
            height: 100px;
            padding: 25px 0;
            border-radius: 50%;
            text-align: center;
            font-size: 28px;
            margin: 150px 0 0 150px;
        }
        .btn01{
            background-color: #ff0000;
        }
        .btn02{
            background-color: #0037ff;
        }
    </style>
    </head>
    <body>
        <a href="http://example.com/" class="btn01"><span>ネコを<br>よろしく</span></a>
        <a href="http://example.com/" class="btn02"><span>イヌを<br>よろしく</span></a>
    </body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/11 07:20

    目的の形にはなりましたね!
    .btn01,
    .btn02
    という風にカンマで区切れば、「上の(btn01)がなかったら下の(btn02)を表示して」という指示になるのですね!ありがとうございます。

    しかし…
    私のCSSのボタンには適用されませんでした。

    全部の

    .btn01とか

    .btn01 spanとか

    を、

    .btn01,
    .btn02とか

    .btn01 span,
    .btn02 spanとか

    に変えたのですが…なぞです。。

    キャンセル

  • 2016/10/11 07:30

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

    キャンセル

  • 2016/10/11 15:43

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

    キャンセル

+1

[再回答]

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

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

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

<html lang="ja">
    <head>
    <meta charset="UTF-8">
    <style type="text/css">
    a{
        text-decoration: none;
        color: #fff;
    }

    #wrap{
        width: 740px;
        margin: 0 auto;
        overflow: hidden;
    }
    #left,
    #right{
        padding: 50px 20px 20px;
        min-height: 100%;
    }
    #left{
        float: left;
        width: 260px;
        background-color: #ccc;
    }
    #right{
        float: right;
        width: 400px;
        background-color: #ddd;
    }


    .btn01,
    .btn02 {
        color: #fff;
        text-decoration: none;
        text-align: center;
        position: relative;
        z-index: 10;
        display: block;
        width: 150px;
        height: 150px;
        margin: 80px auto;
    }
    .btn01 span,
    .btn02 span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 120%;
    }
    .btn01::before,
    .btn02::before {
        content: '';
        background-color: #dda284;
        display: block;
        position: absolute;
        width: 150px;
        height: 150px;
        z-index: -1;
        border-radius: 50%;
        box-shadow:
        0 0 0 0 #fff,
        0 0 0 0 #dda284;
        transition: all .2s ease;
        -webkit-transition: all .2s ease;
    }
    .btn01:hover::before,
    .btn02:hover::before {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        box-shadow:
        0 0 0 25px #fff,
        0 0 0 27px #dda284;
    }
    .btn01:hover,
    .btn02:hover{
    color: #FFF;
    }

    #right .img{
        width: 280px;
        padding: 100px 0;
        background-color: #fff;
        text-align: center;
    }
    #right .date{
        display: block;
        font-size: 12px;
        padding: 3px 0;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="left">
            <a href="http://example.com/" class="btn01"><span>ネコを<br>よろしく</span></a>
            <a href="http://example.com/" class="btn02"><span>イヌを<br>よろしく</span></a>
        </div>

        <div id="right">
            <span class="date">date 00000/00/00</span>
            <div class="img">CAT</div>
            <p>TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT TXT</p>
        </div>
    </div>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/12 07:44

    おはようございます!

    >各HTML要素の挙動がつかめていないのが原因なのでは~~~
    まったく仰るとりです!笑

    >ボタンのエリアを左に作り、ネコのエリアを右に作り、その中にボタンを配置したりテキストを配置するというような感じで外枠から作り直していく方が早い
    なるほど、その方が私が聞いてもきれいに感じますね。いまは無理矢理感丸出しですものね。

    >ブラウザや端末によって多少挙動が変わったりするので、その対応で追われる必要
    まさに!無理矢理やっていたせいで、各CSSの関係がめちゃくくちゃになっている状態です。ちょうと今、ブラウザによって表示か違っちゃっています…

    >できる限りシンプルに、HTML要素がもっている挙動を考えながら組んでいく
    leftとrightとは!!!ははぁ!こうして分けるとすごい見やすいですね!へぇ~!!動きもさっき起きてやってみたら、うまくいきました!すごい!勉強になりました。ありがとうございます。

    ただ、今回はとりあえず無理矢理な状態のままやってとりあえず私の質問は完全に解決したので、先着順ということで別の方にベストアンサーとさせて頂きます。

    ご返信遅くなってしまって申し訳ございませんでした。

    キャンセル

  • 2016/10/12 07:47

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

    キャンセル

checkベストアンサー

0

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

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

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

$html = <<<EOD
    <a href="http://example.com/" class="btn01"><span>ネコを<br>よろしく</span></a>
    <a href="http://example.com/" class="btn02"><span>イヌを<br>よろしく</span></a>
 吾輩は猫である。名前はまだ無い。
 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
EOD;

if ( ( strpos( $html, ' class="btn01"' ) !== false ) && ( strpos( $html, ' class="btn02"' ) !== false ) ) {
    $html = '<div class="both">'.$html.'</div>';
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/12 07:47

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

    キャンセル

  • 2016/10/12 11:00

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

    キャンセル

  • 2016/10/12 12:12

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

    キャンセル

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

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • ボタン01と02があるときは並べて表示し、02しかないときは01の場所に02を表示させたい。