TechAcademy（テックアカデミー） Webデザインコース Webデザイン 最先端を感じる！HTML5で3D表現をしているサイト10選
icon
icon
Webデザイン

最先端を感じる！HTML5で3D表現をしているサイト10選

HTML5で3D表現されているサイトを集めています。最先端を感じるような出来栄えになっているサイトばかりなので、こういったものを作りたいと感化されるでしょう。立体的なサイトを作りたいという人は、ぜひ参考にしてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTML5で3D表現をしているサイトを集めてみました。特に難しい技術を使用せず、ここまでクオリティの高いものが作れるという点で参考になるはずです。

サイト上で立体的な表現をしているものは、日頃あまり見ないので新鮮さを感じるでしょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

ROME

html14_01

シンプルな雲の3D背景が広がるサイトです。

マウスを動かすことによって、雲の視点が変わり、実際に空を飛んでいるかのような感覚になります。

ROME

 

The GLOBE of ECONOMIC COMPLEXITY

html14_02

世界のお金のバランスを見やすく3Dで具現化したのがこのサイトです。ハーバード大学の学生が作り上げました。

学生でもこのクオリティのものが作れるとは感服ですね。

The GLOBE of ECONOMIC COMPLEXITY

 

[PR] Webデザインで副業する学習方法を動画で公開中

Chemdoodle

html14_03

化学結合を3Dで表現したサイトです。

高校時代にこのような方法で化学を勉強していたら、とても楽しくなること間違い無しです。

Chemdoodle

 

8-bit Destruction

html14_04

昔懐かしい8bitのドット絵を3Dで表現したのがこのサイトです。

マウスによって視点を変えることができるので、本来2Dのドット絵の横側を見ることもできてしまいます。

8-bit Destruction

 

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

Nine Point Five

html14_05

地震の起きた量を3Dで具現化したサイトです。

マグニチュードや起きた時間などで絞ることもでき、HTMLの可能性を感じるサイトになっています。

Nine Point Five

 

Materials Skin

html14_06

人の顔を3Dで表現したサイトです。

3D技術の使い道がわかるサイトだと感じます。

Materials Skin

 

1時間でできる無料体験！

Hello Racer

html14_07

リアルなF1カートを3D表現したサイトです。

車好きの方にはたまらないサイトとなっています。

Hello Racer

 

webcammesh

html14_08

Webカメラに映った映像をメッシュ表現するサイトです。

Webカメラとも連携ができるとなると、技術力の進歩を感じます。

webcammesh

 

Shapespark

html14_09

インテリアを3Dで表現したサイトです。

今後家具業界などで、このような3Dで家具のイメージを共有する技術が進んでいきそうですね。実際に自分がそこに住んでいるイメージが湧くので見ているだけでも楽しめるでしょう。

Shapespark

 

Suisse Mania

html14_10

スイスを可愛い3Dで表現したサイトです。

自然豊かなスイスを気球で旅している気分になれます。

Suisse Mania

 

以上、HTML5で作られた3Dのサイトをまとめてみました。

実際に自分が動かしてみたり、その場にいるような新鮮さを感じることができると思いますが、自分でも表現したいと思ったものがあればぜひチャレンジしてみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

【Webデザインの参考に！】海外のおしゃれサイトをまとめてみた！

日本でデザインをしていても流行りのデザインなどは、海外から影響を受けることがよくあります。サイトのデザイン面は見る人にとって第一印象になります。 そこで今...
Webデザイン

使いながら解説！効率良くコーディングできるSassとは【初心者向け】

CSSを簡単に書くための言語Sassについて解説しています。 Sassを理解するためにはまずCSSの知識の理解が必要となりますので、CSSの理解が進んでい...
CSS

もうデザインに困らない！創造性あふれるイベントサイト10選

本稿は、WebDesignerdepotのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また、本記事はEventCreateの共同創業者でありWe...
Webデザイン

