あなたが作成した様々なデータが販売できる「データのフリーマーケット」！
あなたの様々なデータは本当は価値があるのです！
動画、写真、イラスト、デザイン、キャラクター、電子書籍、文章、音楽、ゲーム、
素材、アプリケーション、ソースコード、zip、アニメ、officeデータに各種テンプレートなど
すべてのデータを簡単に販売でき、1ポイント＝1円で現金に交換できます！
気軽に様々なデータを販売しよう。めざせ1日1アップロード！
販売は・・・データをアップロードして、価格の設定をするだけで販売開始！
購入は・・・商品を見つけたら、ポイントを確認してカートへ入れるだけ！
HTMLまとめ
HTMLって何？
こんにちは、Fujibaba.com管理人です。
|
<!DOCTYPE HTML>
<html>
<head>
<title>タイトル</title>
</head>
<body>
こんにちは
</body>
</html>
|
それでは、また会いましょう！
HTMLを書いてみよう
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML演習</title>
</head>
<body>
こんにちは
</body>
</html>
|
ここまで書けたら、ファイルを保存します。
headタグ
こんにちは、Fujibaba.com管理人です。
今回は「HTMLを書いてみよう」で書いたHTMLをもとにソースコードの内容を解説していきます。今回のテーマは"headタグ"です。
「HTMLを書いてみよう」では以下のようなソースコードを書きました。
<head>～</head>の部分がheadタグと呼ばれます。headタグにはメタ情報といってサイトの情報を記述することができます。ここに入力された内容はブラウザで開いた時には表示されません。
<body>～</body>の部分がWEBページの本文になります。ここに記述された内容がブラウザで開いた時に表示されます。
今回はheadタグについて細かくみていきます。
<meta charset="UTF-8">という記述がありますが、これは「このページは文字コードをUTF-8としてロードしなさい」という意味になります。「HTMLを書いてみよう」で保存していただいたhtmlファイルは、エンコードでUTF-8を選択してもらったので、UTF-8でロードしなければ文字化けしてしまいます。ページの内容が文字化けしないためにも予め文字コードを宣言しておきます。
※文字コードについては、用語集の文字コードとUTF-8をご参照ください。
metaタグは記述の仕方がちょっと変わってて、オプションを追加するだけで中身がないため、終了タグがありません。
次に<title>HTML演習</title>という記述ですが、titleタグといってWEBページのタイトルになります。まぁそのままですね。
①の部分にtitleタグで入力した内容が表示されます。ここで記述した内容は、ブラウザでブックマーク/お気に入りに追加した時に表示される名前にも使われますので、しっかり記述しておきましょう。
他にheadタグに記述できる内容の中でも重要なものをいくつか説明したいと思います。
《keywords》
作成しているWEBページにとって重要なキーワードを記述します。検索で上位表示させたいキーワードを入れましょう。<meta name="keywords" content="">というような記述の仕方をしますが、contentの中にカンマ(,)区切りでキーワードを入れます。数は3～5個くらいにしておきましょう。
例：<meta name="keywords" content="HTMLの基礎,HTML演習,headタグ">
《description》
WEBページの説明を記述します。<meta name="description" content=""> というような記述の仕方をしますが、contentに説明を書きます。 ここに記述した内容は検索結果に表示されます。
例：<meta name="description" content="HTMLの基礎を学ぶためのコラムです。">
今回はこれくらいにしておきたいと思います。なんとなくheadタグについて理解できましたか？
では、またお会いしましょう。
headタグ2～さらに理解を深める～
こんにちは、Fujibaba.com管理人です。
今回は「headタグ」に引き続き、もう少しheadタグについてみていきたいと思います。
前回、キーワードやサイトの説明については書きましたが、headタグに記述できる他の要素を説明していきます。
・スタイルシートを読み込む
スタイルシートというのは、WEBページの見た目を指定するための言語です。良く使われるのはCSSと呼ばれる言語で、CSSで記述したファイルを読み込んでWEBページの見た目を変えたい場合、headタグに以下のように記述します。
relには種類が何であるか、hrefにはそのファイルがどこに保存されているか、を書きます。
CSSについては、いずれ豆知識で詳しく書きたいと思いますので、今回は詳細な説明は割愛させていただきます。CSSがどういったものかについては、用語集のCSSに書いてありますので、ご参照いただければと思います。
・ファビコンを指定する
ファビコンというのは、ブラウザのタブ等に表示されるWEBページを表すアイコンです。
このファビコンを指定するには、以下のように記述します。
relに種類、hrefにファイルの場所を書きます。
はじめは、前回の「headタグ」とこれらを理解していれば十分です。
慣れてきたら他にどのようなものがあるのか、WEBサイトのソースを覗いてみましょう。色々と得られるものがあると思います。
では、またお会いしましょう。
HTMLで画像を入れる方法
コメント/見出し/段落/改行を表現するタグ
こんにちは。
Fujibaba.com管理人です。
HTML基礎講座の時間がやって参りました。
今回はbodyタグを見ていきたいと思います。
このページでは、
・コメントを残すには？
・見出しをつける
・段落を分ける
・改行を入れる
について説明します。
・コメントを残すには？
まずご紹介したいのが、"コメント"です。HTMLのソースコードの中には、ブラウザで開いた時には表示されない"コメント"を残すことができます。メモ書きのような用途で使え、頻繁に利用しますので、確実に覚えましょう。
コメントの書き方は至って簡単で、"<!--"で始まり"-->"で終わります。<!--～-->の間に書かれた内容がコメントとして扱われるため、ブラウザでは表示されません。
例：
このように記述し、複数行でもOKです。他にも、コメントを応用して、実行したくないタグをコメントにすることも可能です。
例：
<p>ここは実行したくない</p>
<p>ここは実行したくない</p>
<p>ここは実行したくない</p>
-->
・見出しをつける
見出しは<h1></h1>～<h6></h6>で表現し、h1から数字が大きくなるにつれてサイズが小さくなります。ちなみにこのページでついている見出しはh4タグを使用しています。
例：
ここではh1タグなので、「見出し」という文字が大見出しになります。
ブラウザで開いてみると、以下のようになります。通常の文字とのサイズの違いがわかるかと思います。また、見出しはその次の行との間隔が空くことで、より見出しだとわかりやすいように表示されます。
・段落を分ける
段落を表現するにはpタグを使います。pはparagraphの略で、段落を意味します(そのままですね)。
例：
先ほどの見出しと一緒に表示させると以下のようになります。
もう一つ段落を追加してみましょう。以下のように記述してみてください。
例：
<p>2番目の段落です。</p>
これをブラウザで表示すると以下のようになります。
段落毎に少し行間が空いているのがわかると思います。pタグで段落を分けるとpタグが終了した次の行との間に間隔が空きます。
では、このように間隔を空けずに改行するにはどうすればいいでしょうか。
次をご参照いただければと思います。
・改行を入れる
段落を分けるのではなく改行を入れたい場合、brタグを使用します。brには終了タグがないので、<br>と記述するだけで改行されます。
例：
2番目の段落です。</p>
これをブラウザで開くと以下のようになります。先ほどのpタグと違って改行された部分の行間が詰まっていると思います。このように単純に改行を入れたい場合は、brタグを使うと便利です。
いかがでしたでしょうか。今回説明した内容はHTMLを書くにあたって、非常に重要なものばかりです。色々と試してみて、確実に覚えましょう。
それでは、また会う日まで。
WEBページ内にリンクを貼る
リストを作成する
こんにちは、Fujibaba.com管理人です。
今回はリストの作り方を見ていきたいと思います。
まず箇条書きリストを作る方法を説明します。
<li>誰でもダウンロード販売</li>
<li>自分の作品(デジタルコンテンツ)を収益化</li>
<li>SNS機能も搭載</li>
</ul>
箇条書きを作るには、このように<ul>～</ul>で囲った中に<li>～</li>でリストを書き込んでいきます。例ではFujibaba.comの特徴をリストにしてみました。
箇条書きではなく、番号付きリストにしたい場合は、<ul>を<ol>に変更します。
<li>誰でもダウンロード販売</li>
<li>自分の作品(デジタルコンテンツ)を収益化</li>
<li>SNS機能も搭載</li>
</ol>
ちなみにですが、ulは"Unorderd List"、olは"Ordered List"、liは"List Item"の略になりますので、それぞれ覚えておくとどのタグを使えばいいか迷いません。
リスト表記は、WEBページを制作するにあたってよく使うと思いますので、覚えておきましょう。
それではまたお会いしましょう。
HTMLで表を作ろう
こんにちは、Fujibaba.com管理人です。
今回は、表の作り方を見ていきましょう。
HTMLで表を作る場合、tableタグを使います。<table>～</table>で囲まれた中が表になります。
例えば、3×3の表を作りたい場合は以下のように書きます。
<tr><th>年度</th><th>部署</th><th>売上(千円)</th></tr>
<tr><td>2011</td><td>営業</td><td>10,000</td></tr>
<tr><td>2012</td><td>開発</td><td>20,000</td></tr>
</table>
これをブラウザで表示するとこのようになります。
・trタグ
<tr>～</tr>は、TableRowの略で行を表します。
・thタグ
<th>～</th>は、TableHeaderの略で見出しを表します。
・tdタグ
<td>～</td>は、TableDataの略でセルを表します。
上記の例では、thタグで書いた部分が太字になり、見出しの役割になっているのがわかるかと思います。
それから枠線ですが、何も指定しないと枠線はありません。枠線の詳細な指定はスタイルシートで行う方が好ましいです。ただ、HTMLでも枠線は引けますので、簡単な方法だけ説明します。
枠線を引きたい場合、borderというオプションを追加するだけでいいです。具体的には以下のようになります。
<tr><th>年度</th><th>部署</th><th>売上(千円)</th></tr>
<tr><td>2011</td><td>営業</td><td>10,000</td></tr>
<tr><td>2012</td><td>開発</td><td>20,000</td></tr>
</table>
borderオプションの値を大きくするほど枠線が太くなります。0にすると何も指定していない時と同じで、枠線はなくなります。
上記をブラウザで開くとこのようになります。
全体に枠線がつきました。ただ、このままだと中のセルと周りの間に空白があって、二重に線が入っているように見えるかと思います。このままでいい場合は、特にHTMLを変更する必要はありませんが、枠線を一本のラインにしたい場合は、borderオプションの後ろにcellspacingオプションを追加し、値を0にします。
具体的には以下のような感じです。
<tr><th>年度</th><th>部署</th><th>売上(千円)</th></tr>
<tr><td>2011</td><td>営業</td><td>10,000</td></tr>
<tr><td>2012</td><td>開発</td><td>20,000</td></tr>
</table>
これをブラウザで表示するとこのようになります。
先ほどと違って枠線が二重になっていません。他にも表の見た目を変えるオプションはありますが、詳しくはスタイルシートで指定するのが好ましいので、今回はこれくらいにしておきます。
HTMLで表が作れるようになると、WEBページを作る時の幅が広がりますので、必ず覚えましょう！では、また！
WEBページにフォームを設置しよう
こんにちは、Fujibaba.com管理人です。
様々なWEBサイトでお問い合わせフォームは見たことがあるかと思います。Fujibaba.comのお問い合わせフォームはこちらです。WEBサイトの利用者にとって、お問い合わせフォームがあるとわからないことを聞くことができるので、助かりますよね。
今回はそんなお問い合わせフォームの設置について勉強しましょう。
お問い合わせフォームは、全体をformタグで囲って、中にボックスを配置していきます。では、簡単なコードを見てみましょう。
・form
formタグはそこにフォームを設置する際に記述します。オプションにある"action"は、フォームの内容を送信する時の動作について記述したPHPやCGIを指定します。今回はHTMLの豆知識になりますので、PHPやCGIの詳細については割愛させていただきます。それから、"method"オプションは、POSTとGETのどちらの形式でフォームを送信するか指定します。こちらも今回はあまり気にしなくていいです。
お気づきの方もいらっしゃるかもしれませんが、フォームを送信するには送信用のプログラムを作成する必要があります。ただ、送信用プログラムは、インターネット上で入手することもできますのでご安心ください。Fujibaba.com内にも販売・公開されているかもしれませんので、ぜひ探してみてください。こういった送信用プログラムは、簡単にカスタマイズして利用することができるように設計されているものが多いので、PHPやCGIの知識がなくても使えるようになっています。
・input
inputタグでは、フォームの種類や名前を指定します。"type"オプションでフォーム(ボックス)の種類を指定します。上記ではtextとなっていますので、テキストボックスが表示されます。"name"オプションでは、フォームが送信された時にどのデータがどの名前になっているか、といったことを指定できます。typeがtextの部分ではname="name"となっていますので、nameという名前でデータが送信されます。
・textarea
textareaは、長い文章等を入力するためのフォームになります。textareaを設置すると複数行に亘って文字を入力することができます。
上記のフォームをブラウザで表示すると以下のようになります。
いかがでしたか？今回はこのくらいにしておこうと思いますが、フォームはまだまだ勉強することがありますので、また書きたいと思います。
では、またお会いしましょう。
WEBページにフォームを設置しよう～テキスト編～
WEBページにフォームを設置しよう～パスワード編～
チェックボックス・ラジオボタン・選択リストを設置する
WEBページにフォームを設置しよう～ファイルのアップロードと隠しデータの送信～
WEBページにフォームを設置しよう～ラベルを付ける～
WEBページにフォームを設置しよう～送信ボタンの設置～
divとspanの違い
HTML内で特殊文字を使う
商品を出品したら、FacebookやTwitterなどで広めよう！
上記の”いいね”や”ツイート”ボタンをクリックするとこのページをみんなに紹介できるよ。
出品していなくてもオススメの商品をみんなに紹介しよう。
価値のあるデータを無料共有していませんか？
価値のあるデータ(動画や写真といったファイル全般)を共有サイトに無料アップロードしていませんか？
価値のあるものは、閲覧数やコメント数の伸びがよく、広告収入もあるかと思います。
その価値あるデータをもっともっとダイレクトにダウンロード販売して収益化できるのがFujibaba.comです。
違法ダウンロード刑罰化が進む中、Fujibaba.comでは違法なデジタルコンテンツは許可していません。
違法ダウンロード刑罰化の対象にならないデジタルコンテンツなので、購入される方も安心して利用できるシステムになっております。
動画,写真,イラスト,デザイン,キャラクター,電子書籍,漫画,アニメ,文章,音楽,ゲーム,Office(Word、Excel、PowerPoint),素材,アプリケーション,ソースコード,ZIP,各種テンプレート,など様々なデジタルコンテンツのデータを、法人も個人もダウンロード販売できるサイトです。！副業をするならFujibaba.com
動画のダウンロード販売
動画のダウンロード販売とは、あなたが撮影した動画、あなたが著作権を持っている動画をダウンロード販売することができます。おもしろ動画や、奇跡の瞬間動画や、スゴ技・神業動画や、講習動画や、自作のドラマ・アニメの動画や、普段は体験できない動画や、コマ撮り撮影の動画や、再生回数の多い動画シリーズや自作の音楽・ライブ動画や、情報動画や、その他かわいい動物の動画や、かわいい赤ちゃんの動画などなど、様々な動画がダウンロード販売できます。動画をアプロードするだけで副業ができます。
静止画（写真・画像）のダウンロード販売
静止画（写真・画像）のダウンロード販売とは、あなたが撮影・作成した静止画（写真・画像）、あなたが著作権を持っている静止画（写真・画像）をダウンロード販売することができます。静止画（写真・画像）とは、写真やイラストなどの画像の事を総称して静止画（写真・画像）と言います。素材として使用したり、壁紙に使用したりする写真や画像をダウンロード販売できます。写真や画像で簡単に副業ができます。
ファイルのダウンロード販売
ファイルのダウンロード販売とは、動画や静止画（写真・画像）を含むあらゆるデータでもダウンロード販売できます。zipに写真をまとめてダウンロード販売したり、PDFで書籍をダウンロード販売したり、自作のゲームやアプリケーションをダウンロード販売したり、様々な用途に使用できる著作権フリー文章のテンプレートをダウンロード販売したり、エクセルの書式のテンプレートをダウンロード販売したり、漫画本や小説その他の様々な原稿データをzipに圧縮してダウンロード販売したり、おもしろ料理や絶品料理の説明書をテキストやメモ帳でダウンロード販売したり、アフィリエイトの成功方法や成功する投資方法などの情報商材をダウンロード販売したり、PowerPointでプレゼン資料のテンプレートをダウンロード販売したりなどなど、ダウンロード販売の可能性は無限大にあります。便利なデータを販売アップロードするだけで副業できます。
動画、静止画（写真・画像）、ファイルのダウンロード購入
Fujibabaポイントを使用して動画、静止画（写真・画像）、ファイルをダウンロード購入できます。制限カテゴリーに著作権フリー、商用利用の禁止、加工の禁止の３つあるので購入する時に確認ください。
詳しくは、初めてのFujibaba.com、ダウンロード販売方法、お買物方法、ポイントについて、Fujibaba.comの魅力をご覧ください。
ダウンロード販売とは?
ダウンロード販売（ファイル販売とも言いえます）とは、動画、静止画（写真・画像）、ファイル、文章等のデータファイルを販売することです。ダウンロード販売の魅力は大きく3つに分けてご紹介します。
①ダウンロード販売の魅力は、どのようなデータでも販売できます。
ダウンロード販売の魅力は、動画、写真、画像、officeファイル、ソフト、アプリケーション、文章など、幅広いジャンルの物が販売できるという事です。パソコン上のデータであれば、ジャンルを問わずデータを販売できます。よくある例は、起業が写真をHPや企業の広告用に利用するための素材として販売していたり、動画や写真を加工するソフト、パソコンの環境を良くするためのソフトの販売などがあります。Fujibaba.comでは、企業で販売したり、個人で販売もできます。つまり、誰でも様々なデータファイルの販売が可能なのです。
②製品は自分次第で、様々な製品が販売でき、様々な製品が購入できる。
製品は自分のパソコンにある自分のデータであればどのようなデジタルコンテンツも販売できます。何気ない旅行の写真や、自分で考えたデザイン、偶然とれた奇跡の瞬間の動画、分で作ったゲーム、自分で作ったマンガ、自分で作成した文章など、考えだしたらきりがないほど様々あります。つまり、自分の個性を最大限に活かした販売が可能になるのです。つまり、誰でも副業ができるのです。自分の個性を最大限に活かした販売が可能という事は、様々な人の個性を購入でき、それを活用する事もできます。 Fujibaba.comでは、著作権フリー、商用利用の許可、加工の許可などをカテゴリーごとに分けていますので、販売されている製品をそのまま活用したり、独自に加工して活用することもできます。
③1度販売すると、在庫の心配がなく半永久的に販売可能です。つまり、何もしてないかのようで副業ができます！
物品の販売では、購入された商品は、代金と引き換えに物を渡します。ダウンロード販売では、購入された商品は、代金と引き換えにダウンロードできるようにします。つまり、オークションや中古品の販売では1度きりの販売で終わってしまうのですが、ダウンロード販売では、所有権、著作権等がある限り、半永久的に販売が可能なのです。1度販売すると、デジタルコンテンツの価値は100円にも、100万円にもなる可能性があるのです。Fujibaba.comでは、購入の代金をポイント制とし、販売で得たポイントは、好きな時に現金への交換ができます。
④収益化
今まではネットで収益化することはとても大変でした。アフェリエイト中心に広告収入でしたが、ダウンロード販売をすることで直接的な収益化が期待でき副業になります。Fujibaba.comを使用することで動画・写真、ファイルといったあらゆるデジタルコンテンツで収益化ができます。電子書籍、テキスト、アプリといったファイルも販売できるので、収益化できるデータはお客様次第！
費用無料でできる副業は限られていますが、Fujibaba.comなら簡単に誰でも副業ができます。
ダウンロード販売の魅力がわかって頂けましたでしょうか？Fujibaba.comでは、誰でも、個人でこの魅力をご活用いただけます。
まずは、自分の動画、写真などを販売してみてはいかがでしょうか？Facebookに自分の製品を告知する事もできます。アカウントを登録して、Fujibaba.comを活用してみましょう！※FacebookとTwitterアカウントでのログインもできます。
動画、静止画（写真・画像）、ファイルのダウンロード販売 Fujibaba.com（ふじばば.com、フジババ.com）
法律・マナーの順守
販売する方は著作権や肖像権を侵害しないようお願い申し上げます。
ダウンロード販売する側の注意点、制限タグ
・著作権フリー：著作権フリー、商用利用可能な場合チェックを付けてください。
・商用利用の禁止：商用利用を禁止する場合はチェックを付けてください。
・加工の禁止：加工を禁止にする場合はチェックを付けてください。
購入する側の注意点、制限タグ
・著作権フリー：著作権フリー、商用利用できます。
・商用利用の禁止：商用利用できません。
・加工の禁止：加工禁止です。
Fujibaba.comではデータのダウンロード販売以外にも、コメントのやり取りやブログの公開等、ソーシャルメディアとしてご活用いただくことも可能ですが、誰かが不快に思うような内容は決して書き込まないようお願い申し上げます。
詳しくは利用規約と著作権をご参照ください。
Fujibaba.comはすべてのユーザーが安心してデータのダウンロード販売をできるよう鋭意していきます。
動画・静止画・ファイルのダウンロード販売
Fujibaba.com
ユーザーログイン
