質問編集履歴
1
フレックスボックスを使って再度やってみました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -347,3 +347,321 @@
|
|
347
347
|
|
348
348
|
|
349
349
|
```
|
350
|
+
|
351
|
+
|
352
|
+
|
353
|
+
|
354
|
+
|
355
|
+
フレックスにて改めてやってみました。
|
356
|
+
|
357
|
+
```ここに言語を入力
|
358
|
+
|
359
|
+
<div id="main">
|
360
|
+
|
361
|
+
<div id="content">
|
362
|
+
|
363
|
+
<p><font size="3">東京ビートルズオフィシャルストアへようこそ。公式グッズ、CD、リマスター盤、ポスタ<br>ーの販売サイト</font></p>
|
364
|
+
|
365
|
+
</div>
|
366
|
+
|
367
|
+
<h2>Beatle News</h2>
|
368
|
+
|
369
|
+
<?php query_posts ('showposts=2&cat=2');
|
370
|
+
|
371
|
+
while(have_posts()):the_post(); ?>
|
372
|
+
|
373
|
+
|
374
|
+
|
375
|
+
<div id="section">
|
376
|
+
|
377
|
+
<div id="thumb">
|
378
|
+
|
379
|
+
<?php the_post_thumbnail(); ?>
|
380
|
+
|
381
|
+
</div>
|
382
|
+
|
383
|
+
|
384
|
+
|
385
|
+
<div id="desc">
|
386
|
+
|
387
|
+
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
|
388
|
+
|
389
|
+
<?php the_excerpt(); ?>
|
390
|
+
|
391
|
+
</div>
|
392
|
+
|
393
|
+
<?php endwhile; ?>
|
394
|
+
|
395
|
+
</div>
|
396
|
+
|
397
|
+
</div>
|
398
|
+
|
399
|
+
|
400
|
+
|
401
|
+
<div id="right">
|
402
|
+
|
403
|
+
<h2>Live Schedule</h2>
|
404
|
+
|
405
|
+
<div id="right-main">
|
406
|
+
|
407
|
+
<ul>
|
408
|
+
|
409
|
+
<li><a href="a">7月20日東京 武道館</a></li>
|
410
|
+
|
411
|
+
<p>A席: 9800円 B席: 7000円</p>
|
412
|
+
|
413
|
+
<li><a href="a">7月24日横浜アリーナ</a></li>
|
414
|
+
|
415
|
+
<p>A席: 9800円 B席: 7000円</p>
|
416
|
+
|
417
|
+
<li><a href="a">7月30日幕張ロッテスタジアム</a></li>
|
418
|
+
|
419
|
+
<p>A席: 9800円 B席: 7000円</p>
|
420
|
+
|
421
|
+
</ul>
|
422
|
+
|
423
|
+
</div>
|
424
|
+
|
425
|
+
<div>
|
426
|
+
|
427
|
+
</div>
|
428
|
+
|
429
|
+
```
|
430
|
+
|
431
|
+
|
432
|
+
|
433
|
+
```ここに言語を入力
|
434
|
+
|
435
|
+
body{
|
436
|
+
|
437
|
+
margin: 0;
|
438
|
+
|
439
|
+
background-image: url("images/bg.jpg");
|
440
|
+
|
441
|
+
font-size: 12px;
|
442
|
+
|
443
|
+
}
|
444
|
+
|
445
|
+
|
446
|
+
|
447
|
+
#wrapper{
|
448
|
+
|
449
|
+
background: white;
|
450
|
+
|
451
|
+
width: 1000px;
|
452
|
+
|
453
|
+
margin: 0 auto;
|
454
|
+
|
455
|
+
height: 1050px;
|
456
|
+
|
457
|
+
}
|
458
|
+
|
459
|
+
|
460
|
+
|
461
|
+
h1 {
|
462
|
+
|
463
|
+
padding-left: 20px;
|
464
|
+
|
465
|
+
font-size: 30px;
|
466
|
+
|
467
|
+
}
|
468
|
+
|
469
|
+
|
470
|
+
|
471
|
+
#photo {
|
472
|
+
|
473
|
+
text-align: center;
|
474
|
+
|
475
|
+
}
|
476
|
+
|
477
|
+
|
478
|
+
|
479
|
+
#content p {
|
480
|
+
|
481
|
+
padding-left: 20px;
|
482
|
+
|
483
|
+
}
|
484
|
+
|
485
|
+
|
486
|
+
|
487
|
+
#header{
|
488
|
+
|
489
|
+
clear: both;
|
490
|
+
|
491
|
+
padding-top: 5px;
|
492
|
+
|
493
|
+
margin: 0 auto;
|
494
|
+
|
495
|
+
}
|
496
|
+
|
497
|
+
|
498
|
+
|
499
|
+
#header ul{
|
500
|
+
|
501
|
+
overflow: hidden;
|
502
|
+
|
503
|
+
padding-left: 5px;
|
504
|
+
|
505
|
+
margin: 0 auto;
|
506
|
+
|
507
|
+
}
|
508
|
+
|
509
|
+
|
510
|
+
|
511
|
+
#header li{
|
512
|
+
|
513
|
+
list-style: none;
|
514
|
+
|
515
|
+
font-size: 20px;
|
516
|
+
|
517
|
+
padding-bottom: 10px;
|
518
|
+
|
519
|
+
margin-left: 20px;
|
520
|
+
|
521
|
+
float: left;
|
522
|
+
|
523
|
+
font-weight:bold;
|
524
|
+
|
525
|
+
}
|
526
|
+
|
527
|
+
|
528
|
+
|
529
|
+
#top{
|
530
|
+
|
531
|
+
margin-left: 20px;
|
532
|
+
|
533
|
+
}
|
534
|
+
|
535
|
+
|
536
|
+
|
537
|
+
h2{
|
538
|
+
|
539
|
+
font-size: 25px;
|
540
|
+
|
541
|
+
margin-left: 20px;
|
542
|
+
|
543
|
+
margin-top: 0;
|
544
|
+
|
545
|
+
}
|
546
|
+
|
547
|
+
|
548
|
+
|
549
|
+
#top-jpg{
|
550
|
+
|
551
|
+
width: 960px;
|
552
|
+
|
553
|
+
height: 250px;
|
554
|
+
|
555
|
+
margin-bottom: 0;
|
556
|
+
|
557
|
+
padding-bottom: 0;
|
558
|
+
|
559
|
+
}
|
560
|
+
|
561
|
+
|
562
|
+
|
563
|
+
#desctiption p {
|
564
|
+
|
565
|
+
padding-left: 20px;
|
566
|
+
|
567
|
+
margin-top: 0;
|
568
|
+
|
569
|
+
}
|
570
|
+
|
571
|
+
|
572
|
+
|
573
|
+
#right-main h2{
|
574
|
+
|
575
|
+
border-bottom: 1px solid gray;
|
576
|
+
|
577
|
+
}
|
578
|
+
|
579
|
+
|
580
|
+
|
581
|
+
#right-main ul{
|
582
|
+
|
583
|
+
list-style: none;
|
584
|
+
|
585
|
+
}
|
586
|
+
|
587
|
+
|
588
|
+
|
589
|
+
#right-main li{
|
590
|
+
|
591
|
+
font-size: 19px;
|
592
|
+
|
593
|
+
font-weight: 800;
|
594
|
+
|
595
|
+
}
|
596
|
+
|
597
|
+
|
598
|
+
|
599
|
+
#right-main p{
|
600
|
+
|
601
|
+
font-size: 15px;
|
602
|
+
|
603
|
+
}
|
604
|
+
|
605
|
+
|
606
|
+
|
607
|
+
#footer{
|
608
|
+
|
609
|
+
clear: both;
|
610
|
+
|
611
|
+
}
|
612
|
+
|
613
|
+
|
614
|
+
|
615
|
+
#footer-wrapper{
|
616
|
+
|
617
|
+
background: #DBDBDB;
|
618
|
+
|
619
|
+
width: 900px;
|
620
|
+
|
621
|
+
height: 120px;
|
622
|
+
|
623
|
+
margin-left: 50px
|
624
|
+
|
625
|
+
}
|
626
|
+
|
627
|
+
|
628
|
+
|
629
|
+
#footer p{
|
630
|
+
|
631
|
+
padding-top: 60px;
|
632
|
+
|
633
|
+
text-align: center;
|
634
|
+
|
635
|
+
font-size: 15px;
|
636
|
+
|
637
|
+
}
|
638
|
+
|
639
|
+
|
640
|
+
|
641
|
+
#section {
|
642
|
+
|
643
|
+
display: flex;
|
644
|
+
|
645
|
+
}
|
646
|
+
|
647
|
+
|
648
|
+
|
649
|
+
#desc {
|
650
|
+
|
651
|
+
width: 300px;
|
652
|
+
|
653
|
+
}
|
654
|
+
|
655
|
+
|
656
|
+
|
657
|
+
```
|
658
|
+
|
659
|
+
|
660
|
+
|
661
|
+
としてみたのですが、希望通りになりません。
|
662
|
+
|
663
|
+
現在の表記状況は下記の状態なのですが、どうしたら
|
664
|
+
|
665
|
+
「ビートルズがやってきたヤァヤァヤァ!」の記事部分を2段にできるでしょうか?
|
666
|
+
|
667
|
+
アドバイスいただければ幸いです。
|