しがないプログラマーの備忘録: 4月 2017

2017年4月26日水曜日

文字列を配列に分割する方法

【目的】
PostgreSQLで文字列を配列に分割します。

【手順１】
１．SQLは以下の内容。

SELECT regexp_split_to_array('１２３,あいう,ＡＢＣ', ',')

２．実行ボタンをクリック。
３．以下の様に、ウィンドウ下の実行結果に出力されれば成功です。

以上です。

2017年4月25日火曜日

Modal

【目的】
MaterializeでModalを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <a class="btn" href="#modal1">呼び出し</a>

        <div id="modal1" class="modal">
            <div class="modal-content">
                <h4>モーダルのヘッダー</h4>
                <p>モーダルの中身<br />
                2行目<br />
                3行目<br />
                </p>
            </div>
            <div class="modal-footer">
                <a href="#!" class="modal-action modal-close btn-flat">閉じる</a>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script>
            $(document).ready(function(){
                $('.modal').modal();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

2017年4月20日木曜日

Tab

【目的】
MaterializeでTabを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <div class="col s12">
                <ul class="tabs">
                    <li class="tab col s3"><a href="#tab1">タブ1</a></li>
                    <li class="tab col s3"><a class="active" href="#tab2">タブ2</a></li>
                    <li class="tab col s3 disabled"><a href="#tab3">タブ3</a></li>
                    <li class="tab col s3"><a href="#tab4">タブ4</a></li>
                </ul>
            </div>
            <div id="tab1" class="col s12">タブ1の中身</div>
            <div id="tab2" class="col s12">タブ2の中身</div>
            <div id="tab3" class="col s12">タブ3の中身</div>
            <div id="tab4" class="col s12">タブ4の中身</div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Dropdown

【目的】
MaterializeでDropdownを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <a class="dropdown-button btn" href="#" data-activates="dropdown1">ドロップダウン呼び出し</a>

        <ul id="dropdown1" class="dropdown-content">
        <li><a href="#">リンク１</a></li>
        <li><a href="#">リンク２</a></li>
        <li class="divider"></li>
        <li><a href="#">リンク３</a></li>
        <li><a href="#"><i class="material-icons">mail</i>リンク４</a></li>
        <li><a href="#"><i class="material-icons">web</i>リンク５</a></li>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Tooltip

【目的】
MaterializeでTooltipを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
           <a class="btn tooltipped" data-position="top" data-delay="50" data-tooltip="ツールチップ">上</a>
           <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="ツールチップ">下</a>
           <a class="btn tooltipped" data-position="right" data-delay="50" data-tooltip="ツールチップ">右</a>
           <a class="btn tooltipped" data-position="left" data-delay="50" data-tooltip="ツールチップ">左</a>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Toast

【目的】
MaterializeでToastを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
          <a class="btn" onclick="Materialize.toast('トーストです。', 2000)">呼び出し</a>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Collapsible

【目的】
MaterializeでCollapsible(アコーディオン)を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ul class="collapsible" data-collapsible="accordion">
            <li>
                <div class="collapsible-header"><i class="material-icons">mail</i>メール</div>
                <div class="collapsible-body"><span>メールの中身</span></div>
            </li>
            <li>
                <div class="collapsible-header"><i class="material-icons">web</i>Web</div>
                <div class="collapsible-body"><span>Webの中身</span></div>
            </li>
            <li>
                <div class="collapsible-header"><i class="material-icons">shop</i>ショップ</div>
                <div class="collapsible-body"><span>ショップの中身</span></div>
            </li>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <script>
            $(document).ready(function() {
                $('.collapsible').collapsible();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Carousel

【目的】
MaterializeでCarousel(カルーセル)を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="carousel">
            <a class="carousel-item" href="#"><img src="image1.png"></a>
            <a class="carousel-item" href="#"><img src="image2.png"></a>
            <a class="carousel-item" href="#"><img src="image3.png"></a>
            <a class="carousel-item" href="#"><img src="image4.png"></a>
            <a class="carousel-item" href="#"><img src="image5.png"></a>
        </div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <script>
            $(document).ready(function() {
                $('.carousel').carousel();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Navbarタブ

【目的】
Materializeでタブ付きのNabvarを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <nav class="nav-extended">
            <div class="nav-wrapper">
                <a href="#" class="brand-logo">Logo</a>
                <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="#">リンク１</a></li>
                    <li><a href="#">リンク２</a></li>
                    <li><a href="#">リンク３</a></li>
                </ul>
                <ul class="side-nav" id="mobile-demo">
                    <li><a href="#">リンク１</a></li>
                    <li><a href="#">リンク２</a></li>
                    <li><a href="#">リンク３</a></li>
                </ul>
                </div>
                <div class="nav-content">
                <ul class="tabs tabs-transparent">
                    <li class="tab"><a href="#tab1">タブ１</a></li>
                    <li class="tab"><a class="active" href="#tab2">タブ２</a></li>
                    <li class="tab disabled"><a href="#tab3">タブ３</a></li>
                    <li class="tab"><a href="#tab4">タブ４</a></li>
                </ul>
            </div>
        </nav>
        <div id="tab1" class="col s12">タブ１の中身</div>
        <div id="tab2" class="col s12">タブ２の中身</div>
        <div id="tab3" class="col s12">タブ３の中身</div>
        <div id="tab4" class="col s12">タブ４の中身</div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        
        <script>
            $(document).ready(function() {
                $(".button-collapse").sideNav();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Navbar

【目的】
MaterializeでNabvarを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <nav>
            <div class="nav-wrapper">
                <a href="#" class="brand-logo">ロゴ</a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="#">リンク１</a></li>
                    <li class="active"><a href="#">リンク２</a></li>
                    <li><a href="#">リンク３</a></li>
                </ul>
            </div>
        </nav>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

2017年4月19日水曜日

Preloader円

【目的】
MaterializeでPreloader(進捗表示)を円で表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="preloader-wrapper small active">
            <div class="spinner-layer spinner-green-only">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="gap-patch">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Preloader

【目的】
MaterializeでPreloader(進捗表示)を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="progress">
            <div class="determinate" style="width: 30%"></div>
        </div>
        <br /><br /><br /><br /><br />
        <div class="progress">
            <div class="indeterminate"></div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ページャー

【目的】
Materializeでページャーを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ul class="pagination">
            <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
            <li class="waves-effect"><a href="#!">1</a></li>
            <li class="waves-effect"><a href="#!">2</a></li>
            <li class="active"><a href="#!">3</a></li>
            <li class="waves-effect"><a href="#!">4</a></li>
            <li class="waves-effect"><a href="#!">5</a></li>
            <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(text)文字数

【目的】
Materializeでフォームのテキストの文字数を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input id="name" type="text" data-length="10">
                        <label for="name">氏名</label>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(switch)

【目的】
Materializeでフォームのスイッチを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="switch">
            <label>
                オフ
                <input type="checkbox">
                <span class="lever"></span>
                オン
            </label>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(file)

【目的】
Materializeでフォームのファイルアップロードを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="file-field input-field col s6">
                        <div class="btn">
                            <span>アップロード</span>
                            <input type="file">
                        </div>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text">
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(checkbox)不確定

【目的】
Materializeでフォームの不確定チェックボックスを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>

        <input type="checkbox" id="checkbox1" />
        <label for="checkbox1">不確定チェックボックス</label>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#checkbox1').prop("indeterminate", true);
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(checkbox)

【目的】
Materializeでフォームのチェックボックスを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>

        <input type="checkbox" id="checkbox1" />
        <label for="checkbox1">選択１</label>

        <input type="checkbox" id="checkbox2" checked="checked" />
        <label for="checkbox2">選択２</label>

        <input type="checkbox" class="filled-in" id="checkbox3" checked="checked" />
        <label for="checkbox3">選択３</label>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(radio)

【目的】
Materializeでフォームのラジオボタンを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <input name="group1" type="radio" id="radio1" />
        <label for="radio1">選択１</label>

        <input class="with-gap" name="group1" type="radio" id="radio2"  />
        <label for="radio2">選択２</label>

        <input name="group1" type="radio" id="radio3" />
        <label for="radio3">選択３</label>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(select)画像

【目的】
Materializeでフォームのセレクトに画像を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <div class="input-field col s6">
                <select>
                    <option value=""></option>
                    <option value="1" data-icon="image1.png" class="circle">選択1</option>
                    <option value="2" data-icon="image2.png" class="circle">選択2</option>
                    <option value="3" data-icon="image3.png" class="circle">選択3</option>
                </select>
                <label>選択肢</label>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <script>
            $(document).ready(function() {
                $('select').material_select();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(select)

【目的】
Materializeでフォームのセレクトを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <div class="input-field col s6">
                <select>
                    <option value=""></option>
                    <option value="1">選択1</option>
                    <option value="2">選択2</option>
                    <option value="3">選択3</option>
                </select>
                <label>選択肢</label>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>

        <script>
            $(document).ready(function() {
                $('select').material_select();
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(textarea)

【目的】
Materializeでフォームのテキストエリアを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <textarea id="note" class="materialize-textarea"></textarea>
                        <label for="note">備考</label>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(text)異常・正常メッセージ

【目的】
Materializeでフォームのテキストの異常・正常のメッセージを変更します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input id="name" type="text" class="validate invalid" value="エラー文字列">
                        <label for="name" data-error="異常" data-success="正常">氏名</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input id="name" type="text" class="validate valid" value="正常文字列">
                        <label for="name" data-error="異常" data-success="正常">氏名</label>
                    </div>
                </div>
            </form>
        </div>


        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(text)アイコンプレフィックス

【目的】
Materializeでフォームのテキストにアイコンを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <i class="material-icons prefix">account_circle</i>
                        <input id="name" type="text">
                        <label for="name">氏名</label>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(text)インライン

【目的】
Materializeでフォームのテキストをインラインで表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    氏名を入力してください
                    <div class="input-field inline">
                        <input id="name" type="text">
                        <label for="name">氏名</label>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(パスワード)

【目的】
Materializeでフォームのパスワードを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input id="pass" type="password">
                        <label for="name">パスワード</label>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

2017年4月18日火曜日

フォーム(text)異常・正常

【目的】
Materializeでフォームのテキストの異常・正常を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input placeholder="氏名を入力してください" id="name" type="text" class="validate invalid" value="エラー文字列">
                        <label for="name">氏名</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input placeholder="氏名を入力してください" id="name" type="text" class="validate valid" value="正常文字列">
                        <label for="name">氏名</label>
                    </div>
                </div>
            </form>
        </div>


        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

フォーム(text)

【目的】
Materializeでフォームのテキストを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input placeholder="氏名を入力してください" id="name" type="text">
                        <label for="name">氏名</label>
                    </div>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

StickyFooter

【目的】
MaterializeでStickyFooterを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style>
            body {
                display: flex;
                min-height: 100vh;
                flex-direction: column;
            }
            main {
                flex: 1 0 auto;
            }
        </style>
    </head>
    <body>
        <main>
            メインコンテンツ
        </main>
        <footer class="page-footer">
            <div class="container">
                <div class="row">
                    <div class="col l6 s12">
                        <h5 class="white-text">フッター</h5>
                        <p class="grey-text text-lighten-4">
                            フッター1行目<br />
                            フッター2行目<br />
                            フッター3行目<br />
                        </p>
                    </div>
                    <div class="col l4 offset-l2 s12">
                        <h5 class="white-text">リンク</h5>
                        <ul>
                            <li><a class="grey-text text-lighten-3">リンク1</a></li>
                            <li><a class="grey-text text-lighten-3">リンク2</a></li>
                            <li><a class="grey-text text-lighten-3">リンク3</a></li>
                            <li><a class="grey-text text-lighten-3">リンク4</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="container">
                    ©2017 Copyright ○○
                    <a class="grey-text text-lighten-4 right">その他リンク</a>
                </div>
            </div>
        </footer>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Footer

【目的】
MaterializeでFooterを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <footer class="page-footer">
            <div class="container">
                <div class="row">
                    <div class="col l6 s12">
                        <h5 class="white-text">フッター</h5>
                        <p class="grey-text text-lighten-4">
                            フッター1行目<br />
                            フッター2行目<br />
                            フッター3行目<br />
                        </p>
                    </div>
                    <div class="col l4 offset-l2 s12">
                        <h5 class="white-text">リンク</h5>
                        <ul>
                            <li><a class="grey-text text-lighten-3">リンク1</a></li>
                            <li><a class="grey-text text-lighten-3">リンク2</a></li>
                            <li><a class="grey-text text-lighten-3">リンク3</a></li>
                            <li><a class="grey-text text-lighten-3">リンク4</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="container">
                    ©2017 Copyright ○○
                    <a class="grey-text text-lighten-4 right">その他リンク</a>
                </div>
            </div>
        </footer>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

アバターCollection

【目的】
MaterializeでアバターのCollectionを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ul class="collection">
            <li class="collection-item avatar">
                <img src="image.png" class="circle">
                <span class="title">あいうえお</span>
                <p>1行目<br>
                2行目
                </p>
                <a class="secondary-content"><i class="material-icons">grade</i></a>
            </li>
            <li class="collection-item avatar">
                <i class="material-icons circle yellow">email</i>
                <span class="title">かきくけこ</span>
                <p>1行目<br>
                2行目
                </p>
                <a class="secondary-content"><i class="material-icons">grade</i></a>
            </li>
            <li class="collection-item avatar">
                <i class="material-icons circle green">web</i>
                <span class="title">さしすせそ</span>
                <p>1行目<br>
                2行目
                </p>
                <a class="secondary-content"><i class="material-icons">grade</i></a>
            </li>
            <li class="collection-item avatar">
                <i class="material-icons circle blue">shop</i>
                <span class="title">たちつてと</span>
                <p>1行目<br>
                2行目
                </p>
                <a class="secondary-content"><i class="material-icons">grade</i></a>
            </li>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ヘッダーつきCollection

【目的】
MaterializeでヘッダーつきのCollectionを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ul class="collection with-header">
            <li class="collection-header"><h4>ヘッダータイトル</h4></li>
            <li class="collection-item">あいうえお</li>
            <li class="collection-item">かきくけこ</li>
            <li class="collection-item">さしすせそ</li>
            <li class="collection-item">たちつてと</li>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

リンクのCollection

【目的】
MaterializeでリンクのCollectionを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ul class="collection">
            <a class="collection-item">あいうえお</a>
            <a class="collection-item active">かきくけこ</a>
            <a class="collection-item">さしすせそ</a>
            <a class="collection-item">たちつてと</>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Collection

【目的】
MaterializeでCollectionを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <ul class="collection">
            <li class="collection-item">あいうえお</li>
            <li class="collection-item">かきくけこ</li>
            <li class="collection-item">さしすせそ</li>
            <li class="collection-item">たちつてと</li>
        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Chips(コンタクト)

【目的】
MaterializeでChips(コンタクト)を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="chip">
            <img src="image.png" alt="Contact Person">
            あいう　えお
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

Chips(タグ)

【目的】
MaterializeでChips(タグ)を表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="chip">
            キーワード<i class="close material-icons">close</i>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

2017年4月17日月曜日

カードパネル

【目的】
Materializeでカードパネルを表示します。

【準備】
１．「Materializeの使用方法」の手順の通り、Materializeを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <div class="row">
            <div class="col s12 m6">
                <div class="card-panel blue">
                    カードの中身です。<br />
                    2行目。<br />
                    3行目。<br />
                </div>
            </div>
        </div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ページ

最近の更新

2017年4月26日水曜日

2017年4月25日火曜日

2017年4月20日木曜日

2017年4月19日水曜日

2017年4月18日火曜日

2017年4月17日月曜日

関連記事