blockun dialy

同人ゲーム制作サークル「SaNa」のメンバーが書くゆるーいブログです。

簡単なWebページをつくってみる #4

最近はもっぱらポケモンつかまえています。 こんばんは、soraです。

この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。の第7回です。

今日は前回に引き続き、JavaScript導入の話をしようと思います。

関連ブログ

目次

これまでに、HTMLやCSSの書き方を簡単に見てきました。一般的に、特定の内容を表示するだけであれば HTMLとCSSで十分なのですが、例えばユーザの操作によって動的にコンテンツを追加したり、あるいは削除 したり、APIを経由してサーバから新たな情報を取得してきたり、3Dコンテンツを表示したりとページを読み込んだ後に様々な動作を させるにはJavaScriptと呼ばれるプログラム言語を使用します。

「簡単にページを思う通りにつくる」ことを目的とするため、この記事ではjQueryと呼ばれる JavaScriptのライブラリも使用します。詳細は各節にて！

JavaScriptとjQuery

JavaScriptは、ブラウザが実行することのできるスクリプト言語のひとつです。Javaと名前が似ていますが、全く関係ありません（wikipediaにも載ってました）。最近では、Unityというゲームエンジンでも採用されていたり、やnode.jsという形でサーバサイドでも利用されるようになってきていて、活用の場が広い言語です。jQueryはJavaScriptの有名なライブラリで、HTMLを操作するためのインターフェース（DOMといいます）へのアクセスや、ネットワークに関する処理、非同期処理など、よく使う処理をより簡単に記述できるようになります。

初心者がいきなりライブラリとかどうなの…というところもあるかもしれませんが、何はともあれ早く動くものをつくるぞ！！ということで習うより慣れろ作戦です。最初のうちはどこまでが生JSでどこがjQueryなのかはあまり意識しなくても書けると思います。

プログラムを書く準備

では早速準備をしていきます。HTMLの中に次のようにタグを書いて直接JavaScriptを書いていくこともできますが、CSSと同様、違う言語が混ざったコードはどこか読みにくいですし、できれば分けてしまいたいものです。

<script type="text/javascript">
    // ここにJavaScriptのコードを書く
</script>

そこで、CSSと同様に以下の画像のようにJavaScript専用のファイルを作成して、コードはこちらに書いていきます。ここでは js というフォルダの下に script.js というファイルをつくりました。

f:id:moshisora:20160806213725p:plain

このファイルをHTMLから参照するには、さきほどの script タグを使って、

<script src="js/script.js" charset="utf-8"></script>

のように記述します。CSSの場合は link タグでしたが、中身は似ていますね。ただし、CSSと違って、JavaScriptは通常 body タグの最後に書くのが習わしです。これは、ほとんどのブラウザの仕様で、JavaScriptを読み込んでいる間、HTMLのレンダリングを中断することがあるためです。JavaScriptからHTMLの要素にアクセスしようとしたとき、まだレンダリングされていないと要素が見つからずうまく動かないかもしれないので、最後に読み込むようにします。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/main.css"charset="utf-8">
    </head>
    <body>
        <h1></h1>
        <div class=""></div>

        <!-- ここで読み込む！！ -->
        <script src="js/script.js"></script>
    </body>
</html>

jQueryを読み込む

jQueryもJavaScriptで書かれたプログラムなので、同じように script タグで読み込みます。注意点は自分が書くファイルよりも先に読み込んでおいてください。jQueryは こちら から入手できます。または、Googleがホスティングしているものを使うこともできます（こちらのほうが楽かも）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
<script src="js/main.js" charset="utf-8"></script>

JavaScriptを書いてみる

ではさっそく書いてみます！編集するのはHTMLではなく、読み込むように設定した srcipt.js のほうです。プログラミングといえばHello,World。とりあえず Hello, World!と出力するだけのプログラムを書いてみます。

$(document).ready(function() {
    console.log("Hello, World!");
})

たった3行ですが、見覚えのないものがいくつかあると思うので、順番に見ていきます。

一番最初に出てくる $(document.ready(funtction(){})) は、DOMが操作可能になったときに引数の関数（function)を実行するjQueryの関数です。コード内では、jQueryは$で省略して利用できる仕組みになっているので、今後$を見かけたときは、「なるほどここjQueryだな」と思いながら見てみてください。同じように、window.onload関数等を使えば、ページを読み込んだ時に該当のjavascriptを実行することはできますが、こちらの関数ではHTMLの解析のみならず、ブラウザによっては画像の表示を待ってから実行される場合もあるようなので、体感速度が大きく遅くなってしまうケースがあるようです（自分もそこまで気になったことはないのですが…）。

