連想配列を使う06
☆★データーでの確認★☆
連想配列のキーと値絵を入れ替える
array_flip関数
- 連想配列のキーと値を相互に入れ替えることができる。この関数では、もとの配列を引数に指定することによって、キーと値が逆転された連想配列が返り値になる。その際、元の配列内容は変化しない。
- 連想配列のキーに重複した値を設定できない。キーと値を入れ替えた後、重複したキーがある場合には最後のデーターのみが有効となり、ほかのデーターは削除される。
- 下記の表では、元の配列の値は「南米」と「ヨーロッパ」しかないので、array_flip関数の返り値はデーター数=2の配列となる。また、もとの配列で最初に出てくる『値が「南米」である「ブラジル」』は、後から出てくる『値が「南米」である「アルゼンチン」』に上書きされる。同様に、値が「ヨーロッパ」であるデーターも、最後にでてくる「チェコ」だけが有効になる。
【 書式 】
<?php // 複数のデーターを連想配列にまとめて代入 $team = array("ブラジル" => "南米", "イタリア" => "ヨーロッパ", "アルゼンチン" => "南米", "フランス" => "ヨーロッパ", "イングランド" => "ヨーロッパ", "オランダ" => "ヨーロッパ", "スペイン" => "ヨーロッパ", "ポルトガル" => "ヨーロッパ", "ドイツ" => "ヨーロッパ", "チェコ" => "ヨーロッパ"); // 連想配列の内容をループで出力 print "【元の連想配列のデーター】<br>"; while (list($key, $value) = each($team)) { print $key . " => " . $value . "<br>"; } print "<br>"; // キーと値を入れ替える $flip = array_flip($team); // 連想配列の内容をループで出力 print "【 入れ替え後の連想配列のデーター 】<br>"; reset($team); while (list($key, $value) = each($flip)) { print $key . " => " . $value . "<br>"; } ?>
ソースコード
ソースコード【 HTML 】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="description" content="同類のデーターを同じ変数でまとめて管理できる。配列の処理"> <meta name="keywords" content="PHPスクリプトの基本,配列の処理"> <meta name="viewport" content="width=device-width"> <title>PHPスクリプトの基本 | 配列の処理</title> <link href="../css/reset.css" rel="stylesheet" type="text/css" media="all"> <link href="../css/style2.css" rel="stylesheet" type="text/css" media="all"> <!--[if lt IE 9]> <script src="../js/html5shiv.js"></script> <![endif]--> </head> <body> <div id="container"> <header id="header"> <div class="header-top"> <div class="head-top"> <p><a href="http://d.hatena.ne.jp/webry/" target="_blank"><span class="icon">PHP</span></a>webサイト制作</p> </div> </div> <div class="head"> <h1><img src="../images/img-set01/main_img.png" width="960" height="138" alt="Web開発のためのPHP-Webサイト制作-"></h1> <p class="sec-title"><span>連想配列を使う</span></p> </div> </header> <div id="contents"> <section class="col1"> <h1><span>4-6</span>連想配列のキーと値絵を入れ替える</h1> <div id="post01" class="post"> <p class="point">array_flip関数</p> <h2><a href="#post01"><span>array_flip関数</span></a></h2> <div class="post_inner"> <div class="inner"> <ul class="notes"> <li>連想配列のキーと値を相互に入れ替えることができる。この関数では、もとの配列を引数に指定することによって、キーと値が逆転された連想配列が返り値になる。その際、元の配列内容は変化しない。</li> <li>連想配列のキーに重複した値を設定できない。キーと値を入れ替えた後、重複したキーがある場合には最後のデーターのみが有効となり、ほかのデーターは削除される。</li> <li>下記の表では、元の配列の値は「南米」と「ヨーロッパ」しかないので、array_flip関数の返り値はデーター数=2の配列となる。また、もとの配列で最初に出てくる『値が「南米」である「ブラジル」』は、後から出てくる『値が「南米」である「アルゼンチン」』に上書きされる。同様に、値が「ヨーロッパ」であるデーターも、最後にでてくる「チェコ」だけが有効になる。</li> </ul> </div> </div> </div> </section> <section class="col-code"> <div id="post02" class="post"> <h2><a href="#post02"><span>PHPのコードを表示</span></a></h2> <div class="post_inner"> <div class="inner"> <pre> <code> // 複数のデーターを連想配列にまとめて代入 $team = array("ブラジル" => "南米", "イタリア" => "ヨーロッパ", "アルゼンチン" => "南米", "フランス" => "ヨーロッパ", "イングランド" => "ヨーロッパ", "オランダ" => "ヨーロッパ", "スペイン" => "ヨーロッパ", "ポルトガル" => "ヨーロッパ", "ドイツ" => "ヨーロッパ", "チェコ" => "ヨーロッパ"); // 連想配列の内容をループで出力 print "【元の連想配列のデーター】<br>"; while (list($key, $value) = each($team)) { print $key . " => " . $value . "<br>"; } print "<br>"; // キーと値を入れ替える $flip = array_flip($team); // 連想配列の内容をループで出力 print "【 入れ替え後の連想配列のデーター 】<br>"; reset($team); while (list($key, $value) = each($flip)) { print $key . " => " . $value . "<br>"; } </code> </pre> </div> </div> </div> </section> <section class="col2"> <div id="post03" class="post"> <h2><a href="#post03"><span>PHPでの表示</span></a></h2> <div class="post_inner"> <div class="inner"> <div class="php"> <?php // 複数のデーターを連想配列にまとめて代入 $team = array("ブラジル" => "南米", "イタリア" => "ヨーロッパ", "アルゼンチン" => "南米", "フランス" => "ヨーロッパ", "イングランド" => "ヨーロッパ", "オランダ" => "ヨーロッパ", "スペイン" => "ヨーロッパ", "ポルトガル" => "ヨーロッパ", "ドイツ" => "ヨーロッパ", "チェコ" => "ヨーロッパ"); // 連想配列の内容をループで出力 print "【元の連想配列のデーター】<br>"; while (list($key, $value) = each($team)) { print $key . " => " . $value . "<br>"; } print "<br>"; // キーと値を入れ替える $flip = array_flip($team); // 連想配列の内容をループで出力 print "【 入れ替え後の連想配列のデーター 】<br>"; reset($team); while (list($key, $value) = each($flip)) { print $key . " => " . $value . "<br>"; } ?> </div> </div> </div> </div> </section> <!-- /#contents --> </div> <footer id="footer"> <div class="foot clearfix"> <ul> <li><a href="http://d.hatena.ne.jp/webry/" target="_blank">実践するWEBサイト制作 | webnote</a></li> <li><a href="http://webry.dousetsu.com/images_deta/" target="_blank">はてなデーターの保管庫 | webrynote</a></li> <li><a href="http://smart4me.net/webry/#!topPage" target="_blank">実践する為のWEBサイト情報 | webnote_mini(Smartphone専用サイト)</a></li> </ul> <ul> <li><a href="http://webrynote.jimdo.com/" target="_blank">動画で確認するscript | FlashとJavaScrip</a></li> <li><a href="http://webry.dousetsu.com/" target="_blank">実践でカフェオレを俺流においしく作るサイト | カフェ俺流に作る</a></li> <li><a href="http://webry.org/" target="_blank">PortFolio | webryの作品集</a></li> <li><a href="http://www.tumblr.com/dashboard" target="_blank">Graphics board | 素晴らしいと思ったキャプチャーを貼っています。</a></li> </ul></div> <div class="foot-bottom"> <p ><small>Copyright© 2013 Web開発のためのPHP-Webサイト制作- All Rights Reserved.</small></p> </div> </footer> <!-- /#container --> </div> </body> </html>
@charset "utf-8"; /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
@charset "utf-8"; /*webfont*/ @import url(http://fonts.googleapis.com/css?family=Kavoon); @import url(http://fonts.googleapis.com/css?family=Plaster); /* bace ---------------------------------------------- */ body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; line-height: 1.4; font-size: 16px; color: #333;} /* style */ .b {font-weight: bold;} /* #container ---------------------------------------------- */ #container { background: url(../images/img-set01/bg.jpg);} #header, section { margin: 0 0 10px;} .header-top, .foot-bottom { padding: 4px 0 4px 0; background: #04009d; font-size: 10px; font-weight: bold; color: #fff;} .header-top { padding: 0 0 1px 0; font-size: 12px;} .head-top { background: url(../images/img-set01/header.png) no-repeat;} .header-top{ border-bottom: 2px solid #666;} .icon { font-family: 'Kavoon', cursive; margin: 0 10px 0 0; background: #F00; border-top: 1px solid #04009d; border-bottom: 1px solid #04009d; font-size: 16px; color: #000; text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);} .head, .head-top, #contents, .foot, .foot-bottom p:first-child { width: 960px; margin: 0 auto;} .head, #contents, .foot { background-color: rgba(255,255,255,0.55);} .col1 h1 { padding: 3px 30px 0; font-size: 24px;} .col1 h1 span { margin: 0 20px 0 -30px; padding: 3px 8px 0; color: #fff;} .sec-title { padding: 0 0 2px; font-size: 28px; text-align: center; border-bottom: 3px solid #3D6DFF;} .sec-title span { border-bottom: 2px solid #F00;} .head p:before { content: "7. "; font-family: 'Plaster', cursive; font-size: 32px;} .col1 h1 { margin: 0 0 10px; border: 1px solid #3D6DFF;} .col1 h1 span { background: #3D6DFF;} .col1 ul li { padding: 0 0 0 23px; background: url(../images/img-set01/circle03.png) no-repeat left 0.2em;} .col1 ul li ul.inner_list li { font-weight: bold; margin-top: 5px; background: none;} .col1 ul li ul.inner_list2 { margin-bottom: 10px;} .col1 ul li ul.inner_list2 li { font-weight: bold; margin-top: 5px; background: none;} .col1 ul li ul.inner_list_middledot li { font-weight: bold; margin-top: 5px; margin-bottom: 5px; background: none;} .col1 ul li ul.inner_list_middledot li:before { content: "・"; font-weight: bold;} .col1 ul li ul.inner_list_middledot li span { display: inline-block; margin: 0 0 0 10px;} .point { margin: 0 0 10px; padding: 26px 20px 33px 115px; background: url(../images/img-set01/point.png) no-repeat 10px 0em; font-size: 20px; color: #F00; font-weight: bold;} h2 { margin: 0 10px 10px; padding: 5px 15px 3px; border-top: 1px solid #3D6DFF; border-right: 1px solid #3D6DFF; border-bottom: 2px solid #3D6DFF; border-left: 15px solid #3D6DFF; border-radius: 8px 0 0 8px / 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px / 8px 0 0 8px; -ms-border-radius: 8px 0 0 8px / 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px / 8px 0 0 8px; background: #3D6DFF; font-size: 18px; } h2 span { display: block; width: 98%; padding: 3px 15px; background-color: rgba(255,255,255,0.85);} .inner { width: 90%; margin: 0 auto; padding: 0 0 15px;} .col1 ul.last_child li:last-child { display: inline-block; background: none; margin-top: 8px; font-size: 90%;} .col1 ul.last_child li:last-child::before { content: "※"; color: #F00; font-weight: bold; padding: 0 5px 0 0;} .col-code { display: none;} .col1 ul.notes li:last-child { display: inline-block; width: 80%; margin: 10px 0 0; padding: 8px 36px; background: none; border: 1px solid #03C; border-radius: 6px;} .col1 ul.notes li:last-child::before { content: "◎"; color: red; padding-right: 4px;} .php { padding: 10px; border: 2px dotted #F30; background-color: rgba(61,109,255,0.45);} /*.col2 ul.notes { with: 80%; margin: 0 auto;}*/ .col2 ul.notes li:last-child { display: inline-block; width: 80%; margin: -10px auto 10px; padding: 8px 36px; background: none; border: 1px solid #03C; border-radius: 6px;} /*php の表記下に記述する*/ /*.notes:last-child::before { content: "◎"; color: red; padding-right: 4px;} .notes:last-child { display: inline-block; width:89%; margin: 10px auto 10px; padding: 8px 16px; background: none; border: 1px solid #03C; border-radius: 6px;}*/ /*php の表記下に記述する*/ .post h2 a:link, .post h2 a:visited, .post h2 a:hover, .post h2 a:active {color:#333;text-decoration:none;} hr.style { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));} .foot { padding: 20px 15px; background-color: rgba(0,0,0,0.85); color: #fff; font-size: 14px;} .foot ul { float: left; width: 48%; margin: 0 30px 0 0;} .foot ul + ul { margin: 0;} .foot-bottom p { padding: 3px 5px 8px 0; text-align: right;} .head-top p a:link, .head-top p a:visited, .head-top p a:hover, .head-top p a:active { text-decoration: none;} .foot a:link, .foot a:visited { color: #BB7DFF; text-decoration: underline;} .foot a:hover, .foot a:active { color: #D22D63; text-decoration: none;} /*table*/ table caption { font-size: 12px; text-align: left;} table { width: 100%; margin-top: 15px; border: 1px #000000 solid; border-collapse: collapse;} th { background: #3D6DFF; color: #fff;} th, td{ padding: 4px 6px; border: 1px #000000 solid;} .td_title { font-weight: bold;} p.table_set { margin-top: 5px;} /*clearfix*/ .clearfix:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .clearfix {display: inline-block;} /* Hides from IE Mac */ * html .clearfix {height: 1%;} .clearfix {display:block;} /* End Hack */ @media only screen and (max-width:320px) { #container { width: 100%; padding: 0 10px; background: url(../images/img-set01/bg.jpg);} .head h1 { text-align: center; padding: 5px 5px 0;} .head h1 img { display: none;} .head h1:before { content: "Web開発のためのPHP"; font-size: 22px; color: #039; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);} .head h1:after { content: "-Webサイト制作-"; display: inline-block; font-size: 16px; color: #F00; text-shadow: 0 0 2px rgba(0, 255, 255, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5)} #header, section { margin: 0 0 10px;} .header-top { width: 100%; padding: 8px 0; font-size: 10px; color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4); font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #09123c), color-stop(1.00, #0e3e8d)); background: -webkit-linear-gradient(#09123c, #0e3e8d); background: -moz-linear-gradient(#09123c, #0e3e8d); background: -o-linear-gradient(#09123c, #0e3e8d); background: -ms-linear-gradient(#09123c, #0e3e8d); background: linear-gradient(#09123c, #0e3e8d);} .foot-bottom { width: 320px; padding: 12px 0 18px; font-size: 8px; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4); font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #0e3e8d), color-stop(1.00, #09123c)); background: -webkit-linear-gradient(#0e3e8d, #09123c); background: -moz-linear-gradient(#0e3e8d, #09123c); background: -o-linear-gradient(#0e3e8d, #09123c); background: -ms-linear-gradient(#0e3e8d, #09123c); background: linear-gradient(#0e3e8d, #09123c);} .head-top { padding: 0 0 1px 0; font-size: 12px; background: none;} .header-top{ border-bottom: 2px solid #666;} .icon { display: inline-block; font-family: 'Kavoon', cursive; margin: 0 10px; background: #F00; border-top: none; border-bottom: none; font-size: 16px; color: #000;} .head, .head-top, #contents, .foot, .foot-bottom p:first-child { width: 100%;} .head, #contents, .foot { background-color: rgba(255,255,255,0.55);} .col1 h1 { padding: 3px 30px 0; font-size: 18px;} .col1 h1 span { margin: 0 20px 0 -30px; padding: 3px 8px 0; color: #fff; inset 0 -1px 1px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4)} .sec-title { padding: 0; font-size: 19px; text-align: center; border-bottom: 3px solid #3D6DFF;} .sec-title span { padding: 0 0 5px; border-bottom: 2px solid #F00;} .head p:before { content: "7. "; font-family: 'Plaster', cursive; font-size: 24px;} .col1 h1 { margin: 0 0 10px; border: 1px solid #3D6DFF;} .col1 h1 span { text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2947ff), color-stop(0.00, #3883ff)); background: -webkit-linear-gradient(#3883ff, #2947ff); background: -moz-linear-gradient(#3883ff, #2947ff); background: -o-linear-gradient(#3883ff, #2947ff); background: -ms-linear-gradient(#3883ff, #2947ff); background: linear-gradient(#3883ff, #2947ff);} .col1 ul li { padding: 0 0 0 20px; background: url(../images/img-set01/circle03.png) no-repeat left 0.25em;} .point { position: relative; margin: 0; padding: 10px 15px 10px 35px; background-image: none; color: #F00; text-align: left; font-weight: bold;} .point:before { position: absolute; top: -15px; left: -15px; content: "P"; display: block; width: 24px; height: 24px; margin: 0; padding: 5px; border:5px solid #F00; border-radius: 60px; font-size: 32px; font-weight: bold; color: #f00; text-align: center; background: #F5BEC4; text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5);} h2 { margin: 0 0 10px; padding: 2px 5px; border-top: 1px solid #3D6DFF; border-right: 1px solid #3D6DFF; border-bottom: 1px solid #3D6DFF; border-left: 1px solid #3D6DFF; border-radius: 0 / 0; -moz-border-radius: 0 / 0; -ms-border-radius: 0 / 0; -webkit-border-radius: 0 / 0; background: #3D6DFF; font-size: 18px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #70b6f2), color-stop(0.50, #54a3ee), color-stop(0.50, #3690f0), color-stop(1.00, #1a62db)); background: -webkit-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%); background: -moz-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%); background: -o-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%); background: -ms-linear-gradient(top, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%); background: linear-gradient(to bottom, #70b6f2 0%, #54a3ee 50%, #3690f0 50%, #1a62db 100%);} h2 span { display: block; width: 95%; margin: 0 auto; padding: 3px 5px; text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #cecece), color-stop(1.00, #fff)); background: -webkit-linear-gradient(#cecece, #fff); background: -moz-linear-gradient(#cecece, #fff); background: -o-linear-gradient(#cecece, #fff); background: -ms-linear-gradient(#cecece, #fff); background: linear-gradient(#cecece, #fff);} .inner { width: 95%; margin: 0 auto; padding: 0 0 15px;} .col1 ul.notes li:last-child { display: inline-block; width: 95%; margin: 10px auto 0; padding: 8px 5px; background: none; border: 1px solid #03C; border-radius: 6px; font-size: 14px;} .php { padding: 10px; border: 2px dotted #F30; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #d5defd), color-stop(1.00, #7a9bcd)); background: -webkit-linear-gradient(#d5defd, #7a9bcd); background: -moz-linear-gradient(#d5defd, #7a9bcd); background: -o-linear-gradient(#d5defd, #7a9bcd); background: -ms-linear-gradient(#d5defd, #7a9bcd); background: linear-gradient(#d5defd, #7a9bcd);} .col-code { display: inherit; font-size: 14px; word-wrap:break-word;} .foot { padding: 15px 0; color: #fff; font-size: 12px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #131313), color-stop(1.00, #4b4b4b)); background: -webkit-linear-gradient(#131313, #4b4b4b); background: -moz-linear-gradient(#131313, #4b4b4b); background: -o-linear-gradient(#131313, #4b4b4b); background: -ms-linear-gradient(#131313, #4b4b4b); background: linear-gradient(#131313, #4b4b4b);} .foot ul { float: none; width: 90%;/**/ margin: 0; padding: 0 15px;} .foot ul li { padding: 0 0 10px;} .foot ul + ul { margin: 0;} .foot-bottom p { padding: 3px 5px; text-align: center;} /* 折りたたみ表示 */ .post .post_inner {display:none;} .post:target .post_inner {display: block;} }
ブラウザで表示【 FireFox 】
IEtester【 IE8 】
IEtester【 IE9 】
ブラウザで表示【 Chrome 】
iPhone【 MbileSfari 】