初歩的・基本的(+α)なWebデザイン

• はじめに
• CSS編
  • カーソルを合わせると、中心部から下線が引かれる
  • フェードイン
  • パンくずリスト
  • 見出しに使えそうな文字
• おまけのプラスJavaScript編
  • JavaScriptについて
  • ハンバーガーメニュー
  • タイピングアニメーション

はじめに

WebデザインでCSSやJavaScriptを書いているとき、ふと、今までに学んだり興味があって調べたりしたものを一か所にまとめてみたいな、と思ってこの記事を書いてみました。
そして、その中でも比較的簡単だと思うもの（と、興味があって書いてみようと思ったもの）をまとめてみました。

ちょっと注意。
この記事は簡単だと思うもの（最後のは興味があって書いたものですが）をまとめています。

CSS編

まずCSSについて

CSSとは、ウェブサイトの見た目をを設定する言語のことです。
ウェブサイトは一般的にはHTMLという言語で書かれており、それにCSSを適用させることで、私たちが普段見ているウェブサイトになります。
HTMLにCSSを直接書き込むこともできますが、複数のページを同じデザインにしたりデザイン修正の手間を省いたり、HTMLを読みやすくしたりするために、なるべく共通のデザインをCSSで書くほうが望ましいのです。

CSSをマスターするだけでも、かなりのデザインをウェブ上で実現することができるので、Webデザインを上達させたい人はまずCSSを上達させたほうがいいです。

ここに書かれているものはほんの一部でしかありません。

カーソルを合わせると、中心部から下線が引かれる

※ <ul>のクラス名はnavi、直下の<li>のクラス名はlst。

CSSサンプル（長くなったので）

line.css

.navi{
    display: flex;
    list-style: none;
}
.navi li{
    margin-bottom: 20px;
}
.navi li a{
    display: block;
    position: relative;
    padding: 10px 30px;
    color: #000000;    /* 文字の色 */
}
.navi li.lst a,
.navi li a:hover{
    color: blue;       /* ホバー後の文字の色 */
}

.navi li a::after{
    /* 線の位置を決める */
    content: '';
    position: absolute;
    bottom: 0px;
    left: 10px;
    /* 線の形状 */
    width: 80%;
    height: 1px;
    background: blue;
    /* 線を引く時のアニメーション */
    transtion: all .5s;
    transtion: scale(0, 1);      /* transtion(横、縦) */
    transform-origin: center top;
}
.mainav li a:hover::after{
    transform: scale(1, 1);      /* 横方向のscaleを0から1にする */
}

フェードイン

ものがゆっくりと浮かび上がる表現「フェードイン」です。
@keyframesでアニメーションを制御しておきましょう。

fade.css

.fade{
    /* どのくらい時間をかけて？(s = 秒) */
    /* forwards(アニメーションが終わった後の状態に画面を固定する)*/
    animation: fadeIn 1.5s forwards;   
}
/* アニメーションのキーフレーム（中間ステップ）の制御 */
@keyframes fadeIn{
    from/* 0% */{       /* 初めはどういう感じ？ */
        opacity: 0;     
    }
    to/* 100% */{       /* どんな感じで終わらせる？ */
        opacity: 1;     
    }
}

パンくずリスト

パンくずリストとは、ユーザーが今どういうサイトにいるのかを視覚的に表示した誘導表示のことです。
主に、今見ているサイトがWebサイト内のどの階層に位置しているのかを示す「位置型パンくずリスト」と、ユーザーの操作によって変化する、検索フィルタのような役割を持つ「属性型パンくずリスト」に分けられます。ここでは、オーソドックスな「位置型パンくずリスト」を紹介します。
※リスト全体の<ol>の名前はbreadとする。

bread.css

