WEEBLYの教科書
  • Weeblyを始めよう!
    • このHPについて
    • 直感的につくれるWeebly
    • Weeblyの教科書での学び方
    • WEB作成の基礎知識ご案内
    • Weeblyで制作依頼の費用
    • News & Topics
    • 管理人コラム
    • セミナー情報 >
      • Weebly Lesson 1
      • Weebly Lesson 2
      • 4時間で学ぶHTML >
        • テキストダウンロード
      • VScodeインストール
  • weeblyについて
    • Weeblyの特長 >
      • Weeblyの無料と有料プラン
      • 特長01 ドラッグ&ドロップで簡単編集
      • 特長02 100種類以上の豊富なデザイン
      • 特長03 強力なホスティング
      • 特長04 迅速で役立つサポート
      • 特長05 簡単なブログ設置&投稿
      • 特長06 優れた画像編集機能
      • 特長07 優れた画像設置・編集機能
      • 特長08 簡単なビデオ、オーディオ配置
      • 特長09 フォームも簡単設置&高度な編集機能
      • 特長10 詳細なトラフィック統計情報が確認できる
      • 特長11 独自ドメインホスティング
      • 特長12 無料版でも広告表示なし
      • 特長13 スマホ、タブレットから編集できる専用アプリ登場!
      • 特長14 さらなる高機能なツールが続々登場!
    • CMSの種類と選び方 >
      • CMSとは
      • 他のCMSとの比較
      • こんなCMSは利用するな!
    • Weeblyのメリット、デメリット >
      • Weeblyをすすめない場合
    • これからのHPとは?
    • 役立つホームページとは
    • 事業に役立つHPの作り方
  • サイトを作ってみよう!
    • はじめに-ホームページ作成準備 >
      • 構成を考えよう!
      • 素材を用意しよう!
    • Weebly登録・設定・基本操作 >
      • Step 01 登録&スタート
      • Step 02 デザインテーマの設定・変更
      • Step 03 仮ドメインで始めよう!
      • ​Step 04 ドメイン豆知識
      • Step 05 サイト設定
      • Step 06 サイトの管理画面
      • Step 07 編集操作画面
      • Step 08 編集操作の基礎知識
    • サイト作成・編集 >
      • 編集操作項目一覧
      • ページの追加・削除
      • 画像と文字の配置・編集
      • ギャラリーの配置・設定
      • スライドの配置・設定
      • HD動画・YouTube動画の配置と設定
      • 地図(Google Map)の配置・設定
    • SEO設定について
    • 独自ドメイン設定方法
    • ドメイン設定にかかる時間
  • 逆引き
  • 機能を拡張しよう!
  • Q&A
  • 操作・設定のお問合わせTOP
    • Weebly何でも相談室
    • Weeblyへの移行のご相談・依頼
    • Weeblyサイトのブラッシュアップご相談・依頼
    • Weeblyサイト運営サポートのサブスク(自社サイト向け)
    • Weeblyサイト運営サポートのサブスク(サイト制作者向け)
  • Weeblyで制作したHP例一覧
    • 制作事例01-SIX SENSES
    • 制作事例02-いけばな作家 大泉麗仁
    • 制作事例03-アクロキューブ株式会社
    • 制作事例04-mom healing
    • 制作事例05-光苑 -書道教室-
    • 制作事例06-マウスガード -EPOCH-
    • 制作事例07-(株)ハイパフォーマー
    • 制作事例08-高橋工業有限会社
    • 制作事例09-横浜精密 精密ゲージ製作会社
    • 制作事例10-ミズモリサーチ 水漏れ調査第三者機関
    • 制作事例11-イタリアンレストラン TRATTORIA TOMATO
    • 制作事例12-脱毛専門Beauty Salon Bliss


WEBサイト作成のための基礎知識
これからホームページを始められる方、リニューアルをお考えの方
「WEB Siteの作り方・運営の仕方」オンライン講座のご案内

ホーム > このHPについて > WEB作成の基礎知識ご案内

​| WeeblyはWordPressと同じようなCMSのひとつです。

すべてのホームページはHTMLコードで書かれている.html書類をブラウザーが読み込んで表示しています。
HTMLコードの基礎的な知識があればWordPressでもWeeblyでも、他のCMSでもHTMLコードを編集できる基礎的な知識があれば、部分的に調整したり、CMSで用意されていない機能の表示も作れるようになります。

