What's New Qiita

20200430のHTMLに関する記事は17件です。

  • 投稿日：2020-04-30T19:56:28+09:00

WAI-AREAを利用してアクセシビリティ向上

最近すごく重要視されてるアクセシビリティについて学習した内容書いていこうと思います。
主にキーボード操作とセマンティクスに集中して書いていきたいと思います。

普段フロントエンドを担当していることもありますので、form内のタグやarea-*についても改めて知ることができました。
中には、a11yってゆうキーワードが入ったプラグインやlintなども見かける方も多くいらっしゃるかと思います。
自分もa11yに対応しているプラグインを探すようにしていますし、なければ実装しています。

特に、Vue.jsやReact.jsに対応したプラグインも数多く存在していますし、React.jsはこういったページを設けていますし、推薦プラグインも紹介されています。ご存知な方もいらっしゃるとでしょう。

今回僕が学習したのは、主にシンプルな内容です。

アクセシビリティが必要な理由

アクセシビリティはアクセス可能とゆう意味になります。体が健常者に比べ不自由な方向けだけのように思われますが、実際は違います。健常者でも体が不自由にあってしまう時があるかと思います。
例えば、マウスを使って細かい作業がしづらくなってしまうなど。
全員を同一に思い同じ機会を与えるものになります。とある場所では法律になっているそうです。

セマンティック HTML(意味的 HTML)

ボタンを実装するにあたって、意味がわかるのは

<div>ボタン</div>
<p>ボタン</p>

<button>ボタン</button>

場合によっては変わるかと思いますが、大体が後者になるかと思います。
後者ではフォーカスがあたりますので、キーボード操作だけで操作することができます。
他にも

<a href="#">アンカー</a>

があります。
まだまだたくさんあります。form内のタグはほとんどキーボードによる操作が可能になっていますし、
様々なプラグインでさらに利用しやすくしてます。
主にwebサービスに利用しやすいかと思います。
bootstrapや
react-hooks-formなど

セマンティックにスポットをあてると以下かと思います。

<header>
　ヘッダータグ
 <nav>ナビゲーション</nav>
</header>
 <main>
  <section>各セクション</section>
  <article>独立した括り</article>
　<aside></aside>
 </main>
<footer>ヘッダータグ</footer>

代表的でよく利用するタグかと思います。

WAI-ARIAが必要な理由

支援技術がwebページの内容を正しく詳細にしれるようにするもので、適切な情報を閲覧者に伝えるため。

大きく分類すると、各要素の「Role (役割)」「State (状態)」「Property (特性)」

Roles (役割)
　何をするのかを定義します。
Property (特性)
　要素の性質を定義
State (状態)
　要素の現在の状態を定義

以下が一覧になります。
https://momdo.github.io/wai-aria/states_and_properties.html
https://accessible-usable.net/2014/04/entry_140415.html

以上になります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T18:06:36+09:00

MAMPを使ったWordpressでのWEB制作方法15　初心者向け

MAMPを使ったWordpressでのWEB制作方法15　初心者向け

今回で最後の記事になります。
前回の記事はこちら

MAMPを使ったWordpressでのWEB制作方法14　初心者向け

これまで固定ページはpage.phpでレイアウトを共通化してきました。

しかし実際には自由にレイアウトが必要な場面や
VSコードなどのエディタ側でページを制作するほうが
都合がいいことが多いと思います。

そこでレイアウトが自由なページを追加してみましょう。

オリジナルテンプレートの作成

今回はサービス２という内容でオリジナルテンプレートを作成します。

まずpage.phpをコピーしてpage-service2.phpというファイルを作成します。
一番上にphpでテンプレートの名前を記述します。

page-service2.php
<?php
/*
Template Name: サービス2
*/
?>

<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">
      <h2><?php the_title(); ?></h2>

      <?php if(have_posts()): while(have_posts()): the_post();?>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>

      <!--ページの条件分岐-->
      <?php if (is_page(array('63'))) {?>

      <?php }else{ ?>
        <a class="btn" href="contact.html"><button class="btn1">お問い合わせ</button></a>
      <?php } ?>


    </div><!--conLend-->

<?php get_sidebar(); ?>
  </div>
<?php get_footer();?>

次に管理者画面から新規固定ページを以下で作成しましょう。
パーマリンクはservice2、ページ属性からテンプレートをサービス２に設定します。
入力が終わったら公開してページを表示します。
Image from Gyazo

すると以下のようにサービス２のページが表示されます。
Image from Gyazo

このページはpage-service2.phpのファイルと直接つながっています。
エディタで中身を編集してみましょう。

page-service2.php
<?php
/*
Template Name: サービス2
*/
?>

<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">
      <h2><?php the_title(); ?></h2>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
        <p>サービス２テスト</p>
    </div><!--conLend-->

<?php get_sidebar(); ?>
  </div>
<?php get_footer();?>

ブラウザで表示すると
Image from Gyazo
このようにファイルの内容が直接参照されます。

オリジナルテンプレートを使用すれば
固定ページのデザインをエディタから直接作成できます。
作りたいサイトの構成によって使い分けをしましょう。

以上でMAMPを使ったローカル環境でのテーマ作成は完了です。
ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T17:45:41+09:00

Chromeで複数のローカルHTMLファイルを開く手順

はじめに

Google Chromeで複数のローカルHTMLファイルを開く手順です。

参考

https://qastack.jp/superuser/833312/how-to-open-multiple-local-html-files-in-google-chrome-at-once
https://oshiete.goo.ne.jp/qa/8860259.html

手順

  1. 開きたい複数のローカルHTMLファイルを1つのフォルダに入れる。

  2. 同じフォルダに、新しいテキストファイルを作成し、以下を入力。
    start chrome.exe --new-window
    start chrome.exe filename_1.html
    start chrome.exe filename_2.html
    　　・・・
    start chrome.exe filename_n.html

  3. ファイル拡張子を.batに変更して、実行（ダブルクリック）

  4. すべてのファイルが異なるタブで開く。
    ※最初の3ファイルは別のウィンドウで開きました。open速度の問題なのか。。。解決策をご存知の方教えてください！

