HTML5, CSS, jQueryの基本コードパッケージ

Filed under プログラミング言語, 仕事ツール
Tagged as , , , ,

ちょっとしたテストとか、JavaScriptの動作チェックとかやる度にゼロからHTMLを書いていました。
まだ、これまではその間隔が2,3ヶ月に1度くらいだったのであまり苦痛ではなかったのですが、最近1ヶ月に1度はやっている気がする。
大抵のテストではjqueryを使いたくなるので、それをダウンロードして、読み込ませたりするし、当然CSSも必要。
でも、CSSのプロパティとかどういうパラメータ名だったっけ?とか、jqueryってどういう使い方だったっけ?と基本的なところので悩み、なんとなく、こんな感じのような。。ちがうなぁ、と試行錯誤の繰り返し。

サンプルファイルアーカイブ

今更ですが、この作業があまりに無駄に感じたので、その最初のところまでをシンプルにしてまとめたものをアップしておきます。ご自由にお持ちください!

大抵のウェブコンテンツ制作者の方には不要だと思いますが、誰よりも自分のために公開!


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
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>html5+jQuery</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
      var flagToggle = false;
      $(document).ready(function(){
        //alert("ready!");
        $('#btTest').click( function(){
          //alert("click!");
          $('#photo').toggle(flagToggle);
          flagToggle = !flagToggle;
        });
      });
    </script>
    <meta http-equiv="Content-Style-type" content="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
  </head>
  <body>
  <h1>h1</h1>
  <h2>h2</h2>
    <p>html5とjQueryをあわせて使う</p>
    <ul>
      <li><a href="http://jquery.com/">http://jquery.com/</a></li>
    </ul>
    <p>
      <div><span id="btTest" class="button">[Test]</span></div>
      <img id="photo" src="images/SampleImage.jpg" alt="Torques Sample Image.">
    </p>
    <footer><a href="http://www.torques.jp/">by Torques</a></footer>
  </body>
</html>

[AD]

↓HTMLに加えて、JavaScript, CSSを駆使する、というのはもう標準ですね。

HTML5・JavaScript・CSS3 アプリケーション開発入門 (日経BPパソコンベストムック)

出版社:日経BP社( 2011-07-29 )

定価:

雑誌 ( 212 ページ )

ISBN-10 : 4822222675

ISBN-13 : 9784822222673


↓そして、jQueryももう標準ライブラリに組み込んでいいんじゃないか?ぐらいの広まりっぷり。

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

著者/訳者:西畑 一馬

出版社:アスキー・メディアワークス( 2010-02-12 )

定価:¥ 3,596

大型本 ( 344 ページ )

ISBN-10 : 4048684116

ISBN-13 : 9784048684118


Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)