練習
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>練習用フォーム</title> <style> table{ border-collapse: collapse;} </style> </head> <body> <h1>入力画面</h1> <p>必要事項を入力して「確認する」 ボタンをクリックしてください。</p> <!--formタグ--> <form action="check.php" method="post"> <table border="1" width="400"> <tr> <td>お名前</td> <!--テキストボックス--> <td><input type="text" name="name" size="30"></td> </tr> <tr> <td>メールアドレス </td> <td><input type="text" name="email" size="30"></td> </tr> <tr> <td>メッセージ</td> <td> <!--テキストエリア--> <textarea rows="5" cols="40" name="message"></textarea></td> </tr> <tr> <td colspan="2"> <!--送信ボタン--> <input type="submit" name="sub1" value="確認する"> </td> </tr> </table> </form> </body> </html> 練習PHP
■
ここに乗せるのは初めてですが、大幅に更新しました。
練習
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>スカエナ</title> <meta name="viewport" content="width=device-width"> <meta name="format-detection" content="telephone=no"> <link rel="apple-touch-icon" href="chapter5/apple-touch-icon.png"> <link rel="stylesheet" href="chapter5/css/iphone.css"> </head> <body> <header class="global-header"><img src="chapter5/img/logo.png" alt="scaena (スカエナ) " class="logo" /> <p class="introduction">大切な舞台公演を<br /> 華やかに彩るお花を<br /> お届けします。</p> <div class="header-bar"> <h1>舞台公演のお祝い花・楽屋花専門店 scaena</h1> </div> </header> <nav class="news"> <ul class="anim-ticker"> <li><a href="mothers-day.html">【母の日】プレゼントオーダー承っています</a></li> <li><a href="free-carriage.html">送料無料】10,000円以上お買い上げで送料無料</a></li> <li><a href="ordermade.html">【お祝い】各種イベント用のオーダー承っています</a></li> </ul> </nav> <section class="recommend block"> <h2 class="section-headeing">おすすめ商品</h2> <ul> <li class="anim-flip-front"> <a href="chapter5/joukei.html"> <dl> <dt><img src="chapter5/img/pic_joukei_thumbnail.jpg" class="product-image" alt="運命の王子をじっと待ち、森の湖にたたずむ、白鳥の姿のオデット姫のイメージ"></dt> <dd>バレエ・白鳥の湖より</dd> <dd>5,500円</dd> </dl> </a> </li> <li class="anim-flip-back"> <a href="toeshoes.html"> <dl class="produc-image-recommend"> <dt><img src="chapter5/img/pic_toeshoes_thumbnail.jpg" class="prouct-image" alt="バレリーナへのギフトに良い、トウシューズ入りの華やかなアレンジ"></dt> <dd>バレエ向け「トゥシューズ」</dd> <dd>7,800円</dd> </dl> </a> </li> </ul> </section> <nav class="nav-category"> <h2 class="section-heading">商品カテゴリ</h2> <ul> <li class="nav-category-ballet"><a href="ballet.html">バレエ</a></li> <li class="nav-category-flamenco"><a href="flamenco.html">フラメンコ</a></li> <li class="nav-category-huladance"><a href="huladance.html">フラダンス</a></li> </ul> </nav> <section class="comment block"> <h2 class="section-heading">ショップコンセプト</h2> <p>舞台に立たれる方は、その公演のために長く厳しい練習を重ねます。 演じる役柄は、まるで自分自身そのものであるように感じていることでしょう。</p> <p><まさに晴れの日である公演当日。 たくさんの方からお祝いのお花が届きます。/p> <p>お花にこめられている想いはそれぞれ。 晴れて公演を迎えることへの祝福、日頃の感謝、舞台の成功を祈って。 観に行けない自分にかわってお祝いの気持ちを伝えたいという方も</p> <p>そんな想いのこもったお花が、まさにその公演を イメージしたものであったら、どんなに心に響くことでしょう。</p> <p><em>ショップ名<b>scaena（スカエナ)</b><b>「舞台」</b>を意味します。</em></p> <p>ダンサーとして、制作スタッフとして、舞台公演に携わってきた経験を活かし、 想いを伝えるお手伝いができればと思っています。</p> </section> <footer class="global-footer"> <nav class="nav-about"> <ul> <li><a href="fag.html">よくある質問</a></li> <li><a href="contact.html">お問い合わせ</li> <li><a href="company.html">会社概要</li> <li><a href="law.html">特定商取引法</a></li> <li><a href="policy.html">プライバシーポリシー</a></li> </ul> </nav> <p class="copyright"><small>copyright©2010Scaena</small></p> </footer> <script type="text/javascript" src="js/iphone.js"></script> </div> </body> </html> スマートフォンの練習です
練習
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>topページ</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> <style> .ui-content .h1{ color: #5E87B0; font-size: 18px; text-shadow: 1px 0 0 #fff; } </style> </head> <body> <div data-role="page" id="index" data-theme="c"> <div data-role="header" data-theme="b"> <h1>topページ</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">メニュー</li> <li><a href="#about"><h3>このサイトについて</h3></a></li> <li><a href="#about"><h3>セミナ情報</h3></a></li> <li><a href="#about"><h3>アクセス</h3></a></li> <li><a href="#about"><h3>お問い合わせ</h3></a></li> </ul> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 smartphone</h4> </div> </div> <div data-role="page" id="about" data-theme="c" data-add-back-btn="true"> <div data-role="header" data-theme="b"> <h1>このサイトについて</h1> </div> <div data-role="content"> <h2>このサイトについて</h2> <p>池袋でwebデザインの勉強の記録</p> <p>Webデザイン、PHPやJAVASCRIPTの勉強を行っています。</p> <h2 class="h1">このサイトについて</h2> <p>池袋でWEBデザインの勉強の記録</p> <p>WEBデザイン、PHPやJAVASCRIPTの勉強を行ってます。</p> <h2 class="h1">フェリカテクニカルアカデミーについて</h2> <p>建築の専門学校が母体</p> <p>WEBサイト運営も多数行っています。</p> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 smartphone</h4> </div> </div> <div data-role="page" id="access" data-theme="c" data-add-back-btn= "true"> <div data-role="header" data-theme="b"> <h1>お問い合わせ</h1> </div> <div data-role="content"> お問い合わせ </div> <div data-role="footer" data-theme="b"> <h4>© 2012 smartphone</h4> </div> </div> </body> </html> スマートフォンの練習です。
■
練習スライド
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>jquery easyslider</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript" src="js/easySlider1.7.js"></script> <script type="text/javascript"> $(function(){ $("#slider").easySlider({ controlsShow:false, speed:1200, auto:true, continuous:true }); }); </script> <style type="text/css"> <!-- #slider ul{ list-style-type:none; margin:0; padding:0; } #slider li{ width:300px; height:300px; } --> </style> </head> <body> <a href="http://cssglobe.com/post/5780 /easy-slider-17-numeric- navigation-jquery-slider">easy slider 1.7-numeric navigation jquery slider</a> <div id="slider"> <ul> <li><img src="images/01.jpg" width="300" height="300" alt=""></li> <li><img src="images/02.jpg" width="300" height="300" alt=""></li> <li><img src="images/03.jpg" width="300" height="300" alt=""></li> <li><img src="images/04.jpg" width="300" height="300" alt=""></li> </ul> </body> </html> その２ <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <style type="text/css"> <!-- /*表示修飾*/ * { font-family: Verdana, Geneva, sans-serif; margin:0; padding: 0; } body { margin: 0; text-shadow:1px 1px 2px #f0f0f0; } h1 { font-size: 28px; margin: 15px 0 0 0; } .nav { background: #000; padding: 5px 5px 5px 300px; } .nav li { display: inline-block; } .nav li, .nav li a { color: #fff; } .content { margin: 0 0 0 30px; } .black { background: #000; color: #fff; } .content ul { width: 400px; margin: 0 0 0 30px; } .content li { margin: 0 0 0.6em 0; } /*ページ設定*/ body{ width: 6400px; /* =ページ幅×ページ数 */ position:absolute; top:0px; left:0px; bottom:0px; } .page { margin:0px; bottom:0px; width: 1600px; /* =ページ幅 */ float: left; height: 100%; } --> </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript"> $(function() { function scrollTo(to) { $('html, body') .stop() .animate({ scrollLeft: $(to).offset().left }, 500, 'linear'); } $('.pager').bind('click',function(ev){ scrollTo($(this).attr('href')); }); $('html').mousewheel(function(ev, mov) { if ($('html, body').is(':animated')) { return false; } var page = document.location.hash || '#page1'; var target = null; if (mov > 0) { target = $(page).prev('.page').attr('id'); } else if (mov < 0) { target = $(page).next('.page').attr('id'); } if (target) { scrollTo('#'+target); document.location.hash = '#'+target; } ev.preventDefault(); // 縦スクロールはさせない }); }); </script> </head> <body> <div id="container"> <!-- 1ページ目 --> <div class="page" id="page1"> <ul class="nav"> <li>Page1</li> <li><a href="#page2" class="pager">Page2</a></li> <li><a href="#page3" class="pager">Page3</a></li> <li><a href="#page4" class="pager">Page4</a></li> </ul> <div class="content"> <h1>Page1</h1> </div> </div> <!-- 2ページ目 --> <div class="page" id="page2"> <ul class="nav"> <li><a href="#page1" class="pager">Page1</a></li> <li>Page2</li> <li><a href="#page3" class="pager">Page3</a></li> <li><a href="#page4" class="pager">Page4</a></li> </ul> <div class="content"> <h1>Page2</h1> </div> </div> <!-- 3ページ目 --> <div class="page" id="page3"> <ul class="nav"> <li><a href="#page1" class="pager">Page1</a></li> <li><a href="#page2" class="pager">Page2</a></li> <li>Page3</li> <li><a href="#page4" class="pager">Page4</a></li> </ul> <div class="content"> <h1>Page3</h1> </div> </div> <!-- 4ページ目 --> <div class="page" id="page4"> <ul class="nav"> <li><a href="#page1" class="pager">Page1</a></li> <li><a href="#page2" class="pager">Page2</a></li> <li><a href="#page3" class="pager">Page3</a></li> <li>Page4</li> </ul> <div class="content"> <h1>Page4</h1> </div> </div> </div> <!-- /#container --> </body> </html> （感想） ほぼ出来たものをコピーしただけですが すごく時間がかかりました。
■
練習
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS11</title> <style type="text/css"> *{ margin:0; padding:0; list-style-type:none; } body{ background-image:url(images/bg.gif); background-repeat:repeat; } #container{ width:715px; height:440px; margin: 0 auto; background-color:#000000; } #header{ width:715px; height:279px; background-image:url(images/mainImage.jpg); background-repeat:no-repeat; } #content{ width:215px; height:130px; float:right; } #sidbar{ margin-left:15px; width:500px; height:130px; } #footer{ width:715px; height:21px; } h1{ width:715px; height:39px; background-color:#000; } h2{ width:377px; height:57px; } ul{ } li{ width:193px; height:30px; } address{ margin-left:415px; } </style> </head> <body> <div id="container"> <div id="header"> <h1><img src="images/logo.jpg"></h1> </div> <div id="content"> <ul> <li><img src="images/btn01.jpg"></li> <li><img src="images/btn02.jpg"></li> <li><img src="images/btn03.jpg"></li> </ul> </div> <div id="sidbar"> <h2><img src="images/mainCopy.gif"></h2> </div> <div id="footer"> <address><img src="images/copyright.gif"></address> </div> </div> </body> </html> （感想） バックグラウンドの紫の画像が見たときに箱と同じかそれ以上大きいと思いましたが 小さく一瞬慌てましたがリピートをすると頭で理解したらほっとしました。
練習
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery UI Example Page</title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Accordion $("#accordion").accordion({ header: "h3" }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); </script> <style type="text/css"> /*demo page css*/ body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} </style> </head> <body> <h1>Welcome to jQuery UI!</h1> <p style="font-size: 1.3em; line-height: 1.5; margin: 1em 0; width: 50%;">This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of <a href="js/jquery-1.7.2.min.js">jQuery</a>, your personalized copy of <a href="js/jquery-ui-1.8.21.custom.min.js">jQuery UI (js/jquery-ui-1.8.21.custom.min.js)</a>, and <a href="css/ui-lightness/jquery-ui-1.8.21.custom.css">css/ui-lightness/jquery-ui-1.8.21.custom.css</a> which imports the entire jQuery UI CSS Framework. You can choose to link a subset of the CSS Framework depending on your needs. </p> <p style="font-size: 1.2em; line-height: 1.5; margin: 1em 0; width: 50%;">You've downloaded components and a theme that are compatible with jQuery 1.3+. Please make sure you are using jQuery 1.3+ in your production environment.</p> <p style="font-weight: bold; margin: 2em 0 1em; font-size: 1.3em;">YOUR COMPONENTS:</p> <!-- Accordion --> <h2 class="demoHeaders">Accordion</h2> <div id="accordion"> <div> <h3><a href="#">First</a></h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> </div> <div> <h3><a href="#">Second</a></h3> <div>Phasellus mattis tincidunt nibh.</div> </div> <div> <h3><a href="#">Third</a></h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> </div> </body>