続いてのconsole.log()関数は、想像はつくとは思うのですが、ブラウザのコンソールに出力する関数です。コンソールの確認方法については、以前の記事をご覧ください。

では動作を確認してみます。ブラウザでindex.htmlを開いてみます。

f:id:moshisora:20160806213735p:plain

動いたでしょうか！ここまでで一旦準備編は終わりにします。jQueryを使ってページのコンテンツをごにょごにょする方法について簡単に書いてみたいと思います。

では！

まとめ

  • JavaScriptを使うとさらにリッチなサイトを作ることができる！
  • jQueryという有名なJavaScriptライブラリがある。便利。

簡単なWebページをつくってみる #3

まだ扇風機で粘ってます。 こんばんは、soraです。

この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。の第5回です。

今日は前回に引き続き、HTMLに加えてCSSの話をしていきたいと思います。

関連ブログ

目次

さて、これまでHTMLやCSSのコーディングについて書いてきましたが、今日は少し趣向を変えてみようと思います。 コードを書くのはいいですが、うまく動いていないときに「どうしてかなー」とか、「どうすればうまく動くかなー」 というときがありますね。俗に言うデバッグ作業というやつです。
Webのコーディングをするときは、一般的に、ブラウザについている開発ツールを使ってデバッグを行います。
今日は自分がよく使っているGoogleChromeを使って説明していきます。

Google Chrome

言わずと知れた、Googleが作っているブラウザですね。いろんなプラットフォームに提供されていて便利ものです。 さて、普段はWebブラウジングに使うChromeですが、すごいデバッグツールを持っていることをご存知でしょうか。

Developer Toolsの起動方法

メニューバーからは[表示] > [開発/管理] > [デベロッパーツール]を選択してください。自分はMacを使っていますが、 おそらくWindowsでも同じだと思います。もしくは、ショートカットキーで[Command + Alt + I]で起動できます。 Windowsの場合は[Ctrl + Alt + I]です（のはず…）。

f:id:moshisora:20160714230221p:plain

レンダリングの結果を確認する

DeveloperToolsが開いたら、一番上の方に画像のようなタブが並んでいると思います。詳細はこの記事では省きますが、 それぞれWebのデバッグに便利なツールが搭載されています。どんなことができるのかは後の節で紹介します。

f:id:moshisora:20160714230234p:plain

ここでは、現在表示しているページが、どういったHTMLで書かれているのかを確認できるElementタブを見ていきます。Elementタブを選択すると、下の画像のように、このページを構成するHTMLの現在の状態を確認することができます。あえて現在の状態といったのは、JavaScript等でページの構成を変更した場合、このHTMLの変更はリアルタイムにここに反映されるためで、まだ取り扱ってはいませんが、JavaScriptでDOMの書き換え等を行う際には便利な機能です。

f:id:moshisora:20160714230242p:plain

また、その場でHTMLを書き換えることもできるので、毎回エディタに戻って確認しなくても、少しここで編集して表示を確認してから本反映する、みたいなこともできます。ただし、変更は一時的なもので、読み込みもとのファイルは変更されないので、ここだけ編集して満足せず、最終的にはファイル側を編集しましょう。

CSSを変更してみる

CSSを反映し始めると、見た目を確認して、思った通りにできていないところを探して、またコードを変更して、確認して…という 作業になりますが、これがなかなか面倒です。が、ChromeのDeveloperToolsを使えばこれもブラウザ上で変更して確認する ことができます。鋭い人はお気づきかもしれませんが、ElementタブのHTMLが表示されている横に、現在反映されているCSSの一覧があります。

f:id:moshisora:20160714230250p:plain

ここの値を直接変更すると、リアルタイムにページ上のコンテンツに反映されます。また、要素には最終的にたくさんのCSSプロパティが 反映されますが、Computedタブを開くと、選択中の要素が最終的に何のプロパティにどれだけの値が設定されているかを確認することが できます。便利ですね。

要素を選択する

ここまでやってみて、いちいちコードを変えなくてもブラウザ上でチェックできるのはなかなか便利だと思う反面、HTMLからデバッグしたい 要素を探し出すのはなかなか大変ではなかったでしょうか。DeveloperToolにはこういうときに便利な機能も搭載されています。 インスペクタの左上のあたりにあるボタンをクリックします。

f:id:moshisora:20160714230259p:plain

その状態で、ページ内のコンテンツにカーソルを当てると、要素の大きさや反映されている margin padding 等の大きさを確認することが できます。また、要素をクリックすると、その要素が選択状態になるので、上記で説明したCSS等のデバッグも簡単にできます。便利！

ショートカットはWindowsでは[Ctrl + Shift + C]、Macでは[Command + Shift + C] です。よく使うので覚えておくと楽です。

他にもこんな機能