.bread {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bread li{
    display: inline;       /* 横並びにする */
    list-style: none;
    font-weight: normal;   /* お好みで */
}

.bread li::after{          
    /* '>' を表示させる。表示させないならpaddingでより文字の間隔を空けた方がいい。　*/
    content: '>';
    padding: 0 0.4rem;
    color: black;
}

.bread li:last-child:after{
    /* リストの最後（今いるサイト）には'>'をつけないように */
    content: '';    
}

見出しに使えそうな文字

いろいろなサイトでよく見る、シンプルな見出しです。
borderやborder-radiusも付け加えるとさらにいいと思います。
※あらかじめ、対象の文字をdivコンテンツ内に書いたり、いいところで文字をspanで区切っておいたりしておこう。

moji.css

.main h2{
    font-size: 60px;    /* sizeとweightは好み */
    font-weight: bold;
    position: absolute;
    bottom: 20%;        /* どんな位置でdivクラスの中にいるか */
    left: 5%;
}
h2 span{
    display: block;     /* spanで文字を区切る場合に */
    margin-bottom: 1%;
    padding: 3% 3%;
    color: white;
    background-color: black;
    overflow: hidden;
    width: fit-content;
}

おまけのプラスJavaScript編

JavaScriptについて

JavaScriptをWebに搭載すると、様々なことができます。
一番は、やはり「サイトに動きをつけられる」という点です。
そのほかにもポップアップウィンドウや、Ajaxという「ページを読み込まずに、サーバーとデータのやり取りをする」技術も捨てがたいものです。
さらにフレームワークという「全体的な処理の流れを構造化する機能」もあり、WebサイトとJavaScriptはまさに切っても切れない関係にあると言ってもいいでしょう。

ちなみにJavaScriptなんて名前がついていますが、コードを見ると分かるとおりJavaとの関連性はありません。
もともとLiveScriptと呼ばれていたようですが、Javaが当時人気だったせいか、それにあやかるようにJavaScriptと名前を変えたことが由来だそうです。

※jQueryのダウンロード必須。
jQueryはこちらから→jQuery公式サイト

ハンバーガーメニュー

三本線から×になる形態のものです。あらかじめ<ul>などのメニューを書いたリストにクラス名(ここでは.menu)を書いておきましょう。

humberger.js

/* いつもはメニューを非表示に */
$('.menu').hide();
/* ボタンを押したらメニューが表示(activeクラス追加) */
/* 再度押すとメニューを非表示(activeクラス削除) */
$("button").click(function() {
    $('.menu').toggle();
    $(this).toggleClass('active');
});

タイピングアニメーション

ここでは、タイピングをしているように文字が現れるアニメーションを作るCSSとJavaScriptを紹介します。
<p>にはクラスをつけてから、文字を書きましょう。
こちらのサイト(SPIQA NOTE 様)から引用しました。

CSSとJavaScript

style.css

.type {
    font-size: 10px;
    /* 文字の間隔をどうするか */
    letter-spacing: normal;
    /* 文字列があふれる場合に、強制的に改行するか */
    word-break: break-all;
}
/*jsで生成されるspanタグ*/
.typing span{
    display: none;
}

/*|カーソルを表示*/
.type:after {
    content: "|";
    /*  */
    animation: typingCursor .8s ease infinite;
}
@keyframes typingCursor {
    from{
        opacity:0;
    }
    to{
        opacity:1
    }
}

typing.js

//$(window).on('load',fuction(){……
  //テキストごとにspanタグを生成する
  var element = $(".typing");
  var thisChild = ""
  element.each(function () {
    var text = $(this).html();
    var textbox = "";
    text.split('').forEach(function (target) {
      if (target !== " ") {
        textbox += '<span>' + target + '</span>';
      } else {
        textbox += target;
      }
    });
    $(this).html(textbox);
  });

    // タイピングアニメーション
   $(element).each(function () {
      /* 生成したspanタグを取得 */
      thisChild = $(this).children(); 
      thisChild.each(function (i) {
        var time = 100;
        $(this).delay(time * i).fadeIn(time);
      });
  });
//});

あとがき

今回アドベントカレンダーに参加するために記事を書きましたが、すごく難しかったです。
あらかじめCSSかJavaScriptにしようと決めてはいたのですが、いざ書いてみるとなると、何から書けばいいのかすべて吹き飛んだため、締め切りギリギリになるまで記事作りに悩み続けました。
しかもなんか出来が記事というよりメモみたいで頭を抱えたくなりました。よく考えると初期案からしてメモみたいだった気がします。

記事を書く人ってすごいね……。

最後に、ここまで見てくださってありがとうございました。

こんな辺鄙な記事でもWebデザインの参考になれるのなら嬉しい所存です。