■ ちょっと豆知識

画像
ほとんどすべてのホームページはHTMLコードで書かれた.html書類で出来ています。
「ハイパー・テキスト・マークアップ・ランゲージ」の頭文字です。
脚本で言えば、役者がしゃべる「セリフ」がホームページでは「表示されるテキスト」です。
役者の動作、喋り方など脚本にはセリフ以外にもト書きがありますね。
それらト書きにあたる記述がHTMLコードでは「タグ」と言われているコードで記述していきます。
「タグ」は、文章構造のそれぞれの機能によって違うものを使って行きます。
画像
演劇で舞台の設定やシーンの演出、衣装など見える部分の指定はHTMLコードの中に「スタイル」として記述していきます。
「タグ」で設定した文章構造のそれぞれにどのような表示で見せるかを「スタイル」でひとつひとつの「タグ」に設定していきます。
この「スタイル」だけをまとめて記述した書類のことを「CSS(カスケーテッド・スタイル・シート)」といいます。
「スタイル」ですべての見え方、表示のされ方を記述していくわけです。

WEBサイトを含めたWEB知識を学びましょう


​| ウェブサイトを作成する前にWEBのこと、サイトの役割について基礎的なことを学びませんか。

ストリートアカデミーでオンラインで学べる「事業に役立つウェブサイトの役割、作成・運営方法の基礎知識セミナー」を開催しています。
写真
ホームページを作成する前にぜひ知っておいた方が後で役立つ、無駄な寮力やコストを掛けずに済む知識が学べる2時間の講座です。
2時間学ぶだけでWEBの基礎的な知識が身につきます。
ストリートアカデミーでオンライン講座を実施しています。
​「事業に役立つウェブサイトの役割、作成・運営方法の基礎知識セミナー」

■事業に役立つウェブサイトの役割、作成・運営方法の基礎知識セミナー 2時間
→〈レベル〉
  • ホームページを作成する前に知っておいてほしい基礎的な知識方
  • 自分でもできるSEOの基礎知識を学びたい方
  • HTML,CSSなどの専門的知識に乏しい方
  • ホームページ作成・運営についての全般的な基本知識を学びたい方
  • 自分でHPを作成・編集できるようになりたいと思っている方
  • SNS(Twiter、Instagram、Facebook)の活用方法を学びたい方

​| HTML,CSSの基礎知識はUdemyで3時間でオンラインで学べます。

通常24,800円が今なら1,800円で受講できるクーポン発行しています。

ホームページを作っていくためにはWordPressであれ、Weeblyであれ、他のCMSであってもHTML,CSSのことが基礎的なことを理解してから編集すると、構造や機能、ツールの役割など分かってきます。
HTML,CSSの編集ができるのはWEBデザイナーやWEBコーダーを目指して3ヶ月から6ヶ月ほどのWEBスクールとかに通ってしか実践的に身につくものではありませんが、Weeblyでサイト制作するにはHTML,CSSのことを全く知らなくても作れます。
しかし、HTML,CSSの基本的な構造や役割を学ぶことでホームページはどのように作られているのか分かってきますので、Weeblyやその他CMSを使ってホームページを作る場合でも役にたちます。
3時間のオンラインビデオ講座を学ぶだけでHTML,CSSの基本的な知識が身につきますので、ぜひ時間を作って観てください。

Udemy HTML基礎知識 「HTMLコードのルールが3時間で分かって編集できるようになる即効役立つ基礎知識早わかり講座​」

画像
写真
通常受講価格24,800円
​2023年10月17日まで1,800円で受講できるクーポンを発行しています。
クーポンコード

650F6031C206A5941771

Udemyでオンライン講座を実施しています。
「HTMLコードのルールが3時間で分かって編集できるようになる即効役立つ基礎知識早わかり講座​」
こちらの講座は
■「4hでWEBサイトのHTMLが編集できるようになる超初心者向講座」
サイト編集基礎講座
→〈レベル〉
  • HTML,CSS,〈タグ〉〈スタイル〉の知識は全く無いに等しい人
  • HTML,CSS,〈タグ〉〈スタイル〉がよく分からないので編集できない人
  • HTML,CSS,〈タグ〉〈スタイル〉はなんとなく分かっているけどWordPressが編集できない人​

これからのHPとは
役立つHPの作り方