デベロッパーツールには他にもたくさんのデバッグルールが用意されています。

  • Console：JavaScript等の実行結果やエラー出力等を確認できる
  • Sources：サイトに含まれるHTMLやCSS、JavaScriptなど、ページを構成するファイルを確認できる
  • Network：Webページを配信しているサーバとブラウザの間でどういう通信が行われているのか確認できる
  • Timeline：ページを表示して、JavaScript等のプログラムを実行するのにかかった時間やその経過を確認できる
  • Resources：Cookie、LocalStrage等の保存領域の内容を確認できる

もちろん、自分のサイトだけではなく、どんなサイトでもこれを使えばどういうファイル構成でできていて、 どういう内容のコードが書いてあるか、一目瞭然です。世界中で公開されているあらゆるWebサイトの コードはこれで確認することができて、つまり教材は無限大に存在するので、興味がある人は是非他の方の サイトも覗いてみましょう。

（ときどき、コメントで面白い芸を見せているサイトもあるので面白いです）

まとめ

  • GoogleChromeのDeveloperToolsを使ってWebページのデバッグをすると便利
  • HTMLやCSSをその場で書き換えて表示確認ができる
  • DeveloperTools上で変更しても、読み込み元のファイルは変更されないので注意！

小学生でも出来る！C++プログラム #03

はおっ（０＾∀＾）ノ
お久しぶりです。渚です。

プログラムしか書けない私たちですが、この度は同人界隈向けに、
なんとなくこんな風に作ってるよーというのを発信すべく、
定期的にブログで紹介してみようかということになりました。
この記事はそんな連載の第6回です。

渚からは「小学生でも出来る！C++プログラム」
を紹介していこうと思います。

関連ブログ

目次

＜人物紹介＞

渚：プログラムを教えてくれる先生

f:id:nagisa39:20160618210950p:plain

ココ：いんたーねっとって聞いたことがあります！

f:id:nagisa39:20160619122427p:plain

マナブ：将来はゲームプログラマーになりたいな！

f:id:nagisa39:20160619122428p:plain

前回のおさらい

渚＞問題なくインストールは出来ましたか？

ココ＞C++を選ぶの忘れてて・・・できませんでした；；

マナブ＞大丈夫だよ！後からインストールすることもできるよ！

渚＞下に書いてあるやり方で手に入れることができるので，

　　選び忘れちゃった人は，インストールしましょう！

①ファイル→②新規作成→③プロジェクト

①File→②New→③Project

f:id:nagisa39:20160723210324p:plain

④テンプレート→⑤他の言語→⑥Visual C++→⑦Visual C++ 2015...を実行
④Templates→⑤Other languages→⑥Visual C++⑦Visual C++ 2015...を実行

f:id:nagisa39:20160723210328p:plain

渚＞もし，このやり方で上手くいかなかった人は
　　大変だけれど，→アンインストールの一例←
　　このやり方でアンインストールしましょう！
　　①VisualStudioCommunityを閉じる
　　②プログラムと機能の画面で，Microsoft Visual Studio Community 2015 with Updatesを選択
　　③Uninstallを選択
　　④前回の記事を見ながら，再度インストール
　　を試してください。

Hello!World!

渚＞それでは，C++を書いていきましょう～！

ココ＞ついに，プログラムするんですね＞＜！

マナブ＞楽しみです！

マナブ＞まずは，何をするんですか？

渚＞そうですね。まずは，表示からやりましょう。

ココ＞表示？

渚＞そうです。文字を書いて，画面に文字を表示します！

渚＞そのために，まずはプロジェクトの準備(じゅんび)をしましょう！

 

＜プロジェクトの準備＞ここから！

①VisualStudioCommunityを起動

②ファイル→新規作成→プロジェクト

f:id:nagisa39:20160723210324p:plain

③テンプレート→Visual C++→Win32 コンソールアプリケーション

④名前を入力（今日の日付＋お題）
　今回だと，2016_0723_HelloWorld
⑤場所をデスクトップのC++フォルダに変更

f:id:nagisa39:20160723214117p:plain

⑥３～５を確認(かくにん)して，OK！
f:id:nagisa39:20160723214416p:plain

⑦次へ→空のプロジェクトにチェックを入れる→完了

f:id:nagisa39:20160723214630p:plain

⑧ソリューションエクスプローラーのソースファイルを右クリック→追加→新しい項目

f:id:nagisa39:20160723214848p:plain

⑨C++ファイルを選択→追加

f:id:nagisa39:20160723215048p:plain

⑩Source.cppを選択　準備完了！

f:id:nagisa39:20160723215403p:plain

＜プロジェクトの準備＞ここまで！

 

渚＞プロジェクトの準備は出来ましたでしょうか？

ココ＞は～い！

