TOPページデザイン

トップページのデザインをカスタマイズしました。
1つ質問です。
「私たちについて」と「りんごの教訓」を横並びにしました。
sectionで囲んでフロートしました。
PCで見ると問題ありませんが、iphoneだと横幅が細すぎて
よくありません。
横幅の指定に問題があると思うのですが、どうしたら
よいでしょうか?

よろしくお願いします。

カテゴリー: テーマ, 運営 | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

TOPページデザイン」への10件のフィードバック

  1. タカハシ先生タカハシ先生

    幅とfloatを指定して横並びにする、という指示を、
    一定の幅のある場合にのみ、適用されるようなmedia queryの中にだけ、指定しましょう。

    返信
    1. 真中のぶ真中のぶ 投稿作成者

      タカハシ先生。

      やってみました。実はmedia queryって使った事ありません。なんとなく
      雰囲気で指定してみましたが、これで大丈夫なのかな?
      一応、iphoneでは幅の問題は解消されいい感じで見れました。

      @media screen and (max-width:960px) {
      #wrap {width:100%;}
      }
      @media screen and (max-width:500px) {
      #kyoukun {float:none; width:95%;margin-left:0;}
      }
      @media screen and (max-width:500px) {
      #about_ringo{float:none; width:100%;margin-left:0;}
      }
      上記の3つをstyle.cssに追加しました。

      ————————————————————
      そこで、新たに質問です。
      この様にコメントを入れる時にはクレヨン・シンタックスハイライト(でしたっけ?)
      は使えないのですか?
      使えると見やすいかなと思いまして~。

      返信
      1. タカハシ先生タカハシ先生

        media queryは2012.12.15の勉強会でやりましたよ。
        きしりんごさんがサイボウズLiveから移植してくれているので、復習しておきましょう。

        >この様にコメントを入れる時にはクレヨン・シンタックスハイライト(でしたっけ?)は使えないのですか?
        デフォルトの機能では使えませんねえ。コメント機能でコーディングのディスカッションを重ねるのを、読み易くする方法を考えないといけませんね。
        とりあえずの代替え案としては、コメントを受けた投稿者が、本文に「201x.xx.xx追記」として、コードを書き加えるのも有りだと思います。

        返信
      2. タカハシ先生タカハシ先生

        Twenty Twelveのmedia queryのブレイクポイントは600pxなので、
        それにあわせた上で、意図した感じになるようにstyle.cssを編集しました。
        私の書いた指定は以下の通り。

        /* by takahasi */
        #about_ringo,#kyoukun {
        padding:1em;
        }
        #kyoukun {
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 1px 3px rgb(102, 102, 102);
        margin: 1em;
        padding: 0.5em 1em;
        }
        @media screen and (min-width:600px) {
        #about_ringo,#kyoukun {
        width:44%;
        float:left;
        margin:2%;
        padding:1%;
        }
        .home .entry-content > p {
        clear:left;
        }
        }

        返信
        1. 真中のぶ真中のぶ 投稿作成者

          ありがとうございます。
          すっきりしましたね。
          まだまだ僕は無駄が多い。
          横幅600px以下になったらメディアクエリが適応するように
          したんですね。

          質問1
          600px以上だとフロート指定がないのに横並びに
          なってるのは、なぜでしょうか?

          質問2
          .home .entry-content > p {
          clear:left;
          について本日の勉強会で教えて下さい。

          返信
          1. 真中のぶ真中のぶ 投稿作成者

            質問1について

            @media screen and (min-width:600px)
            @media screen and (max-width:600px)

            を勘違いしていました。
            @media screen and (min-width:600px)
            で、納得!
            minとmax
            見間違わない様に!

  2. 真中のぶ真中のぶ 投稿作成者

    >media queryは2012.12.15の勉強会でやりましたよ。
    そうなんですよねー!でも僕はその日、ナラちゃん事があって授業始まる前に
    帰っちゃったんですよ。

    返信
  3. タカハシ先生タカハシ先生

    iPhoneなど、小さい画面で表示する際には不要なので、ページのTOPへ戻る為のプラグイン「Cudazi Scroll to Top」は一旦、停止しました。
    footer.phpにaタグを書いて、position:fixedにすれば良いのではないだろうか?
    で、media queryで、広いディスプレイの時だけdisplay:block;にし、狭いときはdisplay:none;
    「スルスルとページTOPに戻る」のがプラグインを使ってまで実装必要とは思えないのだが、いかがかしら?

    返信
  4. ピンバック: 2013-3-15勉強会 | パソコン倶楽部りんご

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.