操作方法についてご質問

共有できるご質問へは無料でご案内しています。
個別案件は内容によって有料の場合があります。
お気軽にご相談ください。
操作質問フォーム

Weeblyでサイト作成相談・依頼

¥55,000-(税別)〜 +オプションで制作します。詳しくはお問合せください。
​お気軽にご相談ください。
新規作成・ご相談フォーム

Weeblyへサイト移行相談・依頼

他のCMSからデザインブラッシュアップも含め¥55,000-〜 +オプションで制作しています。
​お気軽にご相談ください。
サイト移行・御相談フォーム

Weeblyで作成したサイトを
​ブラッシュアップ相談・依頼

既存のWeeblyで作成しているサイトをデザイン、レイアウト、構成などブレッシュアップ等​お気軽にご相談ください。
Weebly制作サイトをブラッシュアップ相談・依頼

Weeblyサイトの編集・運営をサポートするサブスクリプション始めました。

Weeblyサイトの運営・編集サポート ​サブスクリプション(自社サイト運営者向け)
Weeblyサイトの運営・編集サポート ​サブスクリプション ​(サイト制作者向け)

Weeblyの基本設定・操作・集客できるサイト運営など、オンラインセミナー開催しています。

事業に役立つウェブサイトの役割、
​作成・運営方法の基礎知識セミナー

セミナー情報・開催リクエスト

個人・小規模事業者におすすめ
​HP作成 CMS Weebly

セミナー情報・開催リクエスト

優れたCMS-Weeblyの
​操作方法プライベートレッスン1時

セミナー情報・開催リクエスト

4hでWEBサイトのHTMLが編集できるようになる
超初心者向講座

セミナー情報・開催リクエスト

Weeblyでサイトの制作を開始する

Weeblyを開始する前に、このサイトのTOPページに有る
「Weeblyをはじめる前に」を一読ください。
トラブル回避のためにぜひ、お読みください。

Weebly.comを始めたい方は
Weeblyのバナーをクリック ▶▶▶
登録からサイトOPENまで ▶
写真

サイトマップ

ホーム
このHPについて
├ HPの作り方無料プレゼントのご案内
└ これからのHPとは?
    ├ 役立つHPの作り方
    ├ 事業に役立つHPの作り方
    └
こんなCMSは利用するな
└ Weebly.comの特長
    ├ 他のCMSとの比較
    ├ Weeblyの有料プラン紹介
    └ Weeblyメリット、デメリット
└ Weeblyの特長の詳細 
 ├ ドラッグ&ドロップで作成
    ├ 豊富なデザイン
    ├ 強力なホスティング
    ├ 迅速で役立つサポート
    ├ 簡単ブログ配置&編集
    ├ 優れた画像設置・編集機能      
    ├ 簡単なビデオ,オーディオ配置
    ├ フォームも簡単配置・編集
    ├ トラフィック統計
    ├ 独自ドメインホスティング
    ├ 無料版でも広告なし
    └さらなる様々な機能
└  こんなHPが作れます!
 サイトを作ってみよう!
​
└ホームページの作成準備
 ├ サイトの構成を考えよう!
 └  素材を用意しよう!
​
└ WEEBLY登録・設定・基本操作
 └ Step01登録&スタート
     ├ デザインの選択
​  
└ コラム・ドメインについて
 ├Step02 サイトの設定
 
├ Step03 サイトの管理画面
 
├ Step04 サイトの編集操作画面
 └ Step05 サイトの編集操作の基礎知識

└ サイト作成・編集
 
└ 編集操作項目一覧
     ├ デザインテーマの変更
     ├ ページの追加・編集
  └ タイトルを横長のロゴ画像に変更
    └ ブログページの追加・編集
       └ SNSと連携設定
    ├ 画像と文字の配置・編集
    
├ 複数の画像をポートフォリオ表示
    ├ 複数の画像をスライド表示
    ├ 動画の配置
    ├ リンクボタンの配置
    ├ Google Adsenseの配置
    ├ Google Mapの設置
    ├ ブログ一覧(RSS FEED)の設置
    ├ お問合せフォームの設置・編集
    ├ アンケートの設置・編集
    ├ Googleカレンダーの設置
    ├ オリジナルHTMLコードの設置
    ├ ページ内検索BOXの配置
    └ ダウンロード書類の配置