マナブ＞このソースファイルにプログラムを書くんですね！

渚＞その通り！では，さっそく書いていきましょう！

#include <iostream>

int main()
{
    std::cout << "Hello!World!" << std::endl;

    return 0;
}

ココ＞#include???

渚＞色々むつしい単語が並んでるので，よくわからないと思いますが，まずは↑のをコピペ(コピーして貼り付け)して，ちゃんと動くか確認しましょう！

マナブ＞どうやって動かすんですか？

渚＞デバッグ→デバッグなしで開始

f:id:nagisa39:20160723230625p:plain

渚＞今後このダイアログを表示しない　にチェックを入れる→はい

f:id:nagisa39:20160723230642p:plain

渚＞そうすると，こんな画面が出ます。この画面のことをコンソール画面と言います。

f:id:nagisa39:20160723230716p:plain

渚＞うまくできましたか～？

ココ＞できました！

マナブ＞僕も出来ました！

渚＞ひとまず，表示は完了です！

渚＞それぞれの意味については，おいおい学ぶとして，重要なところだけ教えますね！

 

渚＞まず，「std::cout」これは，「エスティディ，シーアウト」というもので，コンソールアウト→コンソール画面にアウト(出力)つまり，黒い画面に表示する。という意味になります。

渚＞次に，「std::endl」これは，「エスティディ，エンドエル」というもので，エンドライン→ライン(行)をエンド(終了)つまり，改行する。という意味になります。

渚＞間に挟まっている，「"Hello!World!"」これは，表示したい文字列になります。ちなみに，「<<」は，取り敢えず区切りを示すものと思ってください。最後に「;」は，その行の命令終わり！って言う意味になります。

ココ＞えっと，std::cout << "Hello!Workd!" << std::endl;は，
★ここから★
コンソール画面に表示したい！　区切り　表示したい文字列　区切り　改行したい！
★ここまで★　ここからここまでの　命令終わり！　っていう感じですか？

渚＞その通り！

マナブ＞じゃ，std::cout << "A";　にすると，
★ここから★
コンソール画面に表示したい！　区切り　Aを表示！
★ここまで★　ここから　ここまでの命令終わり！　って意味になるから・・・・
コンソール画面には　A　って表示されますか？

渚＞そうですね！是非やってみてください！

四則演算

渚＞続いて，四則演算を表示してみましょう！

ココ＞足す，引く，掛ける，割るのことだよね？

渚＞そうですよ。まずは，足し算を書いてみましょう！

#include <iostream>

int main()
{
    std::cout << "4 + 5 =" << 4 + 5 << std::endl;
    return 0;
}

マナブ＞あれ？

渚＞どうしました？

マナブ＞さっき，表示したい文字列って，「"」これで囲ってました。なのに，↑のは，囲ってるのと，囲ってないのがあります。なぜでしょう？

ココ＞ほんとだ～！

渚＞いいところに気付きましたね！まず，「”」のことは，「ダブルクォーテーション」と言います。そして，「”」で囲われた物は，”文字の列”になります。つまり，書いたものはそのままコンソール画面に表示されます。

渚＞そして，「”」で囲われていないものは，数字として扱われます。

ココ＞「"4 + 5 ="」は「4 + 5 =」って表示されて，「4 + 5」は・・・あれれ？

マナブ＞「9」じゃない？

渚＞マナブ君，正解！

渚＞ということで，こんな感じで表示されます！

f:id:nagisa39:20160730220931p:plain

次回

というわけで，基本的な表示についての話でした

次回は，変数についてお話しします！

小学生でも出来る！C++プログラム #02

C++ VisualStudio プログラミング ニコ生

はおっ（０＾∀＾）ノ
お久しぶりです。渚です。

プログラムしか書けない私たちですが、この度は同人界隈向けに、
なんとなくこんな風に作ってるよーというのを発信すべく、
定期的にブログで紹介してみようかということになりました。
この記事はそんな連載の第4回です。

渚からは「小学生でも出来る！C++プログラム」
を紹介していこうと思います。
今のご時世，小学生でもプログラムしますよね！
みたいなことありますよね。。；ほんと大変。
まぁ，なので，塾に通わなくても，簡単にプログラムを学べるよ～！
っていうのをやります。

関連ブログ

  • #1 小学生でも出来る！C++プログラム「C++って何？」
  • #2 小学生でも出来る！C++プログラム「開発ツールを手に入れよう！」

目次

  • 「開発ツールを手に入れよう！」
    • コンパイラってなんだろう？
    • VisualStudioCommunityをインストールしよう

＜人物紹介＞

渚：プログラムを教えてくれる先生

f:id:nagisa39:20160618210950p:plain

ココ：いんたーねっとって聞いたことがあります！