表示位置を変えたい！CSSでpositionの使い方【初心者向け】現役エンジニアが解説

CSSのpositionの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSで位置の調...
CSS

無限スクロールの課題とは！スクロールが長いサイトのデザイン手法

本稿は、Smashing magazineのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事は、UXデザイナーのNick Babich氏...
Webデザイン

「かわいい！」を感じさせるデザインのWebサイトまとめ

webデザインでかわいいを表現するというのは、とても難しいと思います。そんなデザインで悩んだ時に参考になるサイトを紹介したいと思います。女性向け・子供向けのサイ...
Webデザイン

あわせてよく読まれている記事

書きながら覚えよう！Pythonで正規表現を使う方法【初心者向け】

今回は、Pythonで正規表現を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 普段見慣れない文字を入力していますが、実際に書いてみて慣れていきましょう。 目次ROMEThe GLOBE of ECONOMIC COMPLEXITYChemdoodle8-bit DestructionNine Point FiveMaterials SkinHello RacerwebcammeshShapesparkSuisse Mania そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   Pythonの正規表現とは 正規表現とは、文字列を1つのパターン化した文字列で表現する表記法です。 正規表現を使用して、文字列をパターン化した文字列に置き換えることで、文字列の検索や置換を行えます。 また、自然言語処理といったAI技術の基礎的な処理も行うことができます。   メタ文字 正規表現において、パターン化した文字列のことをメタ文字と言います。 ★は文字列を意味します。 メタ文字 説明 指定例 合致する . 任意の1文字 a.c abc, acc, aac ^ 行の先頭 ^abc abcdef $ 行の末尾 abc$ defabc * 0回以上の繰り返し ab* a, ab, abb, abbb + 1回以上の繰り返し ab+ ab, abb, abbb ? 0回または1回 ab? a, ab {m} m回の繰り返し a{3} aaa {m,n} m〜n回の繰り返し a{2, 4} aa, aaa, aaaa [★] ★のどれか1文字 [a-c] a, b, c ★|★ ★のどれか a|b a, b   特殊シーケンス よく利用される正規表現のパターンは、特殊シーケンスと呼ばれます。 特殊シーケンスは、（バックスラッシュ）を先頭に記載します。 特殊シーケンス 説明 同じ意味の正規表現 d 任意の数字 [0-9] D 任意の数字以外 [^0-9] s 任意の空白文字 [tnrfv] S 任意の空白文字以外 [^tnrfv] w 任意の英数字 [a-xA-Z0-9_] W 任意の英数字以外 [a-xA-Z0-9_] A 文字列の先頭 ^ Z 文字列の末尾  $   Pythonで正規表現を使う方法 Pythonではreモジュールを使って正規表現を扱います。 reモジュールをimportすることで正規表現を利用できます。 import re importを詳しく知りたい人は、Pythonでimportを使う方法について解説している記事もあわせてお読みください。   reモジュールには、以下のような関数があります。 match()：文字列の先頭から正規表現にマッチしている部分を返す fullmatch()：文字列全体が正規表現にマッチしているかを返す search()：文字列中で正規表現にマッチする最初の部分を返す findall()：文字列中で正規表現にマッチするすべての部分を文字列のリストで返す finditer()：文字列中で正規表現にマッチするすべての部分をイテレータとして返す sub()：文字列中で正規表現にマッチする部分を置換して返す subn()：文字列中で正規表現にマッチする部分を置換してタプル(置換後文字列, マッチした数)で返す split()：文字列を指定した正規表現で分割する それぞれの関数について、サンプルをもとに書き方を確認していきましょう。   match()関数の書き方 文字列の先頭から正規表現にマッチしている部分を返します。 結果はマッチした情報を取りまとめた「マッチオブジェクト」で返ります。 マッチオブジェクトからマッチした文字列を取り出す方法は、次の具体例でご紹介します。 マッチしない場合、Noneが返ります。 書き方のサンプル： # マッチする例 result = re.match(r'a.c', 'abcdefg') print(result) # マッチしない例(Noneが返る) result = re.match(r'a.c', 'Alphabet starts with abcdefg.') print(result) 解説： match関数で、文字列の先頭から正規表現「r’a.c’」にマッチしている部分を検索します。 マッチした場合の例では、マッチオブジェクトが返ります。 マッチオブジェクトの「span」はマッチした位置を表しています。 今回の場合、0～2文字目がマッチした位置になります(3文字目は含みません)。 実行結果： <re.Match object; span=(0, 3), match='abc'> None マッチオブジェクトの「match」はマッチした文字列を表しています。   fullmatch()関数の書き方 文字列全体が正規表現にマッチしているかを返します。 結果はマッチオブジェクトで返ります。 マッチしない場合、Noneが返ります。 書き方のサンプル： # マッチする例 result = re.fullmatch(r'a.c', 'abc') print(result) # マッチしない例(Noneが返る) result = re.fullmatch(r'a.c', 'abcde') print(result) 解説： fullmatch関数で、文字列全体が正規表現「r’a.c’」にマッチしているかを確認します。 マッチした場合の例では、マッチオブジェクトが返ります。 span、matchについてはmatch関数と同様ですので説明は省略します。 実行結果： <re.Match object; span=(0, 3), match='abc'> None search()関数の書き方 文字列中で正規表現にマッチする最初の部分を返します。 結果はマッチオブジェクトで返ります。 マッチしない場合、Noneが返ります。 書き方のサンプル： # マッチする例 result
Python

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 また、本記事は、Doru Ciobanu氏によって投稿されました。   タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。 フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。 しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。 そして、これから紹介するのは、2016年に最も売れた50のフォントです。   1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。 編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。   2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。   [PR] Webデザインで副業する学習方法を動画で公開中3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。 軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。   4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。 人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。
Webデザイン