おわりに

plotlyのグラフをhtmlで10-20個出力した後の確認作業で、いちいちダブルクリックorブラウザへドラッグが面倒だったので。
自分と同じように困っている人がいるかなと思って記事にしました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T17:39:42+09:00

MAMPを使ったWordpressでのWEB制作方法14　初心者向け

MAMPを使ったWordpressでのWEB制作方法14　初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法13　初心者向け

メニュ項目の追加

現在メニューバーには事業内容、会社概要、お問い合わせが表示されています。
ここにカテゴリーへのリンクを追加しましょう。

Image from Gyazo

管理者画面/外観メニューを開きカテゴリーから項目を追加しましょう

Image from Gyazo

並び替えや削除も可能です。

Image from Gyazo

他にもページネーションやパンくずリストなど
プラグインの導入によって簡単に機能を追加できますので
必要なものを都度いれながら制作していきましょう。

次回はオリジナルテンプレートの作成をします。

MAMPを使ったWordpressでのWEB制作方法15　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T17:18:49+09:00

MAMPを使ったWordpressでのWEB制作方法13　初心者向け

MAMPを使ったWordpressでのWEB制作方法13　初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法12　初心者向け

今回はお問い合わせページを作成します。
contact7というプラグインを使って設定しましょう。

お問い合わせページの作成

現在お問い合わせページは下のようにマークアップされています。
当然ですが送信ボタンを押しても何も反応しません。

またpage.phpのシートでレイアウトを共通化しているため
お問い合わせページへのリンクボタンも表示されています。

Image from Gyazo

まずはContact form7のプラグインを入れるため
新規追加から検索をしてみます。

Image from Gyazo

すると拡張機能も含めたcontact7関連のプラグインが一覧で出てきてしまいます。

このような場合はgoogle検索をしてプラグインの本体を探します。

contact7
ここからダウンロードをしましょう

DLしたzipファイルを管理画面からアップロードします。

Image from Gyazo

アップロードできたら左タブのお問い合わせを開いて
新規コンタクトフォームを追加すると下の画面になります。
こちらの項目を設定していきましょう。

Image from Gyazo

本文の部分に作成したお問い合わせ（contact.html）の
tableの中身を貼り付けましょう。

Image from Gyazo

この状態から各項目を設定していきます。

フォームのテンプレートから使用したい項目を選び
必要事項を記述するとタグが生成されます。

名前を設定してみましょう。

nameという名前でタグを作り[text name]をコピーします。

Image from Gyazo

名前部分のinputタグと入れ替えるだけです。
Image from Gyazo

各項目を設定して保存しましょう。
送信ボタンにはクラスを付与しておきます。

<table>
<tbody>
<tr>
<th>お名前</th>
<td>[text c_name]</td>
</tr>
<tr>
<th>電話番号</th>
<td>[text tel placeholder "090-1111-1111"]</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>[email c_email]</td>
</tr>
<tr>
<th>お問い合わせ項目</th>
<td>
[select menu-377 "選択してください" "サービスについて" "料金について" "弊社について"]
</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td>
[textarea info]
</td>
</tr>
<tr>
<td colspan="2">
[submit class:btn1 "送信"]             
</td>
</tr>
</tbody>
</table>

続いてメールタブにて送信先や送信元の情報を設定します。

Image from Gyazo

送信先：ユーザーがメールを送付するアドレスになります。つまり管理者アドレスです。
送信元：通知に使うアドレスです。送信元と同じで問題ありません。
題名：お問い合わせがありましたなどに設定しましょう
メッセージ本文：受け取る問い合わせ内容を設定しましょう。

自動返信はメール２の部分に設定することで
問い合わせに自動返信ができます。

必要事項を記入し保存をすると以下のショートコードが発行されます。

Image from Gyazo

これをコピーして固定ページ/お問い合わせのtableタグと入れ替えましょう。

Image from Gyazo

このような形になります。

Image from Gyazo

動作確認をしましょう。
空の状態ですが送信ボタンを押すと動作していることがわかります。

ページの条件分岐

お問い合わせページへのリンクは不要なので
条件分岐を設定しましょう。

page.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">
      <h2><?php the_title(); ?></h2>

      <?php if(have_posts()): while(have_posts()): the_post();?>
      <?php the_content(); ?>
      <?php endwhile; endif; ?>

      <!--ページの条件分岐-->
      <?php if (is_page(array('63'))) {?>

      <?php }else{ ?>
        <a class="btn" href="contact.html"><button class="btn1">お問い合わせ</button></a>
      <?php } ?>


    </div><!--conLend-->

<?php get_sidebar(); ?>
  </div>
<?php get_footer();?>

ページのIDがお問い合わせページの６３番（ご自身の環境に合わせてください。）
だった場合に何も表示しないという記述を追加しました。

ブラウザを再読込して確認しましょう。
Image from Gyazo

お問い合わせページの完成です。

以上でサイトの大枠は完成しました。

次はメニュー項目の追加をします。

MAMPを使ったWordpressでのWEB制作方法14　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T15:58:02+09:00

MAMPを使ったWordpressでのWEB制作方法12　初心者向け

MAMPを使ったWordpressでのWEB制作方法11　初心者向け

今回は詳細ページの作成です。
前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法11　初心者向け

詳細ページの作成

詳細ページもレイアウトは統一されているのでまずは
ヘッダー、フッター、サイドバーと表示部分が空になった
フレームだけを用意します。

single.php
<?php get_header(); ?>

    <div class="wrapper">
    <div id="conL">


    </div><!--conLend-->
    <?php get_sidebar(); ?>

  </div><!--wrapperend-->

<?php get_footer();

前回の投稿一覧ページ同様以下のif文を作成して
タイトルと中身を取得できるようにタグを設置します。

single.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">