f:id:nagisa39:20160619122427p:plain

マナブ：将来はゲームプログラマーになりたいな！

f:id:nagisa39:20160619122428p:plain

コンパイラってなんだろう？

渚＞前回お話しした，コンパイルって覚えてますか？

ココ＞ホンヤクだっけ・・・・

マナブ＞人が使う言葉と，コンピュータが使う言葉は，違う種類だから，人が使う言葉を，コンピュータが使う言葉にホンヤクするのがコンパイルでしたよね！

渚＞二人ともよく覚えていました！その通りです！

渚＞コンパイラとは，コンパイルをするアプリケーションのことです。

マナブ＞なるほど！

ココ＞コンパイラがコンパイルしてくれるんですね～！

 

マナブ君の言う，ホンヤクは，正確ではありません。
正確に言うと，以下の通りになります。
　　　　　コンパイル
×日本語→→→→→→→→→→→→→→機械語
　　　　　覚える　　　　　コンパイル
○日本語→→→→→→→→→C++言語→→→→→→→→→→→→機械語

VisualStudioCommunityをインストールしよう

渚＞それでは，先ほど話したコンパイラを手に入れましょう。

ココ＞でも，お金が掛かったり，黒い画面で何か書かないとダメなんじゃ・・・

マナブ＞実は今では色んなコンパイラが無償提供されているんだよ！

渚＞そうですね。しかも基本操作はマウスでできるツールがあります。

ココ＞マウス操作だけなら，私にもできるかもっ！

渚＞では，VisualStudioCommunityを手に入れましょう

 

※ダウンロードには，数時間かかります。

　余裕のある時か，放置しても良い時にしてください。

※ダウンロードするには，Cドライブに10GB以上の容量が必要です。

 

無料開発ツール - Visual Studio Community 2015

①↑のサイトから，Communityをダウンロードしましょう！

②ダウンロードフォルダに[vs_community_JPN.exe]がダウンロードされます！

③ダブルクリックで，[vs_community_JPN.exe]を実行しましょう！

f:id:nagisa39:20160703174425p:plain

④C++は，デフォルトではインストールされません。

　なので，【Custom】を選択して [ Next ] ボタンを押してください。

f:id:nagisa39:20160703174622p:plain

⑤Programming LanguagesのVisualC++にチェックを入れ，他のチェックはすべて外してもらってOKです。（※この講座ではこれしか使わないので，そうしてるだけです。通常のVSのインストールの仕方ではありません。）

⑥ [ Next ] ボタンを押すとインストールが始まります。ここから２時間～４時間ほど放置しましょう！

⑦インストールが終わると，[ Close ]ボタンを押せるようになります。

f:id:nagisa39:20160703175244p:plain

⑧VisualStudioを起動し，しばらく待つと，↑の画面が表示されます。

　Microsoft系(hotmail,outlook)のMailアドレスを入れてください。

　メールアドレスに対応したパスワードを入力してください。

f:id:nagisa39:20160703175629p:plain

⑨問題なくSignInできたら，メールアドレスが表示されます。

　これで，インストール完了！

　ちなみに，30日以内であれば，アドレスを登録しなくても使えるはずです！私は30日とかが面倒なので，登録してます。

次回

というわけで，時間のかかる環境構築のお話でした！
次回は，VisualStudioCommunityを使って，ついにC++プログラムを書いていきます！

簡単なWebページをつくってみる #2

CSS HTML ニコ生 同人

夏間近なのに寒いですね（クーラーが）。
こんばんは、soraです。

この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。の第3回です。

今日は前回に引き続き、HTMLに加えてCSSの話をしていきたいと思います。

関連ブログ

目次

HTML

前回も簡単にした通り、HTMLはWebページを記述するためのマークアップ言語です。主な役割として、文書内の構造や意味をタグを使って示します。前回書いたもので簡単に説明します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>header1</h1>
        <section>
            <h2>サブタイトル</h2>
            <p>
                段落です段落段落
            </p>
        </section>
        <div>
            <a href="http://circlesana.org" target="_blank">Sanaのホームページ
                <img src="img/blockun.png" alt="ブロックン">
            </a>
        </div>
    </body>
</html>

HTMLではタグを <> で囲んで表現し、タグは複数の属性を持つことができます。上の例でいくと、

  • タグ

    • html : この文書はHTML
    • h1 : 一番大きい見出し
    • section : ページ内のひとつのセクション。通常見出しをつけることができるはず <h1> 等
    • p : 文書ないのひとつの段落
    • a : リンク
    • img : 画像

  • 属性

    • href : 具体的なリンク先
    • alt : 代替テキスト。画像が表示できない場合などに表示される