PHPのpreg_matchで正規表現によるマッチングする方法

今回は、preg_matchについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 preg_matchを利用することで、文字列の検索や置換を行うことができます。 実務でも、preg_matchを利用した文字列の検索や置き換えを行う処理を実装するので、ぜひ学習してみてください。   目次ROMEThe GLOBE of ECONOMIC COMPLEXITYChemdoodle8-bit DestructionNine Point FiveMaterials SkinHello RacerwebcammeshShapesparkSuisse Mania   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   preg_matchとは preg_matchでは、ある文字列から正規表現で指定したパターンにマッチした文字列を検索できます。 パターンにマッチした場合は1を返し、マッチしなかったら0を返します。 例えば、検索対象の「これからphpを勉強します。」という文字列から、パターン「php」を検索すると1を返します。 一方、「ruby」を検索すると0を返します。 「php」の場合は文字列内にありますが、rubyはないのでこういった結果になります。 他にも大文字・小文字を区別せずにパターンにマッチさせることや、指定文字列が先頭にあるだけマッチさせることもできます。   正規表現とは 正規表現とは、文章中の特定文字を検索、置き換え、削除することができる文法です。 正規表現を利用する例として、文章中にある「,」という英文字のカンマを、「、」という日本語の読点に一括変換する場合などです。 その他にも、次のような使い方が可能です。 〇〇〇から始まる文字列を検索したい ×××で終わる文字列を▼▼▼に置き換えたい 大文字で始まる英単語を検索したい HTML内のcol-から始まり、そのあとは1～2桁の数字となっているコードを別のコードに置き換えたい 全角と半角、両方のスペースを削除したい 正規表現には非常に多くの指定方法があり、正規表現だけで1冊の本を書くことができるほど非常に深い内容です。 まずは、基本的な使い方を、サンプルコードを利用して使っていきましょう。     大石ゆかり 正規表現で指定したパターンにマッチするかどうかって少し難しいですね。 田島悠介 そうだね。簡単に言うと、ある形式にマッチしているかどうかってことなんだ。 大石ゆかり ある形式とは何ですか？ 田島悠介 例えばメールアドレスの形式になっているかどうかだったり、電話とか日付でもいいね。そういう単純には表せないものに使うんだよ。書き方を見てみよう！   [PR] Webデザインで副業する学習方法を動画で公開中preg_matchの書き方 preg_matchの書式は以下の通りです。 [ ]はオプションで省略できます。 preg_match(/正規表現パターン/,検索対象の文字列,[配列],[動作フラグ],[検索開始位置])   返り値 preg_match関数の返り値は、パターンにマッチすれば1、マッチしなければ0です。 返り値の部分に変数を指定することで、パターンマッチの結果である1か0が代入されます。   正規表現パターン 「正規表現パターン」でマッチさせたいパターンを指定します。 正規表現は/で囲んで記述します。   検索対象の文字列 「検索対象の文字列」では、正規表現でマッチさせる対象文字列です。   配列 「配列」を指定した場合は、検索結果が配列として代入されます。   動作フラグ 「動作フラグ」で「PREG_OFFSET_CAPTURE」を指定すると、マッチした文字列の登場した位置（オフセット）をバイト数で取得できます。   検索開始位置 「検索開始位置」では、先頭ではなく検索を始めたい位置を指定できます。 ただし、指定はバイト数なので注意が必要です。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、
PHP