　<!--loopstart-->
　<?php if(have_posts()): while(have_posts()): the_post();?>
　　<h2><?php the_title(); ?></h2>
　　<!--loopcontent-->
　　<?php the_content(); ?>
　<!--loopend-->
　<?php endwhile; endif; ?>
　<a class="btn" href="<?php echo home_url(); ?>/contact"><button class="btn1">お問い合わせ</button></a>


    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->

<?php get_footer();

一覧ページから詳細ページを開くと投稿の中身が表示されます。
Image from Gyazo

中身は表示できましたが日付が入っていないので追加します。
タイトルの下にタグを入れましょう。

single.php
<?php get_header(); ?>

  <div class="wrapper">
    <div id="conL">

　<!--loopstart-->
　<?php if(have_posts()): while(have_posts()): the_post();?>
　　<h2><?php the_title(); ?></h2>
　　<p><?php the_time('Y/m/d'); ?></p>
　<!--loopcontent-->
　<?php the_content(); ?>
　<!--loopend-->
　<?php endwhile; endif; ?>
　<a class="btn" href="<?php echo home_url(); ?>/contact"><button class="btn1">お問い合わせ</button></a>


    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->

<?php get_footer();

以上で投稿ページは完成です。

次はお問い合わせページを作成します。
MAMPを使ったWordpressでのWEB制作方法13　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T15:23:02+09:00

MAMPを使ったWordpressでのWEB制作方法11　初心者向け

MAMPを使ったWordpressでのWEB制作方法11　初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法10　初心者向け

今回は投稿一覧表示の作成をします。

が、その前にパーマリンク（url)の設定を変更しておきましょう

パーマリンクの設定

管理画面左タブの設定/パーマリンク設定より設定画面を開きます。

デフォルトは日付と投稿名になっています。

これを以下のカスタム構造に変えましょう。

カテゴリー名/投稿名がパーマリンクに変更されました。
Image from Gyazo

投稿一覧ページの作成

投稿一覧ページはarchive.htmlに作成していますので
archive.htmlの中身をarchive.phpへ貼り付けます。

ヘッダー、フッター、サイドバーの共通レイアウトは
wordpressタグで呼び出すよう変更しておきましょう。

この状態でurlの末尾にblogと加えるとパーマリンクが設定されているので
以下のarchive.phpの中身が表示されます。
Image from Gyazo

blogだけでなくinformationの一覧も表示されていますので修正していきます。
今回はブログ、業務について、リリースの３つを独立した一覧として分けます。

まずarchive.phpのコンテンツ部分に以下の記述をしましょう

archive.php
<?php if (in_category(array('1'))) {?>
　「Aがはいります」
<?php } elseif(in_category(array('2'))){ ?>
　「Bがはいります」
<?php }else{ ?>
  「Zがはいります」
<?php } ?>

こちらはカテゴリーidが１の場合は「Aが入ります」を表示
カテゴリーIDが2の場合は「Bが入りますを表示」
それ以外は「Zが入ります」を表示するというif文です。

それぞれの部分に前回index.phpで作った
一覧部分のパーツをコピペして書き換えます。
少し複雑なので全体を載せておきます。

archive.php
<?php get_header(); ?>
    <div class="wrapper">
    <div id="conL">

<?php if (in_category(array('9'))) {?>

      <div class="information"><!--blogstart-->
        <h2>Blog</h2>
        <dl>
          <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

          </dl>
        </div><!--blogend-->

<?php } elseif(in_category(array('8'))){ ?>

     <div class="information"><!--informationstart-->
        <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=8');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

        </dl>
      </div><!--informationend-->

<?php }else{ ?>

      <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=8');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

        </dl>
      </div><!--informationend-->

<?php } ?>

    </div><!--conLend-->
    <?php get_sidebar(); ?>
  </div><!--wrapperend-->
<?php get_footer();

そして最後に各コンテンツのループの開始と終わりをいかに書き換えます。
<!--loopstart><!--loopend-->の上を書き換えています。
以下完成形です。

archive.php
<?php get_header(); ?>

    <div class="wrapper">
    <div id="conL">

<?php if (in_category(array('9'))) {?>
      <div class="information"><!--blogstart-->
        <h2>Blog</h2>
        <dl>

          <!--loopstart-->
<?php if(have_posts()): while(have_posts()): the_post();?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

        <!--loopend-->
<?php endwhile; endif; ?>

          </dl>
        </div><!--blogend-->

<?php } elseif(in_category(array('8'))){ ?>
  <div class="information"><!--informationstart-->
        <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
<?php if(have_posts()): while(have_posts()): the_post();?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
<?php endwhile; endif; ?>
        </dl>
      </div><!--informationend-->

<?php }else{ ?>

  <h2>INFORMATION</h2>
        <dl>
        <!--loopstart-->
<?php if(have_posts()): while(have_posts()): the_post();?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>

        <!--loopend-->
<?php endwhile; endif; ?>
        </dl>
      </div><!--informationend-->

<?php } ?>

    </div><!--conLend-->
    <?php get_sidebar(); ?>

  </div><!--wrapperend-->

<?php get_footer();

これでブログ、リリース、業務についての一覧ページを
独立して表示できるようになりました。
urlと結果一覧が正しいことを確認してください。

Image from Gyazo

Image from Gyazo

Image from Gyazo

次回は詳細ページを作成します。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T14:40:59+09:00

MAMPを使ったWordpressでのWEB制作方法10　初心者向け

MAMPを使ったWordpressでのWEB制作方法10　初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法9　初心者向け

前回設定したブログ一覧にサムネイルを設定します。

ブログのサムネイル設定

wordpressの初期設定ではブログの投稿/編集画面には
サムネイル画像を設定する項目がありません。

Image from Gyazo

まずはfunction.phpファイルに機能を追加します。

function.php
<?php
//カスタムメニュー
register_nav_menus( //メニュー機能をオンにする
array(
'place_global2' => 'グローバル', //“メニュー英語名” =>”メニュー名”,
'place_utility' => 'ユーティリティ',
'place_sidebar' => 'サイドメニュー',
'place_footer' => 'フッター',
)
);

