トップページのデザインをカスタマイズしました。
１つ質問です。
「私たちについて」と「りんごの教訓」を横並びにしました。
sectionで囲んでフロートしました。
PCで見ると問題ありませんが、iphoneだと横幅が細すぎて
よくありません。
横幅の指定に問題があると思うのですが、どうしたら
よいでしょうか？
よろしくお願いします。
パソコン倶楽部りんご
Webデザイン脱初心者の勉強会
トップページのデザインをカスタマイズしました。
１つ質問です。
「私たちについて」と「りんごの教訓」を横並びにしました。
sectionで囲んでフロートしました。
PCで見ると問題ありませんが、iphoneだと横幅が細すぎて
よくありません。
横幅の指定に問題があると思うのですが、どうしたら
よいでしょうか？
よろしくお願いします。
幅とfloatを指定して横並びにする、という指示を、
一定の幅のある場合にのみ、適用されるようなmedia queryの中にだけ、指定しましょう。
タカハシ先生。
やってみました。実は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;}
}
上記の３つをstyle.cssに追加しました。
————————————————————
そこで、新たに質問です。
この様にコメントを入れる時にはクレヨン・シンタックスハイライト（でしたっけ？）
は使えないのですか？
使えると見やすいかなと思いまして～。
media queryは2012.12.15の勉強会でやりましたよ。
きしりんごさんがサイボウズLiveから移植してくれているので、復習しておきましょう。
>この様にコメントを入れる時にはクレヨン・シンタックスハイライト（でしたっけ？）は使えないのですか？
デフォルトの機能では使えませんねえ。コメント機能でコーディングのディスカッションを重ねるのを、読み易くする方法を考えないといけませんね。
とりあえずの代替え案としては、コメントを受けた投稿者が、本文に「201x.xx.xx追記」として、コードを書き加えるのも有りだと思います。
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;
}
}
ありがとうございます。
すっきりしましたね。
まだまだ僕は無駄が多い。
横幅６００px以下になったらメディアクエリが適応するように
したんですね。
質問1
600px以上だとフロート指定がないのに横並びに
なってるのは、なぜでしょうか？
質問２
.home .entry-content > p {
clear:left;
について本日の勉強会で教えて下さい。
質問１について
@media screen and (min-width:600px)
@media screen and (max-width:600px)
を勘違いしていました。
@media screen and (min-width:600px)
で、納得！
minとmax
見間違わない様に！
＞media queryは2012.12.15の勉強会でやりましたよ。
そうなんですよねー！でも僕はその日、ナラちゃん事があって授業始まる前に
帰っちゃったんですよ。
ならば尚の事、2012.12.15の勉強会を読んで復習しておきましょう。疑問点はきしりんごさんに質問するということで。
iPhoneなど、小さい画面で表示する際には不要なので、ページのTOPへ戻る為のプラグイン「Cudazi Scroll to Top」は一旦、停止しました。
footer.phpにaタグを書いて、position:fixedにすれば良いのではないだろうか？
で、media queryで、広いディスプレイの時だけdisplay:block;にし、狭いときはdisplay:none;
「スルスルとページTOPに戻る」のがプラグインを使ってまで実装必要とは思えないのだが、いかがかしら？
ピンバック: 2013-3-15勉強会 | パソコン倶楽部りんご