といった具合です。こうして文章に意味を持たせながら内容を記述していきます。ただし、HTMLは意味づけをする言語なので、このままでは質素なページができあがって、普段見てるような鮮やかなページにはならないですね。そこでCSSの出番です。
どういった種類のタグがあるのかは、多すぎて紹介しきれないので、文末で他サイトのリンクを紹介します。

f:id:moshisora:20160628223127p:plain

CSS

CSSとは

CSSは、Webページのレイアウトや色、見た目などのスタイルを設定するための言語です。習うより馴れろ戦法でとりあえず見てみます。こんな感じで書きます。

html {
    color: #333333;
    text-align: center;
    background-color: #eeeeee;
}

CSSでは、スタイルを反映する場所（上の例だと htmlタグ）と、それに適用するプロパティ（color, background-color等）で構成されます。例では、htmlタグの中身に「文字の色を黒っぽくして、テキストは中央揃え、背景は薄いグレー」というスタイルを反映しろー と書いています。HTMLと同じく、プロパティには無数の種類があるので、文末でリンクを紹介したいと思います。

CSSを読み込む

さて、具体的にCSSを書くにはどうするのか、というところですが、通常HTMLとは別のファイルとして記述します。一般的には下の図のように、cssフォルダを作ってまとめていれておくことが多いと思います。とりあえずstyle.cssを作りました。

f:id:moshisora:20160628223120p:plain

HTMLにこのCSSを読み込ませるには、headタグ内にlinkタグを書いて、linkタグのhref属性にCSSのファイルパスを指定してやります。さきほどのフォルダ構造だとこんな感じです。charset属性は想像がつくと思いますが、開くファイルの文字エンコードです。間違ったものを指定すると文字化けするかもしれないので正しいものを入れてください。

<head>
    <link rel="stylesheet" href="css/style.css" charset="utf-8">
</head>

思い通りにレイアウトする

さて、前節で気がついた方もいらっしゃるかもしれませんが、タグに対してしかスタイルを当てることができないと、思い通りのレイアウトはできませんよね。そこで使うのがclass属性です。

<a href="ttp://hogehoge" class="link"></a>

のように使います。このclass属性は、基本的にすべてのタグで使うことができます。通常CSSのスタイル反映にはこのclass属性で指定したものに対して反映します。
CSSでクラスを対象にするには、先頭に.をつけて、次のように記述します。

.link {
    color: #ff0000;
}

これで、文書内でclass="link"をもったタグにだけ、color: #ff0000が反映されます。こうしてページ全体の複雑なレイアウトを組み立てて行きます。
実はタグやclass属性意外にも指定できる方法はたくさんありますが、ひとまずこれだけあれば大丈夫ですし、そもそもコードを複雑にしないためにも基本に沿って書くとよいと思います。
長くなってきたので今回はこのあたりで！

まとめ

  • HTMLはWebページを書くためのマークアップ言語。文書の構造と意味を記述する。
  • CSSは見た目を決めるための言語。
  • タグやclass属性を指定してスタイルを反映することができる。

リンク紹介

小学生でも出来る！C++プログラム

C++ プログラミング ニコ生

はおっ（０＾∀＾）ノ お久しぶりです。渚です。

プログラムしか書けない私たちですが、この度は同人界隈向けに、
なんとなくこんな風に作ってるよーというのを発信すべく、
定期的にブログで紹介してみようかということになりました。
この記事はそんな連載の第2回です。

渚からは最初のテーマとして「小学生でも出来る！C++プログラム」
を紹介していこうと思います。
今のご時世，小学生でもプログラムしますよね！
みたいなことありますよね。。；ほんと大変。
まぁ，なので，塾に通わなくても，簡単にプログラムを学べるよ～！
っていうのをやります。

ちょっとしたゲームを作るところまでできれば…とは思いますがそれは追々…。

超初心者向けでお届けします。

関連ブログ

  • #1 小学生でも出来る！C++プログラム「C++って何？」

目次

＜人物紹介＞

渚：プログラムを教えてくれる先生

f:id:nagisa39:20160618210950p:plain

ココ：いんたーねっとって聞いたことがあります！

f:id:nagisa39:20160619122427p:plain

マナブ：将来はゲームプログラマーになりたいな！

f:id:nagisa39:20160619122428p:plain

プログラムってなんだろう？

渚＞プログラムって聞いたことありますか？
ココ＞ぷろぐらむ？
マナブ＞ゲームを動かすためのもの？

プログラムとは
簡単な言い方をすると，コンピュータに出す命令のこと
ゲームを動かすために，様々な命令がゲーム機に出されているので，
プログラムは，ゲームを動かすためのものって言えます！マナブくん正解！
でも，ゲーム以外にもコンピュータで動いているものはたくさんあります。




