1月, 2020 | 「な」のblog

【SVG】WordPressでSVG形式を使う方法

WordPressでSVG形式は初期設定ではサポートされていません。しかしPNGやJPEGにない特性を活かしてはっきり鮮明にロゴなどを配置したい方も多いでしょう。SVGの作り方からメディアライブラリへのアップロードの許可、表示の仕方を書いていきます。文字のアウトライン化は「書式」-「文字のアウトライン化」を選んでクリック。「複製を保存」または「別名で保存」をクリック。形式をSVG形式にして保 […]

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

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>

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

【SVG】WordPressでSVG形式を使う方法

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

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

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

【Adobe MediaEncoder】ogg形式に変換できるようにする

【HTML5】footer要素について

【HTML5】header要素について

サーチコンソールとGoogleアナリティクスを連携する方法

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

HTMLでcssを読み込む方法