//サムネイル機能追加
add_theme_support('post-thumbnails');
add_image_size('thumbside', 85, 85, true);
?>

サムネイル機能追加の下の２行をphpの閉じタグの中に追記します。

管理画面を再読込すると右のタブに画像投稿機能（アイキャッチ画像）が追加されます。

Image from Gyazo

ここにアイキャッチに使用する画像を設定して更新をしましょう。

Image from Gyazo

アイキャッチ画像を設定できました。
Image from Gyazo

index.phpのimgタグを以下に書き換えましょう。
このときthumbside部分はfunctions.phpの記述と
同じ名前に設定をしてください。

index.php
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <!--書き換え前-->
                <img src="<?php echo get_template_directory_uri();?>/images/cat_3.jpeg">
　　　　　　　　　 <!--書き換え後-->
                <?php the_post_thumbnail('thumbside'); ?>
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

投稿ごとのサムネイル画像が表示できました。
Image from Gyazo
やや横に伸びているので横幅を50pxに調整します。
function.phpに記述した数字部分が画像サイズです。
Image from Gyazo

次回は投稿一覧を表示できるようにファイル作成します。

次の記事はこちら
MAMPを使ったWordpressでのWEB制作方法11　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T13:53:04+09:00

MAMPを使ったWordpressでのWEB制作方法9　初心者向け

MAMPを使ったWordpressでのWEB制作方法9　初心者向け

今回から投稿ページの作成をしていきます。

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法8　初心者向け

投稿機能のカテゴリー作成

カテゴリーとは投稿記事をグループ化した１単位です。
以下の例では３つのカテゴリーを作成しています。

①業務について
②リリース
③ブログ

業務についてとリリースについてはinfomationとして
同じエリアに投稿をまとめてあります。

ブログは専用のエリアを設置しているという作りです。

Image from Gyazo

では早速作っていきましょう。
まずはwordpressの管理画面に入って左のタブから
投稿/カテゴリーより以下のページに入ります。

Image from Gyazo

名前にカテゴリー名をスラッグにはカテゴリーを示す単語を設定します。

今回はカテゴリー名を"業務について"としてスラッグを"work"として設定してみましょう。

Image from Gyazo

同様にカテゴリー名"リリース"、スラッグ"release"とカテゴリー名"ブログ"、スラッグ"blog"を作っておきましょう。

作り方は自由ですが管理者が覚えやすいキーワードを設定するようにしましょう。

デフォルトで表示される未分類というカテゴリーは使用上削除ができません。
気になる方はカテゴリーを作る際に編集をして必要なカテゴリーに書き換えましょう。

テスト投稿

wordpress管理者画面より投稿/新規投稿画面から以下のようにテスト投稿します。
今回はリリースのテストなのでカテゴリーはリリースを選びましょう。

Image from Gyazo

確認も兼ねて各カテゴリーの記事を２〜3個作っておきましょう。
Image from Gyazo

今の段階で管理者画面の投稿を表示から確認しても画面は真っ白です。
これは投稿ページのファイル未作成のためなので
次の過程で表示されるようにPHPファイルを設定していきます。

投稿結果をトップページでループ設定する

今回制作したトップ画面では1つの投稿を4回ループして表示しています。
順を追ってindex.phpファイルを書き換えていきましょう。
Image from Gyazo

まずはリリースをループして取得するため
以下にindex.phpを書き換えます。

index.php
<!--書き換え前-->
      <div class="information"><!--informationstart-->
        <h2>INFORMATION</h2>
        <dl>
          <div class="contents_box">
            <dt>2013-08-04</dt>
            <dd>
              <span class="tab tag_gyoumu">業務について</span>
              <a href="<?php home_url(); ?>single">2012年（平成24年）度の採用情報</a>を更新しました。
            </dd>
          </div>
          <div class="contents_box">
            <dt>2013-08-03</dt>
            <dd>
              <span class="tab tag_release">リリース</span>
              <a href="<?php home_url(); ?>single">制作実績のページ</a>を更新しました。
            </dd>
          </div>
          <div class="contents_box">
            <dt>2013-08-02</dt>
            <dd>
              <span class="tab tag_gyoumu">業務について</span>
              <a href="<?php home_url(); ?>single">2012年（平成24年）度の採用情報</a>を更新しました。

<!--書き換え後-->
        <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>
          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <span class="tab <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>を更新しました。
            </dd>
          </div>
        <!--loopend-->
        <?php endforeach; ?>

ループ設定したので２記事目以降は削除します。
以下は追記した箇所の説明です。

'numberposts=4&category=9'
numberposts=4　記事の表示数
category=9　取得するカテゴリーのID

<?php the_time('Y-m-d'); ?>
日付を取得しています

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>
カテゴリーを取得してclassに付与しています。検証ツールでクラス名を確認しましょう。

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
カテゴリー名を取得しています。

<?php the_title(); ?>
記事のタイトルを取得しています。

<?php the_permalink(); ?>
パーマリンクを取得しています。

カテゴリーIDは管理者画面のカテゴリー一覧画面で
カテゴリーにマウスホバーすると一番下にIDが表示されます。
※以下はID７です。ご自身の環境に合わせて設定ください。

スクリーンショット 2020-04-30 10.57.49.png

ここでブラウザーをリロードして結果を表示してみます。
リリースはテスト投稿を２つしていないのですべて表示されています。
※リンク先のファイルはまだ作成していないので真っ白な画面です。
Image from Gyazo

同じようにブログ部分もループしておきます。
カテゴリーのIDはブログのIDに変更しましょう。
※写真についてはサムネイルとして後ほど設定します。

index.php
      <div class="information"><!--blogstart-->
        <h2>Blog</h2>
        <dl>

          <!--loopstart-->
        <?php
          $infoPosts = get_posts('numberposts=4&category=9');
          foreach($infoPosts as $post): 
        ?>

          <div class="contents_box">
            <dt><?php the_time('Y-m-d'); ?></dt>
            <dd>
              <div class="b_img">
                <img src="<?php echo get_template_directory_uri();?>/images/cat_3.jpeg">
              </div>
              <div class="b_right">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </dd>
          </div>

        <!--loopend-->
        <?php endforeach; ?>

          </dl>
        </div><!--blogend-->

