ウェブ制作、コーディング初心者のメモ

: javaScript

Webブラウザの色を変える

2015/10/29 背景色､フォントカラー

プロパティって前回の記事で、メソッドについて触れました。今回は、オブジェクトのもう１つの要素である。プロパティ(属性)について書きます。プロパティは、値の読出し・書き換えができるものと、読出しだけ ...

: jQuery

画像にマウスを乗せるとポンと出るjQuery

2015/10/29 jQueryプラグイン, ポップアップ

今回紹介するのは、bubblePopupというjQueryのプラグインです。サンプルコードを見て実行して頂くとわかると思いますが、表示されている画像の上にマウスを持ってくると文字やそれを囲む画像が浮か ...

: javaScript

値に名前をつけて使う「変数」とは

2015/10/29 変数

値に名前をつけて使う「変数」とは変数って？？ javaScriptだけではないのですが、プログラミング言語で重要なものがあります。値を一時的に格納しておく変数というものです。変数は。値を入れる箱のよ ...

: javaScript

WebブラウザにHTMLを出力する

2015/10/29 メソッド

メソッドって javaScriptは、様々な要素がオブジェクトとして操作することができます。オブジェクトは、オブジェクトに用意されているメソッドと、属性であるプロパティから構成されています。 HTML ...

水平方向のアコーディオンメニュー

2015/8/16 水平方向のアコーディオン

今回紹介するのは横にスライドするアコーディオンメニューです。実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HorrizontalAccordion</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.zaccordion.js"></script>

    <style>
    *{margin:0;padding:0;}
    ol,ul{list-style-type:none;}
        
    div#contents{
        width:920px;
        height:400px;
        padding:20px;
        background-color:brown;
        position:absolute;
        margin:-220px 0 0 -480px;
        left:50%;
        top:50%;
        -webkit-box-shadow:0 0 50px rgba(0,0,0,0,5);
    }
    h1{
        width:110px;
        height:370px;
        position:absolute;
        top:20px;
        right:20px;
        padding:30px 0 0 50px;
        background-color:skyblue;}
    ul#contentsList{width:760px;}
        
        ul#contentsList li{
            width:460px;
            position:relative;
            overflow:visible;}
        ul#contentsList li:nth-of-type(1){
            background-color:yellow;}
        ul#contentsList li:nth-of-type(2){
            background-color:yellowgreen;}
        ul#contentsList li:nth-of-type(3){
            background-color:purple;}
        ul#contentsList li:nth-of-type(4){
            background-color:turquoise;}
        ul#contentsList li:nth-of-type(5){
            background-color:pink;}
        ul#contentsList li:nth-of-type(6){
            background-color:coral;}

            ul#contentsList li h2{
                position:absolute;
                top:0;
                right:0;
                height:400px;
                padding:50px 15px 0 0;
            /*    border-right:1px solid #ddd;*/
                background-color:aquamarine;}

            ul#contentsList li.frame-open h2{
                background-color:red;}
    </style>

</head>
<body>

<div id="contents">
    <h1></h1>
    <ul id="contentsList">
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
    </ul>
</div>

<script>
$(function(){
    
    //アコーディオンの設定
    var li = $("#contentsList li").toArray().reverse();
    $("contentsList").empty().append(li);
    
    $("#contentsList").zAccordion({
        timeout:1000,            // 自動スライド時の１スライド当たりの表示時間
        slideWidth:460,           // アコーディオンのコンテンツの全体の幅
        width:760,                // アコーディオンのコンテンツの全体の高さ
        height:400,               // スライドするコンテンツ１枚分の幅
        speed:440,                // スライドするコンテンツ１枚分の高さ
        startingSlide:5,          // 最初に表示するコンテンツ番号
        slideClass:"frame",                 // スライドさせるコンテンツのli要素に付すクラス名
        slideOpenClass:"frame-open",        // 開いているコンテンツのli要素に付すクラス名
        slideClosedClass:"frame-closed",     // 閉じているコンテンツのli要素に付すクラス名
        slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名
        easing:"easeInOutCubic",            // スライド時のアニメーション
        invert:true                         // 重なり順を逆にして見出しを右に持ってくる
    });
});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!doctype html>

<html>

<head>

<title>HorrizontalAccordion</title>

<style>

*{margin:0;padding:0;}

ol,ul{list-style-type:none;}

div#contents{

