方法

ハウツーホーム

メニュー

アイコンバー メニューアイコン アコーディオン タブ 垂直タブ タブヘッダー フルページタブ ホバータブ トップナビゲーション レスポンシブTopnav アイコン付きのナビゲーションバー 検索メニュー 検索バー 固定サイドバー ページナビゲーション レスポンシブサイドバー フルスクリーンナビゲーション オフキャンバスメニュー Sidenavボタンにカーソルを合わせる アイコン付きサイドバー 水平スクロールメニュー 垂直メニュー ボトムナビゲーション レスポンシブボトムナビゲーション ボトムボーダーナビゲーションリンク 右揃えのメニューリンク 中央メニューリンク 等幅メニューリンク 固定メニュー スクロールでバーを下にスライド スクロールでナビゲーションバーを非表示 スクロールでナビゲーションバーを縮小 スティッキーナビゲーションバー 画像上のナビゲーションバー ホバードロップダウン ドロップダウンをクリックします カスケードドロップダウン Topnavのドロップダウン Sidenavのドロップダウン 応答ナビゲーションバーのドロップダウン サブナビゲーションメニュー ドロップアップ メガメニュー モバイルメニュー カーテンメニュー 折りたたまれたサイドバー 折りたたまれたサイドパネル ページ付け パン粉 ボタングループ 垂直ボタングループ スティッキーソーシャルバー ピルナビゲーション レスポンシブヘッダー

画像

スライドショー スライドショーギャラリー モーダル画像 ライトボックス レスポンシブ画像グリッド 画像グリッド タブギャラリー 画像オーバーレイフェード 画像オーバーレイスライド 画像オーバーレイズーム 画像オーバーレイタイトル 画像オーバーレイアイコン 画像効果 黒と白の画像 画像テキスト 画像テキストブロック 透明な画像テキスト フルページ画像 画像上のフォーム ヒーロー画像 背景画像をぼかす スクロールでBgを変更する サイドバイサイド画像 丸みを帯びた画像 アバター画像 レスポンシブ画像 中央の画像 サムネイル 画像の周りの境界線 チームに会う スティッキー画像 画像を反転する 画像を振る ポートフォリオギャラリー フィルタリングを備えたポートフォリオ 画像ズーム 画像拡大鏡ガラス 画像比較スライダー ファビコン

ボタン

アラートボタン アウトラインボタン 分割ボタン アニメーションボタン フェージングボタン 画像のボタン ソーシャルメディアボタン 続きを読む続きを読む 読み込みボタン ダウンロードボタン ピルボタン 通知ボタン アイコンボタン 次/前のボタン ナビゲーションのその他のボタン ブロックボタン テキストボタン 丸いボタン トップボタンまでスクロール

フォーム

ログインフォーム サインアップフォーム チェックアウトフォーム お問い合わせフォーム ソーシャルログインフォーム 登録フォーム アイコン付きのフォーム ニュースレター スタックフォーム レスポンシブフォーム ポップアップフォーム インラインフォーム 入力フィールドをクリア 数字の矢印を隠す テキストをクリップボードにコピーする アニメーション検索 検索ボタン 全画面検索 ナビゲーションバーの入力フィールド Navbarのログインフォーム カスタムチェックボックス/ラジオ カスタム選択 トグルスイッチ チェックボックスをオンにします CapsLockを検出する Enterのトリガーボタン パスワードの検証 パスワードの可視性を切り替える マルチステップフォーム オートコンプリート オートコンプリートをオフにする スペルチェックをオフにする ファイルアップロードボタン 空の入力検証

フィルタ

フィルタリスト フィルターテーブル フィルタ要素 フィルタのドロップダウン ソートリスト スペルテーブル

テーブル

ゼブラストライプテーブル センターテーブル 全幅テーブル 並べたテーブル レスポンシブテーブル 比較表

もっと

フルスクリーンビデオ モーダルボックス モーダルを削除 タイムライン スクロールインジケーター プログレスバー スキルバー レンジスライダー ツールチップ 表示要素ホバー ポップアップ 折りたたみ可能 カレンダー HTMLに含まれるもの やることリスト ローダー 星評価 ユーザー評価 オーバーレイ効果 コンタクトチップ カード フリップカード プロフィールカード 製品カード アラート 叫ぶ ノート ラベル サークル スタイルHR クーポン リストグループ 箇条書きなしのリスト レスポンシブテキスト カットアウトテキスト 輝くテキスト 固定フッター スティッキーエレメ​​ント 等しい高さ Clearfix レスポンシブフロート スナックバー フルスクリーンウィンドウ スクロール図面 スムーズスクロール グラデーションBgスクロール スティッキーヘッダー スクロールでヘッダーを縮小 価格表 視差 アスペクト比 レスポンシブIframe 好き/嫌いを切り替える 非表示/表示を切り替えます ダークモードを切り替えます テキストを切り替えます トグルクラス クラスを追加 クラスを削除 アクティブクラス ツリー表示 プロパティを削除 オフライン検出 隠された要素を見つける Webページをリダイレクトする ズームホバー フリップボックス 垂直方向に中央に配置 DIVの中央ボタン ホバーでの遷移 矢印 ダウンロードリンク フルハイト要素 ブラウザウィンドウ カスタムスクロールバー スクロールバーを非表示 スクロールバーの表示/強制 デバイスルック コンテンツ編集可能な境界線 プレースホルダーの色 テキスト選択色 弾丸の色 垂直線 仕切り アイコンをアニメーション化する カウントダウンタイマー タイプライター 近日公開ページ チャットメッセージ ポップアップチャットウィンドウ 画面を分割 お客様の声 セクションカウンター スライドショーを引用 クローズ可能なリストアイテム 典型的なデバイスブレークポイント ドラッグ可能なHTML要素 JSメディアクエリ シンタックスハイライト JSアニメーション JS文字列の長さ JSべき乗 JSのデフォルトパラメータ 現在のURLを取得 現在の画面サイズを取得する Iframe要素を取得する

