【HTML初心者入門】スマホ用サイトを作るためのおすすめ記事 5 選! | WEBCAMP NAVI
【2月の受講枠も残りわずか】

【HTML初心者入門】スマホ用サイトを作るためのおすすめ記事 5 選!

スマートフォンでWebブラウザやWeb表示機能を有するアプリでのサイト閲覧は既に世間では当たり前のことかと思います。しかし、いざ作るとなるとそのアプローチ方法はさまざまですし、PC向けとは勝手が 違ったりすることがあります。(PC開発のみやってきた人は尚更です)

ここでは、スマートフォン向けのWEB開発についてまとめます。HTML5やCSS3、jQuery MobileなどJavaScriptフレームワークを使ったスマートフォン向けのWebアプリケーション開発に関する記事、HTMLやCSS、JavaScript/jQuery自体を学習するのに役立つ記事をご紹介します。

サイトのご紹介

1. スマホ向けサイト制作3手法の基礎知識と課題、OS/機種依存のハマリどころ3選

http://www.atmarkit.co.jp/ait/articles/1210/22/news016.html

スマートフォン向けWebサイト構築支援ツールを開発されている方の記事です。構築支援ツールということで、ありとあらゆるスマートフォン・タブレットで作業されている関係上、サイト構築の詳細までとてもわかりやすい内容になっています。実際に作り始める前に一通り確認しておけば制作過程がスムースになると思います。


転職成功率98%の【DMM WEBCAMP】で需要の高まるITエンジニアに転職しよう!
フルタイムのコミット型学習と手厚いキャリアサポート!
万が一転職できない場合は、全額返金の転職保証付き!
条件を満たすことで最大56万円のキャッシュバックも受けられます。
まずはお気軽に無料カウンセリングへ!

\参加者満足度99%!/
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

2. 5分で分かるレスポンシブWebデザイン

http://www.atmarkit.co.jp/ait/articles/1301/28/news068.html

スマートフォン向けのサイトといえば、まずは流行りのレスポンシブWebデザインを 考えると思います。レスポンシブ、スマホやPCなど様々な形態の端末から参照しても統一的に見えるデザインのことです。この記事では、いくつかのカテゴリに分けて説明してあり、レスポンシブデザインへの取り組みについて順序だって理解していくことが可能になっています。

3. もう、Webはブラウザという制約に縛られなくていい

http://www.atmarkit.co.jp/fwcr/special/hello_html5ux/01.html

Webサービスにおけるユーザーエクスペリエンス、つまり満足度を考え、現在のHTML5全盛のこの時代にどういったアプローチが有効なのかを紹介されています。特にハードウェア連携を実現する機能について取り上げられており、ユーザにわかりやすく影響を与え、何らかの身体的動作を伴うこの連携はユーザーの心に残りやすいという特徴があるいうことから、アプローチとして非常に有効です。

今までのWEBといえばブラウザで情報を文字や画像や映像で表示というだけでない、制約など今はないということをわかる記事になっています。

4. 「HTML5“とか”アプリ開発入門」

http://www.atmarkit.co.jp/fwcr/design/index/index_html5appli.html

制作方法やデザインの勉強ももちろんですが、まずはJavaScriptのAPIやCSS3、SVGなどを含め現在の主流である「HTML5」そのものが理解できていないとなかなか先へ進めません。この記事では「HTML5」の基本を学べる入門の内容となっています。まずはここから始めてみましょう。

5. タッチデバイスを指で快適に操作させるために

http://www.atmarkit.co.jp/ait/articles/1210/24/news023.html

スマートフォンと切っても切れない技術といえば、タッチデバイスです。タッチデバイスUIの特徴とその癖から、HTML5のWebアプリで実現するポイントWEBでのタッチイベント仕様について語られている記事です。PCのサイトではまず考えなかった点であり、すぐにはなじめないかもしれませんが今後必須のものですので、しっかり押さえておきましょう。


国内最大級のプログラミングスクール【DMM WEBCAMP】
手厚いキャリアサポートと高品質の学習カリキュラムで驚異の転職成功率98%!
あなたも、IT業界で輝くエンジニアになりませんか?
本気で人生を変えたい方は、ぜひ無料カウンセリングへ!

\参加者満足度99%
エンジニア転職のプロに無料で相談する!
※最短1分で申し込み可能

まとめ

基本的には、PCのWEBサイトと考え方は一緒なのですが、PCはほとんどのユーザが同じシーンで使うのに対し、スマートフォンでは様々なシチュエーションや環境で使うことがあるため、より細かい配慮が必要になっていきます。

それらを考慮されたサイトはとても見やすいものになりますので、制作の際には考慮してみてください。

 

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点