JavaScriptで正規表現を使ってメールアドレスをチェックする方法を現役エンジニアが解説【初心者向け】

Web制作でメールアドレス入力フォームを作ることがあります。 入力された文字が、きちんとメールアドレスの形式になっているか確かめたいですよね。 そんな時に役立つ、JavaScriptの正規表現でメールアドレスをチェックする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 正規表現が呪文みたいでよくわからないという方、ぜひ本記事でマスターしてください。 目次ROMEThe GLOBE of ECONOMIC COMPLEXITYChemdoodle8-bit DestructionNine Point FiveMaterials SkinHello RacerwebcammeshShapesparkSuisse Mania そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptで、正規表現を使ってメールアドレスをチェックする方法について詳しく説明していくね！ 大石ゆかり お願いします！   メールアドレスチェックの方法 JavaScriptで、正規表現を使ってメールアドレスをチェックするサンプルコードはこちらです。 See the Pen pattern by TAKAYOSHI (@lspuwbkv) on CodePen. /*入力フォームの要素*/ var form=document.getElementById("form"); /*結果出力用の要素*/ var result=document.getElementById("result"); /*メールアドレスのパターン 正規表現*/ var pattern = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/; /*フォーム入力のイベントハンドラ*/ form.addEventListener("input", (e) => {     /*メールアドレスのパターンにマッチするかチェック*/     if (pattern.test(form.value)) {         /*パターンにマッチした場合*/         result.textContent = "メールアドレスです";      } else {         /*パターンにマッチしない場合*/
JavaScript

WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。 他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。 そもそもWordPressとは何なのかよく分からない方は、今さら聞けない！WordPressとは【初心者向け】をご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。   大石ゆかり 田島メンター！！WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜？ 田島悠介 WordPressを使うにはインストールや初期設定が必要なんだ。 大石ゆかり なんだか難しそうですね・・・。 田島悠介 きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。 大石ゆかり よろしくお願いします！！！   目次 WordPressのインストール手順 初期設定とインストール WordPress管理画面の基本設定 記事の投稿方法 カテゴリーとタグの管理 ユーザー管理 パーマリンクの設定 テーマの使い方 プラグインの使い方 WordPressで知っておきたいその他の設定   WordPressのインストール手順 用意するもの PHP・MySQLが使用できるサーバー(レンタルサーバーなど) 以下の条件があります。 PHP バージョン 7.4 以上 MySQL バージョン 5.6 以上 または MariaDB バージョン 10.1 以上 HTTPS対応 (2020年6月時点) FTPクライアント(今回はFileZillaを使用します) 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です) 独自ドメイン、レンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。   本体の入手とサーバーへのアップロード まずはWordPressの公式サイトのダウンロードページにアクセスしましょう。 WordPress – ダウンロード 以下のボタンをクリックしてWordPress本体をダウンロードします。 ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです) FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。 アップロードしたフォルダのある場所にアクセスします。※ ※例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。   [PR] Webデザインで副業する学習方法を動画で公開中初期設定とインストール データベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。 データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。 以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。 また、データベースの文字コードは「UTF-8」にしておきます。 「インストールを実行」をクリックします。 ここではWordPressサイトの基本的な設定を行います。 また、これらの項目は全て後でいつでも変更できます。「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。 テスト導入時などにチェックします。入力後「WordPressをインストール」をクリックします。 インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。 続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。   管理画面の基本設定 ログインするとWordPressの管理画面が表示されます。記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。   サイトの基本情報変更 左メニューの「外観」から「カスタマイズ」を選択します。 「サイト基本情報」を選択します。 サイトのタイトルとキャッチフレーズはここからいつでも変更できます。   ログイン・ログアウト方法 管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。 再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。※ ※例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
WordPress

JavaScriptで正規表現のmatchを使う方法【初心者向け】

JavaScriptで正規表現のmatchを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptで正規表現のmatchを利用することでデータの効率的に扱うことが可能になります。 実務でも正規表現を利用して、電話番号や住所データを扱うため、ぜひ学習してみてください。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。 目次ROMEThe GLOBE of ECONOMIC COMPLEXITYChemdoodle8-bit DestructionNine Point FiveMaterials SkinHello RacerwebcammeshShapesparkSuisse Mania そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！正規表現というのは何でしょうか？ 田島悠介 様々な文字列を一つの文字列で表現できるようにした表記法のことだよ。 大石ゆかり どのような書き方があるのですか？ 田島悠介 例を見ながら説明していくね！   正規表現とは 例えばユーザーが入力した文字列が、郵便番号として正しいか確認するにはどうしたら良いでしょう。 郵便番号にはいろんな数字があり、プログラムを作って確認するにしても大変そうです。 そんな時に便利なのが、正規表現です。 正規表現は、郵便番号であれば「数字4桁-数字3桁」というような文字列を表現できるようにした表記法のことです。 正規表現で指定した表記を利用して、該当パターンに合致するデータを検索できます。 JavaScriptではmatchメソッドなどで正規表現を利用できます。 matchメソッドを利用すると、matchメソッドで指定した文字列が存在した場合、指定文字列を配列で返します。 もし、存在しなかった場合はnullを返します。 matchの書き方 基本的なプログラムは以下のようになります。 対象となる文字列の後ろに「.」ピリオドを付けて記載します。 文字列.match( 正規表現 ) [PR] Webデザインで副業する学習方法を動画で公開中matchメソッドとtestメソッドとの違い ここでは、matchメソッドとtestメソッドの違いについて解説します。 testメソッドの書き方 正規表現パターン.test(対象の文字列) matchメソッドを利用すると、matchメソッドで指定した文字列が存在した場合、指定文字列を配列で返します。 もし、matchメソッドの存在しなかった場合はnullを返します。 testメソッドを使う場合、指定した文字列が存在した場合はtrueが返ります。 指定した文字列が存在しない場合はfalseが返ります。 サンプルコード   let str = "123-4567, 一二三ー四五六七, 000-1111"; let reg = /d{3}-d{4}/g; console.log( str.match( /d{3}-d{4}/g ) ); console.log( reg.test(str) ); 実行結果 解説 let str = “123-4567, 一二三ー四五六七,
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン 最先端を感じる！HTML5で3D表現をしているサイト10選