└ SEO対策の設定 
機能を拡張しよう!
├ Facebook「いいね!」boxの設置
├ Fecebook Recommend Boxの設置
└ Twitter連携BOXの設置

Q&A

カスタマイズ(有料会員専用)
├ RSS FEEDの設定&カスタマイズ
├ カスタムHTMLの設定
├ CSS3を活用した設定
├ デザインのカスタマイズ
├ ナビのカスタマイズ
└ フッターのカスタマイズ
└ Google Analitycsの設置
└ Google Webmasterコードの設置

お問合せ
└ 有料サポートのご案内

管理人プロフィール

2012- Copyright © Weeblyの教科書. All Rights Reserved

  • Weeblyを始めよう!
    • このHPについて
    • 直感的につくれるWeebly
    • Weeblyの教科書での学び方
    • WEB作成の基礎知識ご案内
    • Weeblyで制作依頼の費用
    • News & Topics
    • 管理人コラム
    • セミナー情報 >
      • Weebly Lesson 1
      • Weebly Lesson 2
      • 4時間で学ぶHTML >
        • テキストダウンロード
      • VScodeインストール
  • weeblyについて
    • Weeblyの特長 >
      • Weeblyの無料と有料プラン
      • 特長01 ドラッグ&ドロップで簡単編集
      • 特長02 100種類以上の豊富なデザイン
      • 特長03 強力なホスティング
      • 特長04 迅速で役立つサポート
      • 特長05 簡単なブログ設置&投稿
      • 特長06 優れた画像編集機能
      • 特長07 優れた画像設置・編集機能
      • 特長08 簡単なビデオ、オーディオ配置
      • 特長09 フォームも簡単設置&高度な編集機能
      • 特長10 詳細なトラフィック統計情報が確認できる
      • 特長11 独自ドメインホスティング
      • 特長12 無料版でも広告表示なし
      • 特長13 スマホ、タブレットから編集できる専用アプリ登場!
      • 特長14 さらなる高機能なツールが続々登場!
    • CMSの種類と選び方 >
      • CMSとは
      • 他のCMSとの比較
      • こんなCMSは利用するな!
    • Weeblyのメリット、デメリット >
      • Weeblyをすすめない場合
    • これからのHPとは?
    • 役立つホームページとは
    • 事業に役立つHPの作り方
  • サイトを作ってみよう!
    • はじめに-ホームページ作成準備 >
      • 構成を考えよう!
      • 素材を用意しよう!
    • Weebly登録・設定・基本操作 >
      • Step 01 登録&スタート
      • Step 02 デザインテーマの設定・変更
      • Step 03 仮ドメインで始めよう!
      • ​Step 04 ドメイン豆知識
      • Step 05 サイト設定
      • Step 06 サイトの管理画面
      • Step 07 編集操作画面
      • Step 08 編集操作の基礎知識
    • サイト作成・編集 >
      • 編集操作項目一覧
      • ページの追加・削除
      • 画像と文字の配置・編集
      • ギャラリーの配置・設定
      • スライドの配置・設定
      • HD動画・YouTube動画の配置と設定
      • 地図(Google Map)の配置・設定
    • SEO設定について
    • 独自ドメイン設定方法
    • ドメイン設定にかかる時間
  • 逆引き
  • 機能を拡張しよう!
  • Q&A
  • 操作・設定のお問合わせTOP
    • Weebly何でも相談室
    • Weeblyへの移行のご相談・依頼
    • Weeblyサイトのブラッシュアップご相談・依頼
    • Weeblyサイト運営サポートのサブスク(自社サイト向け)
    • Weeblyサイト運営サポートのサブスク(サイト制作者向け)
  • Weeblyで制作したHP例一覧
    • 制作事例01-SIX SENSES
    • 制作事例02-いけばな作家 大泉麗仁
    • 制作事例03-アクロキューブ株式会社
    • 制作事例04-mom healing
    • 制作事例05-光苑 -書道教室-
    • 制作事例06-マウスガード -EPOCH-
    • 制作事例07-(株)ハイパフォーマー
    • 制作事例08-高橋工業有限会社
    • 制作事例09-横浜精密 精密ゲージ製作会社
    • 制作事例10-ミズモリサーチ 水漏れ調査第三者機関
    • 制作事例11-イタリアンレストラン TRATTORIA TOMATO
    • 制作事例12-脱毛専門Beauty Salon Bliss