HTML5 | 「な」のblog

【CSS+JS】スクロールでふわっと出てくるフェードインの実装方法【jQueryなし】

画像や要素などがスクロールするとふわっと出てくる「フェードイン」の実装方法をまとめます。仕事でやることになって、調べましたが自力でも出来そうだったので、私のようにjQueryに依存しないで実装したいという方のために書きます。ちなみに私はjQueryは個人的に苦手でまったく書けないです…。適当なHTMLを用意しました。ここではh1と内容全体にフェードインさせるクラスを付けました。 JavaScri […]

卒業制作展②

制作テーマ「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシピ集、ショップカードなどを展開。いつまでも乙女心を忘れないすべての女性に捧げる作品。チラシについて苦労した点作業工程の写真を撮るのに、手が汚れているためにかなり苦労しました。手早く作業をする必要のある工程はとくに写真を撮るのが大変でした。また初心者でも手軽に作れるよう、 […]

卒業制作展①

トライデントコンピュータ専門学校で行われた卒業研究制作展終了しました。たくさんのご来場、誠にありがとうございました。私は2日間ともに午前中に作品の案内をさせていただいたのですが、とくに質問の多かった事項についてと、個人的にがんばったところなどをまとめていきたいと思います。制作テーマ「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシ […]

スマホで使いやすい申し込みフォーム③

jQueryです。 $(function(){ $.fn.autoKana(‘#name’, ‘#furi_name’, { katakana : true //true：カタカナ、false：ひらがな（デフォルト） }); //フォーカスされたとき $(“#name”).focus(function(){ $(this).css(“background-color”, “#fff”); $(th […]

スマホで使いやすい申し込みフォーム②

次にCSSはこちら。 @charset “utf-8”; *{ box-sizing: border-box; } html{ font-size: 1em; } body{ margin: 0; padding: 1.2em; font-family: Helvetica, Arial, sans-serif; color: #212121; } h1{ margin: 0; } p{ marg […]

スマホで使いやすい申し込みフォーム①

授業でフォームについて詳しく勉強したので、その改変版を載せます。利用の想定は専門学校の資料請求のフォームです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>フォーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>申し込み情報</h1>
    <form class="h-adr" action="">
        <div class="nameForm">
            <label class="label" for="name"><span class="shimei">氏名</span><span class="required">必須</span></label>
            <input type="text" name="name" id="name" required>
        </div>
        <div class="furiNameForm">
        <label class="label2" for="furi_name"><span class="furi">フリガナ</span><span class="required">必須</span></label>
        <input type="text" name="furi_name" name="furi_name" id="furi_name" required>
        </div>
        <div class="genderForm">
            性別<span class="required">必須</span>
            <label class="gender"><input type="radio" name="gender" value="0" id="man" required>男</label>
            <label class="gender"><input type="radio" name="gender" value="1" id="woman" required>女</label>
        </div>
        </div>
        <div class="gradeFrom">
        学年<span class="required">必須</span>
            <label class="grade"><input type="radio" value="0" name="grade" id="grade1" required>高校1年生</label>
            <label class="grade"><input type="radio" value="1" name="grade" id="grade2" required>高校2年生</label>
            <label class="grade"><input type="radio" value="2" name="grade" id="grade3" required>高校3年生</label>
        </div>
        <div class="schoolNameForm">
            <label class="label3" for="schoolName">学校名<span class="required">必須</span></label>
            <input type="text" id="schoolName" required>
        </div>
    <div class="adr-num">
        <span>住所</span><p class="adr-txt">郵便番号を入力すると自動で住所が入力されます</p>
    <span class="p-country-name" style="display:none;">Japan</span>
        <label class="adr label4" for="adr-num">〒<span class="required">必須</span></label>
        <input type="number" class="p-postal-code" size="7" id="adr-num" required>
    </div>
    <div class="adr-reg">
        <label class="adr label5" for="adr-reg">都道府県<span class="required">必須</span></label>
        <input type="text" class="p-region" id="adr-reg" required>
    </div>
    <div class="adr-loc">
        <label class="adr label6" for="adr-loc">市区町村<span class="required">必須</span></label>
        <input type="text" class="p-locality" id="adr-loc" required>
    </div>
    <div class="adr-str">
        <label class="adr label7" for="adr-str">番地<span class="required">必須</span></label>
        <input type="text" class="p-street-address" id="adr-str" required>
    </div>
    <div class="adr-other">
        <label class="adr label8" for="adr-other">マンション名</label>
        <input type="text" class="p-extended-address" id="adr-other">
    </div>
    <div class="tel">
        <label class="telForm label9" for="tel">電話番号<span class="required">必須</span></label>
        <input type="number" id="tel" required>
    </div>
    <div class="mail">
        <label class="mailForm label10" for="mail">メールアドレス<span class="required">必須</span></label>
        <input type="email" id="mail" required>
    </div>
    <label class="attendant">付き添い（ご家族など）<input type="checkbox" name="attendantCheckbox" value="check" id="attendant"></label>
    <div class="family-wrap">
        <label class="family" for="family1"><input type="radio" name="family" id="family1" value="0">1人</label>
        <label class="family" for="family2"><input type="radio" name="family" id="family2" value="1">2人</label>
        <label class="family" for="family3"><input type="radio" name="family" id="family3" value="2">3人</label>
    </div>
        <label class="contact">お問合せ
        <textarea name="" id="" cols="30" rows="10"></textarea></label>
            <label class="info">個人情報の保護に関する事項
        <input type="checkbox" id="info"></label>
        <input type="submit" id="submit" value="申し込む">
        <div class="telephone">
            <p>お急ぎの方はお電話でも承っております。</p>
        <h2><a href="tel:0000111222">0000-111-222</a></h2>
        </div>
    </form>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="jquery.autoKana.js"></script><!-- ふりがなの自動変換 -->
  <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script><!-- 郵便番号変換 -->
  <script src="script.js"></script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

<!DOCTYPE html>

<head>

</head>

<body>

<h1>申し込み情報</h1>

</div>

</div>

性別<span class="required">必須</span>

</div>

学年<span class="required">必須</span>

</div>

</div>

<span>住所</span><p class="adr-txt">郵便番号を入力すると自動で住所が入力されます</p>

<span class="p-country-name" style="display:none;">Japan</span>

</div>

</div>

</div>

</div>

<label class="adr label8" for="adr-other">マンション名</label>

</div>

</div>

<label class="mailForm label10" for="mail">メールアドレス<span class="required">必須</span></label>

</div>

<label class="attendant">付き添い（ご家族など）<input type="checkbox" name="attendantCheckbox" value="check" id="attendant"></label>

</div>

<label class="contact">お問合せ

<label class="info">個人情報の保護に関する事項

<p>お急ぎの方はお電話でも承っております。</p>

</div>

</form>

</body>

</html>

フリガナと郵便番号は入れると自動入力されるものを使っています。自動入力された部分については入力された時点で背景の色が緑になるようにするなど改善点は多いですが、フォームについてじっくり勉強する機会がありよかったです。次の記 […]

【CSS+JS】スクロールでふわっと出てくるフェードインの実装方法【jQueryなし】

卒業制作展②

卒業制作展①

スマホで使いやすい申し込みフォーム③

スマホで使いやすい申し込みフォーム②

スマホで使いやすい申し込みフォーム①

【HTML5】footer要素について

【HTML5】header要素について

Googleアナリティクスの設置方法

Local Storageについて