これでトップページに投稿をループして一覧表示できるようになりました。

次回はサムネイルの設定です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T13:05:21+09:00

jQueryでスクロールの時にアニメーションを出す方法

jQueryでスクロールのたびにアニメーションを使うには、
Waypoints.jsとAnimate.cssという2つのライブラリを併用します。

Waypoints.jsを読み込み

Waypoints.jsはスクロールが一定位置まで来た時に
特定のJavaScriptを実行するためのライブラリです。

Waypoints.jaからdownloadボタンからダウンロード。

libフォルダの中にあるjquery.waypoints.min.jsというファイルだけを
アニメーションを作業中のHTMLと同じディレクトリに格納し読み込みを行う。

index.html
<!-- </body>の直前に置く -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- jqueryの読み込みの下に記入 -->
<script src="jquery.waypoints.min.js"></script>

jQueryで要素を選択してから.waypoint()を呼び出します。

main.js
//box部分が.waypoint()を呼び出す要素
$(".box").waypoint({
  handler(direction){
    //.boxが画面内に入った時に実行される処理をここに記入
    //direction引数には、下方向のスクロール時は"down"
    //上スクロール時は"up"
    },
  //要素が画面の上端がどの位置に来た時にhandlerを実行するのか
　//0%なら画面の一番上、50%なら画面の真ん中、100%なら画面の一番下で実行
  offset: "50%",
});

Animate.cssを読み込み

Animate.cssはHTM要素にアニメーションクラスを付けるだけで
簡単にアニメーションがつくライブラリです。

Animate.cssから
サイトの「Download Animate.css」を右クリック
→別名で保存し、ダウンロードしたanimate.cssを
作業中のHTMLと同じディレクトリに格納。

そして、HTML内で格納

index.html
<!-- <head>内に置く -->
<link rel="stylesheet" href="animate.css">

スクロールの時にアニメーションを出す方法

アニメーションをスクロール時に出すには
Waypoints.jsとAnimate.cssの組み合わせが必要です。