渚＞コンピュータが入ってるものって，なにがあるだろう？
ココ＞スマホ！
マナブ＞車や，全自動洗濯機とか，テレビもかな。
ココ＞えっ？！テレビってコンピュータなの？
渚＞テレビ＝コンピュータとすると不思議な感じがするけれど
　　テレビの中にもコンピュータは入ってるよっ♪

コンピュータとは
通常，パソコンと言われる機械を指します。
でも，マイコン(マイクロコンピュータ)や，スパコン(スーパーコンピュータ)
と呼ばれるコンピュータも仲間です。
車やテレビには，このマイコンと呼ばれるコンピュータが入っています。


ココ＞いろんなものにコンピュータって入ってるんだね
渚＞そうですね。そして，コンピュータを動かすための命令がプログラムです。
マナブ＞プログラムって言っても，いろんな種類があるんだよね？
渚＞そうですね。いろんな種類があります。でも，その説明の前に
　　プログラミング言語についてお話しますね。

プログラミング言語ってなんだろう？

プログラミング言語
日本語や英語のような，コンピュータに対して命令する専用の言葉です
アメリカ人に，日本語で，「絵を描いてくれませんか？」と言っても「？？？」
ってなりますよね。それと同じで，
コンピュータに，日本語で，「絵を描いてくれませんか？」と言っても「？？？」
となるわけです。
アメリカ人とは英語で話すように，コンピュータとはプログラミング言語で
会話できるようになりましょう♪



ココ＞コンピュータにお願いするときは，プログラムっていう言葉を使うんだね
渚＞その通り！
ココ＞どんな言葉なの？
渚＞日本語，英語，フランス語のように，プログラムにもいろんな言葉があります。例えば，C/C++や，Java，C#などが有名ですね。
マナブ＞HTML/CSSや，PHP，アセンブリとかも聞いたことがあるよ。
渚＞それらは，ひとくくりにすると，大人の事情で怒られそうだけど
　　それも，プログラムのお仲間と言ってもいいかな＾＾；


プログラムの種類
プログラム言語にも色々な種類があるよ
f:id:nagisa39:20160619165508p:plain
詳しい話をすると，時間が掛かっちゃうので簡単に紹介すると
低級言語は，コンピュータにとって最も理解しやすい言語だけど，
人にとっては，使いこなすのがかなり難しい言語です。
高級言語は，低級言語よりは，扱いやすいけれど，それなりに知識が必要です。
コンパイラ言語は，書いたらすぐ動かすことができるスクリプトと違って
コンパイルというホンヤクを行う必要がある言語です。
スクリプト言語は，ホンヤクしながら実行される言語です。
つまり，通訳さんがいるときに会話をするようなものですね！


ココ＞なんかいっぱいあるんだね・・；
渚＞そうですね。いっぱいある内の１つである，C++を学ぶってことだけ覚えておいてね！
マナブ＞でも，なんでC++にしたの？
渚＞ぉっ，いい質問ですね！

C++ってなに？

渚＞プログラミング言語には，色々あるけれど，C++を選んだ理由は
　　一言でいうと「見栄」かな？
マナブ＞えっ・・・・
渚＞プログラム言語としての認知度や汎用性が高くて，でも習得するには結構
　　むつかしい。専門用語を使うと，オブジェクト指向と手続き型の両方に対応しているから難しい。
　　むつかしいからこそ，C++できます！って言えると，かっこいいｗ
マナブ＞C++できるとかっこいいんだ
渚＞C++をちゃんと習得してる人は，他のプログラム言語も，体得しやすいっていうメリットもあるよ。
ココ＞ほぇ～，なんかすごいんだねぇ
渚＞そぅそぅ。C++できたら凄いよ！
ココ＞がんばってみようかな

C++(シープラ)とは？
汎用性が高く，あらゆる分野のコンピュータで使われている言語
C言語の上位互換版で，C言語の機能に，オブジェクト指向等の使用を追加したもの。
基本的に何でもできるが，プログラムするのに時間がかかりやすい。
使いこなせる人はかっこいい



次回

とうわけで、超簡単にではありますが、プログラムについての紹介でした！
次回は，最も時間がかかる環境構築！


---フリー素材提供--------------------------------------
[ジュエルセイバーFREE]　URL：http://www.jewel-s.jp/

簡単なWebサイトをつくってみる #1

HTML CSS JavaScript 同人サークル ニコ生

こんにちは。
最近いいカメラを買いました。soraです。

プログラムしか書けない我々ですが、この度は同人界隈向けに、なんとなくこんな風に作ってるよーというのを発信すべく、定期的にブログで紹介してみようかということになりました。この記事はそんな連載の第1回です。

自分からは最初のテーマとして簡単なwebサイトを作っていこうと思います。
サークルを作ったらWebサイトを公開したい！！みたいなことありますよね。