Webサイト

無料のウェブサイトを作成する ウェブサイトを作る 静的なWebサイトを作成する ウェブサイトを作る(W3.CSS) ウェブサイトを作る(BS3) ウェブサイトを作る(BS4) ウェブサイトを作る(BS5) Webサイトを作成して表示する リンクツリーWebサイトを作成する ポートフォリオを作成する 履歴書を作成する レストランのウェブサイトを作る ビジネスのウェブサイトを作る WebBookを作成する センターのウェブサイト 連絡先セクション ページについて ビッグヘッダー ウェブサイトの例

グリッド

2列のレイアウト 3列のレイアウト 4列のレイアウト グリッドの拡張 リストグリッドビュー 混合列レイアウト コラムカード ジグザグレイアウト ブログのレイアウト

グーグル

Googleチャート Google Fonts Googleフォントペアリング Googleセットアップアナリティクス

コンバーター

重量を変換する 温度変換 長さの変換 変換速度

ブログ

開発者の仕事を得る フロントエンド開発者になる。

方法-無料のウェブサイトを作成する


W3SchoolsSpacesを使用してWebサイトを構築およびホストします。

数回クリックするだけで無料のウェブサイトを始めましょう。

ブラウザで必要なものすべて。

使い方は簡単です-試してみてください!

無料で始めましょう»

W3SchoolsSpacesで最初のWebサイトを作成する

W3Schools Spacesは、コードを作成して実験し、独自のWebサイトをホストできる個人的な場所です。

W3Schools Spacesを使用すると、HTML、CSS、およびJavaScriptを使用して構築できます。

ブラウザで直接コードを編集します。

ファイルと画像をアップロードしてホストします。

今日からオンラインでの存在感を高めましょう!


なぜW3SchoolsSpacesで構築するのですか?

Spacesは、Web開発者がWeb開発者のために作成したものです。

  1. インターフェースはシンプルで使いやすいです。
  2. ブラウザでファイルをホストおよび編集します。
  3. 無料のテンプレート。

開始は無料で、クレジットカードを入力する必要はありません。


コードの編集とプレビュー

エディターは使いやすく、最も重要なことに集中するのに役立ちます。

さまざまなプレビューの選択肢を使用して、サイトの応答性を確認してください。

サイトの変更をライブでプレビューします。


どこからでも構築

ファイルと画像をクラウドでホストします。

フォルダを使用して構造を作成し、整理してください。

ブラウザで必要なものすべて。


無料テンプレート

レスポンシブウェブサイトのテンプレートを閲覧して使用します。

それらを変更、保存、共有し、プロジェクトで使用します。

The templates are powered by W3.CSS


What Do I Need to Know to Get Started?

HTML, CSS and JavaScript are the foundational languages to build a website.

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML »
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS »
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript »

Do not worry if you do not know how to code. The most important thing is to get hands on, early on. Learning how to code is best done with getting practical. Start to build something today!


Lets Get Started in a Few Steps

Do you already have a W3Schools Account? If so, skip the first step


Step One: Sign Up For an Account

To be able to use Spaces you need to sign up and get your account.

Lets get you set up!

Go to - Click "Sign up" and enter your email and password, then click the "Sign up for free" button.

Remember to validate your account in your email. Check the spam filter if you cannot find the validation email in your inbox.

Get more information about how to sign up in our article - How to sign up


Step Two: Start with a template or HTML skeleton

Go to

Select one of the options and click the "Continue" button.

Do not worry too much about this decision. You can reset your Space and start over again whenever you want.


Step Three: Give your space a name

Personalize your Space by giving it an amazing name.

You can not use special letters in the name, such as (#, ! or :). The only exception is dash ( - )

The name will be the link that you share with others to see your site. For example: yourname.w3spaces.com


Step Four: Enter your space

Great job! you made it to the dashboard.

In the dashboard you get an overview of your spaces and usage.

Enter your space and its File Overview by clicking somewhere on the space's row or click the button with the three dots to the right inside the row.

You can only have one space with the free plan. However, you can always upgrade to get more spaces.


Step Five: Edit code or upload files

This is where the magic happens!

Start to edit code or upload files

  • Edit code by clicking on the "Pen icon" to the right of the file that you want to edit.
  • Create new files by clicking on the "New file" button.
  • Upload files by clicking on the "Upload files" button.

Step Six: Publish your site and share it with someone

This is the start of building your online presence.

Learn, test, build, and go live with your space.

Create your website and share it with others.

Note: Your space name with the .w3spaces.com extension is your shareable link. Read more about how to share your space in this article How can I share my space?


W3Schools Spaces

W3Schoolsスペース

Build your own website with W3Schools Spaces.

Get Started for Free