アニメーションを加えたい部分にanimatedクラスと
fadeInUpなど動きのアニメーションのクラスをつける。
(Animate.cssからアニメーションは確認できます)

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Animate Test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
  <style>
    body {
      background: repeating-linear-gradient(0deg,
        #ffffff,
        #ffffff 40px,
        #dedede 40px,
        #dedede 80px);
    }

    .boxes {
      margin: 80vh auto;
    }

    .box {
      border: 1px solid #000;
      width: 10em;
      padding: 10px;
      margin: 2em auto;
      text-align: center;
    }

    .animated {
      /* 最初から非表示 */
      opacity: 0;
    }

  </style>
</head>

<body>
  <div class="boxes">
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
  <script src="main.js"></script>
</body>

</html>

今回は、HTML側ではanimatedクラスだけをつけて
jQuery側で下へスクロールをした際にfadeInUpクラスを付けてみます。

main.js
//box部分が.waypoint()を呼び出す要素
$(".animated").waypoint({
  handler(direction){
    if(direction === "down") {
    $(this.element).addClass("dadeInUp");

    //waypointoを削除することでこれ以降handlerが呼ばれなくなる
    this.destroy();
    }
  },
  //画面の一番下に来たらhandlerを実行
  offset: "100%",
});

アニメーションの繰り返し

infiniteクラスを追加することでアニメーションが無限にループされ続けます。

index.html
<div class="box animated infinite fadeInUp">box</div>

スクロールを繰り返した場合も
アニメーションを繰り返す方法については
jQueryでスクロールのたびにアニメーションを繰り返す方法に書きましたので
参考にしてください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T12:28:34+09:00

jQueryでスクロールのたびにアニメーションを繰り返す方法

jQueryでスクロールのたびにアニメーションを使うには、
Waypoints.jsとAnimate.cssという2つのライブラリを併用します。

addclassとremoveClassを記入することでスクロールのたびに
アニメーションを動かすことが可能です。

Waypoints.jsを読み込み

waypoints.jaのdownloadボタンからダウンロード。

libフォルダの中にあるjquery.waypoints.min.jsというファイルだけを
アニメーションを作業中のHTMLと同じディレクトリに格納し読み込みを行う。

index.html
<!-- </body>の直前に置く -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="jquery.waypoints.min.js"></script>

Animate.cssを読み込み

Animate.cssから
サイトの「Download Animate.css」を右クリック
→別名で保存し、ダウンロードしたanimate.cssを
作業中のHTMLと同じディレクトリに格納。

そして、HTML内で格納

index.html
<!-- <head>内に置く -->
<link rel="stylesheet" href="animate.css">

スクロールのたびにアニメーションを繰り返す方法

アニメーションを加えたい部分にanimatedクラスと
fadeInUpなど動きのアニメーションのクラスをつける。
(Animate.cssからアニメーションは確認できます)

アニメーションを繰り返すために、
その都度アニメーションクラスを消すために
main.js側でremoveClassが必要です。

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Animate Test</title>
  <!-- Animate.cssの読み込み -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
  <style>
    body {
      background: repeating-linear-gradient(0deg,
        #ffffff,
        #ffffff 40px,
        #dedede 40px,
        #dedede 80px);
    }

    .boxes {
      margin: 80vh auto;
    }

    .box {
      border: 1px solid #000;
      width: 10em;
      padding: 10px;
      margin: 2em auto;
      text-align: center;
    }

    .animated {
      /* 最初から非表示 */
      opacity: 0;
    }

  </style>
</head>

<body>
  <div class="boxes">
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
    <div class="box animated">box</div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Waypoints.jsを読み込む -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
  <script src="main.js"></script>
</body>

</html>
main.js
/**
 * animatedクラスを持つ要素が画面内に入ったら
 * Animate.cssのfadeInUpエフェクトを適用
 */
$('.animated').waypoint({
  handler(direction) {
    if (direction === 'down') {
      $(this.element).addClass('fadeInUp');
      /* removeClassをつけることで繰り返しアニメーションcssが繰り返される */
      $(this.element).removeClass("fadeOutUp")
    }else if (direction === "up"){
      $(this.element).addClass("fadeOutUp")
      /*上にスクロール時にfadeInUpクラスが削除される */
      $(this.element).removeClass("fadeInUp")
    }
  },
  /**
   * 要素の上端が画面のどの位置に来たときにhandlerメソッドを呼び出すか指定
   * 0%なら画面の一番上、100%なら画面の一番下に来たときに呼び出される
   */
  offset: '50%',
});

addClassとremoveClassをセットにすることで
スクロールを何度繰り返してもアニメーションが反映されました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T12:01:52+09:00

HTML5のcanvas要素を使って図形を描く

始まる前に

今回はHTML5のcanvasを使って簡単な図形を描いてみたいと思います。

描画する図形

f81fd2e4c52864042852c112ce927ae2.png

ソースコード

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        var ctx;
        function init() {
            var canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");

            //コンテキストの設定
            ctx.strokeStyle = "#FF0000";
            ctx.fillStyle = "#00FF00";
            ctx.lineWidth = 10;
            ctx.lineCap = "round";
            ctx.shadowColor = "#000000";
            ctx.shadowBlur = 20;

            //線を引く
            ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.lineTo(180, 250);
            ctx.stroke();
            //矩形を塗りつぶす
            ctx.fillRect(300, 100, 100, 150);
            //矩形を描く
            ctx.strokeRect(500, 100, 100, 150);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="canvas" width="700" height="400"></canvas>
</body>
</html>

描画の手順

  1. HTMLでcanvas要素を定義
  2. JavaScriptでcanvas要素を取得
  3. canvas要素からコンテキストを取得
  4. コンテキストに色や線の太さなどを設定
  5. コンテキストに対して線や矩形などの描画を行う

ソースの説明

HTMLではcanvas要素を定義します。

<canvas id="canvas" width="700" height="400"></canvas>

ここで注意してほしいのは幅をwidth属性で,高さをheight属性で指定することです。

この指定が正しくなされてないと意図した大きさで描画されないこともありますので注意が必要です。

JavaScriptでは8列の

var canvas = document.getElementById("canvas");

でcanvasへの参照を取得し、次に9列の

ctx = canvas.getContext("2d");

でコンテキストを取得します。このctxが絵筆などの情報を格納するオブジェクトとなります。

多くのプログラムでは、コンテキストをctxやcontextといった広域変数に格納するのが主流です。

引数に「2d」とありますが、現在のHTML5では「2d」しか指定出来ません。

コンテキストを取得したらプロパティ（絵筆の属性）を設定します。（列11-17）

主なプロパティは以下の通りです。

プロパティ 内容
ctx.strokeStyle 線や輪郭の色
ctx.fillStyle 塗りつぶしの色
ctx.lineWidth 線の幅
ctx.lineCap 線の終端の形状で、butt、round、squreの値が使用される
ctx.shadowColor 現状の影の色
ctx.shadowBlur 影に適用するぼかす範囲

コンテキストにプロパティを設定した後、線、矩形の塗りつぶし、矩形を描画しています。

描画する際に筆を動かすようにcanvasでは必ず「パス」と呼ばれる軌跡を設定します。

そのパスを初期化するのが「beginPath()」です。

「moveTo()」で筆を下ろし、「lineTo()」で筆を動かします。

その後、「stroke()」で初めて線が描画されます。

ちなみに、「fill()」では「パス」で囲まれた範囲が塗りつぶされます。

「fillRect()」と「strokeRect()」は名前から予想できると思いますが、塗りつぶした矩形の描画をしてくれます。

座標系はマウスイベントと同じく、canvasの左上を原点(0,0)、右方向にx軸、下方向にy軸となります。

引用 : Dripcoke

(Webゲーム開発)canvasの基本-(1)-canvas要素で図形を描く

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T09:23:19+09:00

webpackでpugのmeta情報を動的に出し分ける方法

webpackのみでpugを含めた開発環境を作ろうとしたとき、問題になりやすいのがmeta情報の出しわけかと思います。
webpackで環境を作った場合、pugもloader経由になるので個別にdataを渡しにくいのが問題になるためです。

この問題をどう解決しているかネットで探ると、出てくるのが二つのパターンだと思います。

パターン１　pugファイル上でJSONのキーを設定して出し分ける方法

https://tsudoi.org/guide2019/detail/3.html

こちらの記事にあるように各ページにjsonのキーを埋め込んで、JSONからデータを取得するもの

- var page = pagelist['pagelist'];

このパターン比較的スマートだと思うのですが、各ページに自分でキーを埋め込む必要性があるので、コピペでそのまま変更忘れなどのヒューマンエラーが発生する可能性があります。
gulp-dataだとこの辺を自動で解決できるので難を示す人もいるんじゃないでしょうか。

パターン２　globuleなどを使いHtmlWebpackPluginでdataにJSON情報を埋め込む方法

【脱gulp】webpackでpugを使う。jsonで一括ビルドも。

こちらの記事にあるように、各entryに対してHtmlWebpackPluginでJSONデータを埋め込んで取得すもの

documents.forEach((document) => {
  const replaceJson = document.replace('_template', '_data').replace('.pug', '.json')
  const json = require(replaceJson)
  Object.keys(json).forEach((f) => {
    const fileName = f
    app.plugins.push(
      new HtmlWebpackPlugin({
        filename: `${dirName}/${fileName}.html`,
        template: document,
        data: json[f],
      })
    )
  })
}

この方法だと動的に埋め込まれるので、パターン１のようなヒューマンエラーは無く一見よさそうに見えるのですが、これにも欠点があります。
webpackのentryにpugを全部突っ込むので、コンソールに大量のログが出ます。

自分も Webpackを頑張って設定して、すごい静的サイトジェネレータとして使おう を参考に作ったことあるのですが、ページが増えるほどビルドするたびに恐ろしいログが流れます（１ページ１行どころではないです。HtmlWebpackPluginを入れるとさらにヤバい事になります）。デプロイ位なら良いのですが開発中だとエラーを追うのも結構しんどいです。
pugを含める環境を作る場合は webpackだけでpugをビルドする環境を作る にあるような、entryするjsの中で pugをimportしてextructする形 にする方がお勧めです。
entryが少なくなり全体の流れるログをかなり減らす事が出来ます。

どちらも欠点があるので別の方法を紹介したいと思います。

パターン３　pug-html-info-loader を使用してpugのローカル変数からJSONで出し分ける方法

パターン１で各ページに自分で埋め込まなきゃいけなかったものを、自動で埋め込めるようにする方法です。

既存にあるpug系loaderだとパス情報をうまく取得する方法が見つからなかったので、pug-html-loaderをカスタマイズして pug-html-info-loader を作りました。

pug-html-loaderの代わりに使用すると、パス情報(pathInfo)をローカル変数として自動的にセットすることができます。
変更内容自体はpug-html-loaderに、ローカル変数を追加しているだけなので、使い方は一緒です。

pug-html-info-loaderのローカル変数で取得できるpathInfoの情報

例
optionsでbasePathをsrc/baseDir/の位置に設定した場合に
src/baseDir/first/second/page.pug で取れるpathInfoの情報

【 pathInfo.pug 】 → first/second/page.pug
【 pathInfo.html 】 → first/second/page.html
【 pathInfo.dir 】 → first/second/
【 pathInfo.parent 】 → second
【 pathInfo.basename 】 → page
【 pathInfo.htmlname 】 → page.html
【 pathInfo.pugname 】 → page.pug

この【 pathInfo.html 】などをキーにしたjsonなどを作成することで、動的にmeta情報や他に使用したい情報をpugから取得することが出来ます。他にもparentやbasenameをページのclassとして利用したりできると思います。

具体的なmetaの設定方法

各ページに設定するmetaのjsonを以下のような形で作ります。

【 global 】に共通のmeta情報
【 local [ pathInfo.htmlになるキー ] 】に個別のページmeta情報

meta.json
{
  "global": {
    "title": "global title",
    "description": "global description",
    "og_url": "global og_url",
    "og_image": "global og_image",
    "og_siteName": "siteName",
    "og_type": "website",
  },
  "local": {
    "path/to/page1.html": {
      "title": "Page1 title",
      "description": "Page1 description",
      "og_url": "Page1 og_url",
      "og_image": "Page1 og_image"
    },
    "path/to/page2.html": {
      "title": "Page2 title",
      "description": "Page2 description",
      "og_url": "Page2 og_url",
      "og_image": "Page2 og_image"
    }
  }
}

webpackの設定

webpack.conf.js
const path = require('path')
const metadata = require('./meta.json')

module.exports = {
  module: [{
    rules: [
      {
      test: /\.pug/,
      use: [
        'html-loader',
        {
          loader: 'pug-html-info-loader',
          options: {
            data: {
              globalConf:metadata['global'],
              localConf :metadata['local']
            }, //meta.jsonのglobalとlocalをそれぞれの変数としてセットする
            basePath: path.resolve(__dirname, 'src')
            // 基準になるパスの位置をsrcフォルダに設定
          }
        }
      ]
    }]

layout用のpugファイルを以下のようにします。

layout.pug
- var config = localConf[pathInfo.html] ? localConf[pathInfo.html] : globalConf ;

doctype html
html(lang='ja')
  head
    meta(charset='utf-8')
    title #{config.title}
    meta(name='description', content=config.description)
    meta(property='og:title', content=config.title)
    meta(property='og:site_name', content=globalConf.og_siteName)
    meta(property='og:description', content=config.description)
    meta(property='og:url', content=config.og_url)
    meta(property='og:image', content=config.og_image)
    meta(property='og:type', content=globalConf.og_type)

このように設定することで、以下のように出し分けることが可能になります。

【 localConf 】に【 pathInfo.html 】が設定されているページ → 個別meta情報
【 localConf 】に【 pathInfo.html 】が設定されていないページ → 共通のmeta情報

組み込んだサンプル

webpackのみでビルドする環境を作る（pug, sass, babel）で紹介されている環境に、
pug-html-info-loader でmeta情報を動的に出す方法で改造したものをgitに上げてあります。
触ってみたい方は こちら を試してみてください。

JSONのlocalになる部分をspreadsheetからGASでjsonを作れる仕組みをつくっておくと、より使いやすくなると思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T05:18:31+09:00

初心者によるプログラミング学習ログ 303日目

100日チャレンジの303日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
303日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T02:15:50+09:00

【HTML・JavaScript】画面表示までの処理順序

概要

HTMLファイルを読み込んでからブラウザに表示されるまでのJavaScriptの処理の流れをまとめました。

用語の確認

JavaScriptの処理順序

  1. windowオブジェクトの生成
  2. Documentオブジェクトの生成
  3. HTMLを記述順に構文解析(パース)
  4. <script>要素を構文解析(パース), エラーがなければコードを同期実行
  5. HTMLパース完了
  6. 外部リソース読み込み
  7. ユーザー定義イベントなどのイベント発生

1. windowオブジェクトの生成

Q. windowオブジェクトとは？
A. 簡単に言えば、DOMを構築するDocumentオブジェクトをプロパティにもつオブジェクトのこと。詳しいことはMDNのWindowの説明を参考のこと。

下図の赤い着色部分にあたります。

browserObject-Page-1 (1).png

2. Documentオブジェクトの生成

HTMLの中身を解釈してDOMツリーの構築を開始します。

下図の赤い着色部分にあたります。

browserObject-Page-1 (3).png

Documentオブジェクトが他にどのようなプロパティをもっているか気になる方はMDNのDocumentインターフェイスのプロパティ一覧を参考のこと。

3. HTMLを記述順に構文解析(パース)

要素オブジェクト(<head>, <div>, ...), テキストノード(文字列, 改行, ...)を順に追加する。
簡単に言えば、以下のような木を作成する処理。

browserObject-Page-3 (1).png

4. <script>要素を構文解析(パース), エラーがなければコードを同期実行

srcにJavaScriptファイルが指定されている場合、JavaScriptが実行されるまで, HTMLパースは一時停止します。
順序3の図で言えば、いま、<body>までパースが終わっており、<script>に差し掛かったとします。
<script>内のJavaScriptファイルを見つけた場合、JavaScriptファイルが実行されるまでは次の<h2>や<p>はパースされないということです。

5. HTMLパース完了

DOMツリーの構築が完了すれば、HTMLのパースは完了です。
このとき、DOMContentLoadedというイベントが発生します。
この時点でレンダリング(画面の表示)が開始されますが、画像やCSSなどのスタイルシートといった、外部リソースはまだ読み込まれていない可能性があります。

6. 外部リソース読み込み

順序5までで読み込まれなかった外部リソースの読み込みを行います。
すべての依存リソースが読み込まれるとloadというイベントが発生します。

7. ユーザー定義イベントなどのイベント発生

ボタンのclickなどのイベントの発生です。

参考・参照

・https://kde.hateblo.jp/entry/2017/05/20/212928
JavaScriptの処理順序について、非常に参考になりました。
・https://www.webdesignleaves.com/wp/jquery/1631/
本記事で利用されている図はこちらで作られていた物を再編したものです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T01:48:55+09:00

【HTML5】コンテンツ・モデル

私の備忘録シリーズでございます。
コンテンツ・モデルはHTML5からの要素に関する新たな概念です。
要素は下記のコンテンツが組み合わさって作られた文書構造だと考えて良い。

№ コンテンツ名
1 フロー・コンテンツ
2 インタラクティブ・コンテンツ
3 メタデータ・コンテンツ
4 フレーシング・コンテンツ
5 エンベッディッド・コンテンツ
6 ヘッティング・コンテンツ
7 セクショニング・コンテンツ

フロー・コンテンツ



HTMLドキュメント文書全体に関わる。
属する主なタグは下記。
※後述するコンテンツに属するタグはほぼ全てフロー・コンテンツにも属する。


インタラクティブ・コンテンツ



ユーザ操作が可能なコンテンツ。
属する主なタグは下記。
<button>、<input>、<textarea>など


メタデータ・コンテンツ



文書情報や別文書などを定義するコンテンツ。
<head>要素内で使用できる要素が、このカテゴリーで使用できます。
属する主なタグは下記。
<link>、<meta>、<title>など


フレーシング・コンテンツ



段落内で使用するコンテンツ。
属する主なタグは下記。
<code>、<datalist>、<em>など


エンベッディッド・コンテンツ



文書内に埋め込みするコンテンツ。
属する主なタグは下記。
<audio>、<canvas>、<video>など


ヘッティング・コンテンツ



見出しを表すコンテンツ。
属する主なタグは下記。
<h1>～<h6>


セクショニング・コンテンツ



セクションの範囲を定義するコンテンツ。
属する主なタグは下記。
<article>、<aside>、<nav>、<section>


まとめ


これらは円上の図で表される。
詳細は「コンテンツ・モデル」でググってみてね！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-30T01:24:12+09:00

MAMPを使ったWordpressでのWEB制作方法8　初心者向け

MAMPを使ったWordpressでのWEB制作方法8　初心者向け

前回の記事はこちら
#MAMPを使ったWordpressでのWEB制作方法7　初心者向け

今回は固定ページの中身を作っていきます。

固定ページの中身作成

固定ページはpage.phpのファイル内に作成します。

まずはhtmlで作成してあるservice.htmlの中身をpage.phpにコピーします。
header/footer/sidebarなどの共通部分はwordpressタグで読み込んでおきましょう
共通部分の読み込みはこちら

page.phpのファイルにコピーができたらリンクを確認すると
貼り付けた内容が反映されています。

Image from Gyazo

しかしヘッダーのどのリンクからもpage.phpのファイルを
参照してしまうため各ページの表示になるように書き換えをします。

まずタイトルを以下のように書き換えます。

page.php
<!--書き換え前-->
      <h2>サービス内容</h2>
      <p>貴社ますますご盛栄のこととお喜び申し上げます。<br>
        平素はひとかたならぬご厚情にあずかり、厚くお礼申し上げます。<br>・・・</p>

<!--書き換え後-->
      <h2><?php the_title(); ?></h2>
      <p>貴社ますますご盛栄のこととお喜び申し上げます。<br>
        平素はひとかたならぬご厚情にあずかり、厚くお礼申し上げます。<br>・・・</p>

タイトルが変わるようになりました。
中身は各ファイルtestとしてあるものが反映されています。

Image from Gyazo

次にwordpressの管理画面から各ページを開いて編集していきます。
まずは会社概要を作成してみましょう。
このとき設定からエディターをコードエディターにしておいてください。
※ビジュアルエディターはブログなど文章を打つエディターです。

Image from Gyazo

ここにcompany.htmlで記述されている本文のコードを貼り付けて更新します。
※タイトル/ヘッダー/フッター/サイドバー/お問い合わせボタンなど
　共通部分は貼り付けないようにしましょう。以下は参考です。

Image from Gyazo

ブラウザを再読込すると以下のように更新した内容が反映されています。

Image from Gyazo

同じように事業内容をservice.htmlの内容で
お問い合わせをcontact.htmlの内容で
貼り付けて更新します。

事業内容ページ
Image from Gyazo

お問い合わせページ
お問い合わせページへのリンクボタンは不要なので後ほど削除します。
今はこのまま進めましょう。
Image from Gyazo

固定ページの作成は以上になります。
次は投稿ページの作成です。

MAMPを使ったWordpressでのWEB制作方法9　初心者向け

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