width:920px;

height:400px;

padding:20px;

background-color:brown;

position:absolute;

margin:-220px 0 0 -480px;

left:50%;

top:50%;

-webkit-box-shadow:0 0 50px rgba(0,0,0,0,5);

}

h1{

width:110px;

height:370px;

position:absolute;

top:20px;

right:20px;

padding:30px 0 0 50px;

background-color:skyblue;}

ul#contentsList{width:760px;}

ul#contentsList li{

width:460px;

position:relative;

overflow:visible;}

ul#contentsList li:nth-of-type(1){

background-color:yellow;}

ul#contentsList li:nth-of-type(2){

background-color:yellowgreen;}

ul#contentsList li:nth-of-type(3){

background-color:purple;}

ul#contentsList li:nth-of-type(4){

background-color:turquoise;}

ul#contentsList li:nth-of-type(5){

background-color:pink;}

ul#contentsList li:nth-of-type(6){

background-color:coral;}

ul#contentsList li h2{

position:absolute;

top:0;

right:0;

height:400px;

padding:50px 15px 0 0;

/* border-right:1px solid #ddd;*/

background-color:aquamarine;}

ul#contentsList li.frame-open h2{

background-color:red;}

</style>

</head>

<body>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

$(function(){

//アコーディオンの設定

var li = $("#contentsList li").toArray().reverse();

$("contentsList").empty().append(li);

$("#contentsList").zAccordion({

timeout:1000, // 自動スライド時の１スライド当たりの表示時間

slideWidth:460, // アコーディオンのコンテンツの全体の幅

width:760, // アコーディオンのコンテンツの全体の高さ

height:400, // スライドするコンテンツ１枚分の幅

speed:440, // スライドするコンテンツ１枚分の高さ

startingSlide:5, // 最初に表示するコンテンツ番号

slideClass:"frame", // スライドさせるコンテンツのli要素に付すクラス名

slideOpenClass:"frame-open", // 開いているコンテンツのli要素に付すクラス名

slideClosedClass:"frame-closed", // 閉じているコンテンツのli要素に付すクラス名

slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名

easing:"easeInOutCubic", // スライド時のアニメーション

invert:true // 重なり順を逆にして見出しを右に持ってくる

});

</script>

</body>

</html>

今回使っているjQueryプラグイン ●jQuery ...

: javaScript

簡単な計算結果を表示してみる

2015/10/29 コメントアウト, ステートメント, 演算子

ステートメントプログラムでは、１つの命令の単位のことをステートメントと呼びます。日本語に訳せば、文という意味です。サンプルコードを見てみると、alert命令の後ろの()内にダブルクォーテション「" ...

javaScript

ダイアログボックスを表示する。

2015/11/29 ダイアログボックス

今回はjavaScriptについて書いてきます。まずはサンプルコード

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>dialogbox</title>

</head>
<body>
    
<script>
    /*
        このsctiptタグ内に実際の処理を
        書いていきます。
    */
    alert("ここにjavaScriptｗの処理を書きます！！！");
    
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>dialogbox</title>

</head>

<body>

このsctiptタグ内に実際の処理を

書いていきます。

alert("ここにjavaScriptｗの処理を書きます！！！");

</script>

</body>

</html>

実行結果はこちら実行して頂ければ分かりますが、ダイアログボッ ...

: jQuery

ボタンを回転させて表示する。

2015/10/29 Rotate, scrollTo, Timer, 複数プラグイン

ブラウザの上部からぶら下がっているボタンです。スクロールが停止した後、一定時間おいて回転しながら現れるボタンを、今回作成します。使用したjQueryプラグイン 1.jquery.easing.1.3 ...

: jQuery

パンくずメニューをスライドさせて表示させる。

2015/8/3 スライド, パンくず

今回作成するのは、パンくずリストに動きをつけて表示させる jQueryを作成します。サンプルコードが今回は長いです。実行結果はこちらからどうぞ [crayon-69b77e876469f9023 ...

: jQuery

ページトップへスムーズにスクロールさせる。

2015/8/3 easing, jQuery, イージング, スクロール

今回は、ボタンをクリックしたらページのトップへ滑らかに遷移するというものを jQueryを使って作成します。１．jQueryのプラグインを入手する。今回は、トップページにスムーズに戻るためにイ ...

« Prev 1 … 26 27 28 29 30 … 40 Next »