webサービスのようなものを作るところまでできれば…とは思いますがそれは追々…。

超初心者向けでお届けする予定です。

関連ブログ

  • #1 webサイトをつくる準備・どうやってつくる？

目次

Webサイトを公開するとはどういうことか

誰でも閲覧可能なWebサイトを公開するということは、誰でもアクセス可能なサーバに公開したいファイルを置くことです。もっと言葉を簡単にすると、「誰でもダウンロードできる場所に、みてほしいファイルを保存する」ことです。

WebブラウザはHTML（Webページを記載するためのマークアップ言語）ファイルをダウンロードしたとき、それを解釈していつもみているようなWebサイトを表示しているにすぎません。

つまりまとめると、「誰でもダウンロードできるところにHTMLファイルを置けばいい！」わけですね。

必要な技術

とはいえ、HTMLだけではいつも見ているWebサイトのように華やかなレイアウトや、ボタンを押した時の動きは再現できません。Webページは一般的に、次の3つの技術を用いて解釈されています。

HTML

Webページを記載するためのマークアップ言語。
* この部分は段落ですよ
* こっちは画像ですよ
といった文章の意味づけの役目も持ちます。

CSS

Webページのレイアウト、見た目を記述するための言語です。 背景の色を変えたり、文章の行間を変えたり、角丸を指定したり…。

JavaScript

ブラウザ上で実行されるプログラミング言語です。ここまでくるとプログラム書いてる感が出てくると思います。
CSSによるレイアウト定義だけではできない、さらに複雑な動作をさせる時は必要になるケースがあります。
必須なものではないので作るページの内容によっては必要ないかもしれません。
この連載？ではせっかくなので超導入部分だけ扱っていこうと思います。

基本的に、どんな複雑なWebサイトもこの３つで動作しています。

同人サークルで考えられそうなサイトを公開する方法

おまけコーナーです。記事ではHTMLを書こう的なことを書きましたが、細かいことはわからなくても公開できる方法はあるので、メリット・デメリットと一緒にサイトを公開する手法を並べてみたいと思います。

Webサイトを作成できるWebサービスを使う

見出しがちょっと複雑になりました。HTMLやWebについての知識がなくても、簡単にサイトを公開できるサービスがあります。wix等が有名かもしれません。こういったサービスを使ってサイトを公開しているサークルさんもまあまあ見かける印象です。

  • 難易度：★
  • メリット：何より簡単。HTML等の知識がなくても大丈夫。
  • デメリット：ある程度決まったレイアウトの上で作成するので、カスタマイズできる範囲に限度がある。独自ドメインが使えない(?)。

もう少し高度なWebサイト作成サービス

WordPressが有名ですが、上記のようなサービスのようにレイアウトを変更できるだけでなく、プラグインという形で多くの機能を追加できます。ブログみたいなサイトを作ったり、ECサイトみたいなものを作ったりできる様々なものが提供されていますが、つくるサイトによっては上記に比べると難易度はかなり上がります。

  • 難易度：★★★
  • メリット：単純なサイトをつくるだけなら簡単。HTML等の知識がなくても大丈夫。プラグインで機能追加も
  • デメリット：ある程度決まったレイアウトの上で作成する。カスタマイズは可能ですが、より高度な知識が必要。

HTMLを書いてどこかに置く

前の節までで説明してきた方法で、連載でもここを扱います。つまり、サイトの内容は自分でコードを書いて作成し、それを誰でも見える場所にアップロードしてしまう方法です。HTML、CSS等の知識は必要ですが、自由自在にサイトをつくれます。アップロードする場所は誰でもアクセスできる場所であればどこでも大丈夫ですが、独自ドメインを使いたい場合は、対応しているアップロード先を選ぶ必要があります。

  • 難易度：★★
  • メリット：自由自在に思う通りのレイアウトがつくれる
  • デメリット：HTML、CSS、JavaScriptなどの知識は必要。

サーバを立てる

ここまでするとレイアウトはもちろんのこと、基本的になんでもできます。SaNaではこの方法で作成していて、サイト内に表示するゲームやお知らせなどの情報は、コードを変更しなくてもアクセス管理したコンテンツ管理画面から変更することができるようになっています。

  • 難易度：★★★★
  • メリット：レイアウト、機能など基本的になんでも自由に作れる。
  • デメリット：HTML、CSS、JavaScriptなどに加え、プロトコル、サーバ構築に関する知識が必要。

次回

とうわけで、超簡単にではありますが、こんなものが必要ですという紹介でした。
次回はHTMLを書くのと、CSSを書き始めます！

書いたコードはこちらに載せていく（かもしれません）

文字ばっかりになってしまった...。