2コンテンツへスキップこのwebサイトの先進的な機能は、ブラウザーのJavaScriptを有効にする必要があります。コメントを残すこれは以前HTMLとCSSを使ってみる目的で作ってみたサイトの話です。ホームページはじめはホームページ作りの始め方からです。プログラミングやホームページに興味があるけれどもどうしたらいいかわからない、俺よりも初心者をターゲットに書いていきます。...けど何をすれば??俺の場合は、プログラミングといえばC言語で、なんとなく難しそうだけどやっていけばできるようになるよねー、という見切り発車でした。ホームページを作りたいだけならC言語を使わないでもできます。いうことを知らなかった俺はなかなかな遠回りをしました。ホームページ作りに必要なのはHTMLなどCSSJavaScriptです。それぞれについて軽く説明します。HTMLホームページの顔になる部分を表現します。タイトルはこれ、本文はこれ、という感じ。他のページのURLを形式にしたがって記述すると、ホームページ上でそこをクリックすると指定したページに飛ぶことができます。URLは住所や道筋に当たります。このファイルのこのファイルにはいって...という風に道筋(パスといいます)を指定しています。いうのも、人間が読む文章は、大きさ、内容から、見出し、キーワード、タイトルなどを見分けられるようになっています。このように、文章を意味の重要性で分けて区別することを構造化と呼びます。テキストを構造化するとき、具体的にはいちいち「ここはタイトルですよー」と意味を加えていくことになります。これをやる役割を持つのがマークアップ言語です。HTMLはマークアップ言語というものの1つです。これにはいろいろと種類がありますので、ググッてみてください。このホームページのコードはこんな感じ。文の両端にあるのがタグで,これが構造化のみそです。class=”headTitle-typeA”>今後扱っていきたいこと</h2>\end{lstlisting}1番目の文では、ここがタイトルであるということを指定していて、ホームページの上のタブの部分に表示されます。いう部分で、ここの間に書いたテキストが~~だ、ということになります。2番目の文では、リンクを指定しているタブと箇条書きをするタブを使っています。リンクをしていています。このパスと書いている部分で、ファイルがある場所を指定しています。このリンクをページ上でクリックするとHOME画面に移動します。スタート地点は今自分が書いているhtmlファイルの場所で、..は一つ上の段のフォルダに行くことを意味しています。スタート地点のフォルダをA,上の段のフォルダをBとすると,私のパソコンの中には、Bフォルダの中にAフォルダとindex.htmlが入っています。Edge等)がトップページにアクセスしたとき,フォルダ内でindex.htmlというファイルが一番始めに表示されるらしいので気をつけましょう。自分がいるところからスタートするパスは相対パス,httpから始まるようなインターネット上でファイルの位置を指定する方法を絶対パスと言います。同様に場所を指定する事で画像を表示させる事も出来ます。heightは画像サイズを指定しています。h1,h2,h3の順で字が大きく表示されますので,h1やh2でタイトルや見出しを書くことが多いです。CSSで指定するして装飾を作るとそのクラスの文はその通りに表示されますのでつけておくと便利です。CSSCSSを使うと文章を装飾することができます。背景の色やタイトルの文字の大きさ、余白の大きさなどを指定できます。文字の大きさはHTMLでも指定できますが、CSSのほうが便利です。セレクタは装飾される対象を選んでいます。HTMLでclass=honyaと指定していたらセレクタをhonyaにすれば良いですし,見出しのh1,h2..や1段落文の文章を表すpなどを指定しても大丈夫です。プロパティは何を,値はどうするかを指定します。224)は背景が薄い緑になります。色は三原色の濃さでしています。これはテキストエディタか画像加工ツールを利用しましょう。classで名前をつけると,CSSで指定するして装飾を作るとそのクラスの文はその通りに表示されますのでつけておくと便利と言いましたが,あとで修正するのも楽になります。各見出しは同じ色や大きさにすることが多いと思いますが,それぞれに同じようにCSSを指定するよりもclassで名前をつけて,そのクラスの装飾内容を1カ所で書けば,修正箇所も1カ所で済みます。h2で2種類の見出しの装飾を作りたいと言うときなどにも便利です。例ではheadTitle-typeA等がこれに当たります。CSSのことはよく分かっていません。なんとなくで書いています。}作るまでの準備せっかくこの記事を読んでくださったので、読んでいる方がスタートを切れるように説明たいと思います。実際に作ってみる前に,環境を整える必要があります。コードに関する知識の他にに必要なものは、以下と通りです。加えて、ファイルに関する知識が多少必要です。index.htmlについての話を書きましたが、.htmlというのは拡張子と呼ばれていて,ファイルの種類を表しています。テキストファイルは.txt等,様々な拡張子があります。htmlもテキストファイルですが,ホームページで表示できます。名前を変えるとき画像を表す.jpgのような拡張子をワードで作ったファイルにつけてしまうとワードは画像を見るためのツールではありませんので開けなくなります。このような事故を防ぐために初期設定では拡張子は非表示になっています。拡張子はパス指定するときにも書かなくてはいけません。ホームページを作るなら拡張子を把握している必要がありますので,エクスプローラー(ファイルマークのアイコン)の「表示」から変更してください。Chromeを使っています。htmlファイルを開くときに右クリックで「プログラムから開く」や「このアプリケーションで開く」で選んでください。テキストエディタは文を書くツールです。Wordでも出来るはずですが、文字の大きさなどのデータも保存されますし,重いです。メモ帳でもできますが,無料のエディタがネットにあるのでお好みで使うのをおすすめします。タグなどを色を変えて表示してくれたりすると見やすくなります。Codeで書いています。サーバというのはサービスを提供するコンピュータです。ホームページの土地のようなイメージのおもので,公開するには不可欠です。これも調べれば無料のものがすぐに見つかります。ユーザー名とFTPパスワードはひかえておいてください。私はとりあえずFC2にしました。作ったホームページをサーバに保存するにはFTPソフトが必要になります。ネットからインストールしましょう。有名なのはFFFTPというソフトで,私も使っています。「新規ホスト」の「基本」からホスト名にfc2などと入力ていき、ローカルの初期フォルダに「C:\ほにゃらら」と自分が作ったホームページに関するいろいろなデータを保存したフォルダを指定します。あとはOKして接続して...とすればアップできます。雑になりましたが,事前準備は以上です。これができれば,あとはネットに転がっている記述法や書店で巡り合った本を活用して自分のホームページを作り始めることができるはずです。終わりに初心者がまず手を出すものとしてホームページはおすすめです。今回の内容では計算処理が出てきませんので,アプリやゲームが作りたい方はさらに別な言語を勉強してみてください。追記(2019/2/11)コードの表示を変更しました。HTMLとCSSなどの学習にはprogateが楽しいのでおすすめです。段落構成を変更しました。内容は変更ありません。作業が進んでない上に、年末飲み会ラッシュにも関わらず今週は外部の勉強会に行ってみました。メイカーズチャレンジ2018-2019﻿ラズパイとjavascritを使ったIoTをやってみような総務省主催のイベントです。日本各地でやっているらしいですが、俺は前橋でやりました。12/15,16,1/19,20で開催されます。自分がロボ研で専攻がハードウェア系なので、処理の遅そうなスクリプト言語と縁があまり無かった上に、なんとなくC++こそ至高みたいな帝王学が勝手に頭のなかで生まれていたらしい、、、HP作りで使いそうな言語だし、イベントがあるのならと言うことで参加してみました。APIってどうやったら使えるのさ俺がツイ廃なので、twitterで遊びたいなと思ってたんですが、API(できあがってるコードみたいなイメージの物です)を利用するのってどうやったら良いのか和全く解らなかったんですが、このイベントで使うらしいので経験しておけば全然違うはずと思いました。ラズパイは友達ラズパイはかなり都合がいいヤツなので、仲良くなりたい。マイコンは使ったことがありますが、ハードウエアとして命令がどうなっているのかわからない環境でものを作るということにとても抵抗がありまして。先達に教えていただきたいと思っています。「ハッカソン」(hackathon)とは、広い意味でソフトウェアのエンジニアリングを指す“ハック”(hack)とマラソン(marathon)を組み合わせた米IT業界発祥の造語で、もともとはプログラマーやデザイナーから成る複数の参加チームが、マラソンのように、数時間から数日間の与えられた時間を徹してプログラミングに没頭し、アイデアや成果を競い合う開発イベントのことをいいます。今回私たちのチームは「自分で快適な場所に移動する植木鉢」を作ろうということになりました。いうんはすでに作っている人がいるもの。私たちの目玉は、かわいらしさでございます。懐かしのたまごっちのような、飼う植木鉢ができたら最高。簡単のため、室内での使用を考えています。窓辺においても、時間によって日の光の方角がかわりますよね。目標値よりも暗くなったら移動します。簡単のために直線で東西を行ったり来たりするのを考えています。画面を表示して、状態によって表情を変化させます。