シバタヒロノリ | Webクリエイター @hilosiva Twitter profile | Pikagi

Pikagi

シバタヒロノリ | Webクリエイター

@hilosiva

4,646

Followers

419

Following

118

Media

24,353

Statuses

Qlio 代表 | Webクリエイター養成所 #Shibajuku 主幹 | Web制作学習サイト #CreatorQuest 運営 | HAL大阪夜間部Webデザイン学科非常勤講師 | 拙著 #武器になるHTML | コーヒーとウイスキーを愛飲

日本大阪

https://t.co/Zr6KDWMaAB

Joined November 2010

Don't wanna be here? Send us removal request.

Pinned Tweet

@hilosiva

シバタヒロノリ | Webクリエイター

4 months

一瞬開発をやめようかと思った #Shibajuku Homeは今こんな感じです。サロンメンバーさんのみログイン可能で、録画授業や教材、スニペット、コラムなどが見れたり進捗管理ができたりします。一応チャット機能も開発しました。まだまだ実装したい機能が盛りだくさんですが、自分のスキルとの勝負です。

6

4

103

Last Seen Profiles

@TeamWE

@memesmymemes

@katyrixuhave

@_raythesavage

@LukeSchoonmaker

@thehowie

@miyaaaaofc_

@Nyaomiii_

@dmilfordtkasa

@yonaka_nemu

@NachoFradejas

@ilovejenomark

@thatsotruu

@si271828

@ArtilleryBot

@lovenct23times

@janekleeb

@doylejr

@CufasOK

@oc4Uh366q5Byi

@mmorl89

@CarlosMValdes1

@papito_ray

@SoulmaticLDN

@Claudette966

@SkaldRpg

@slenderbabes

@jancydinho

@MccartyRandy

@ZgEdits

@opensea

@scodrax

@feRA1828

@davidcstaneda

@kudasai_japan

@qin_duke

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

執筆させて頂いてたHTML本がお披露目できる形になりました。よく使う要素や属性に絞って、僕なりの言葉や解釈で初学者の方に向けた解説を書いてたら、HTMLだけで400ページ超えの本となりました。これからHTMLの勉強を始める方のお供になれたら嬉しいです。＃武器になるHTML

Tweet card media

武器になるHTML

武器になるHTML

www.amazon.co.jp

19

99

656

@hilosiva

シバタヒロノリ | Webクリエイター

5 years

ハンバーガーボタンって色んな作り方がありますよね。 span要素3個並べてる方法がよく見かけますが、個人的にはbutton要素がベストだと思っています。そこで、ちょっと僕なり方法を記事にしてみました。ハンバーガーボタン何で作ってる？僕なりの作り方を解説してみる。

Tweet card media

ハンバーガーボタン何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku

ハンバーガーボタンの作り方はググればたくさん出てくると思います。span要素を3個並べたやつとか、チェックボックスを使ったパターンが多いと思いますが、個人的には、button要素で要素で作るのがベストだと思います。そこで僕流のハンバーガーボタンの作り方を紹介します。 %

3

81

516

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

「JavaScript書けますか？」と聞かれても、「JavaScript書けます」とは永遠に言える気がしない。

8

36

530

@hilosiva

��バタヒロノリ | Webクリエイター

3 years

この度、技術評論社さんにお声がけ頂きHTMLの本を執筆させて頂くことになりました。編集のフジタさん（ @k7penguin ）と一緒に濃厚なHTMLの本を作れるように頑張ります。

22

33

463

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

レスポンシブのコードをデベロッパーツールで表示確認をしているだけでは実機で見た時にずれることありますよね。 VScodeを使って実機で見る方法を書いて見ました。 Visual Studio Code のLive Serverを使って実機（iPhoneなど）でプレビューする方法。（WordPressも可能）

Tweet card media

Visual Studio Code のLive Serverを使って実機（iPhoneなど）でプレビューする方法。（PHPなども可能） - Shibajuku

レスポンシブのコーディングなどをしている時、デベロッパーツールなどで表示確認をしているだけでは、実機で見た時に表示がずれることもありますよね。VSCodeの拡張機能である「LIve Server」を使って実機でプレビューする方法をご紹介します。

0

44

376

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

HTMLのアウトラインチェックする時、「HTML5 Outliner」ってGoogle Chromeの拡張機能が楽だから使ってる。

1

32

294

@hilosiva

シバタヒロノリ | Webクリエイター

1 year

久しぶりにブログを書きました。なぜHTMLだけなのか。拙著「武器になるHTML」の執筆を通して伝えたかったこと #武器になるHTML #Shibajuku

Tweet card media

なぜHTMLだけなのか。拙著「武器になるHTML」の執筆を通して伝えたかったこと - Shibajuku

2022年11月26日に「武器になるHTML」というHTML本を出版致しました。HTMLだけで424ページというボリュームの入門書になります。一般的にHTMLとCSSをセットで紹介している書籍が多い中、本書ではHTMLのみにフォーカスした理由やこの書籍を通してお伝えしたいことをご紹介します。

1

44

254

@hilosiva

シバタヒロノリ | Webクリエイター

5 years

まだHTMLのタグがよくわからない方は 1. HTMLの全体構造を書く（html,head,body,title） 2. body内に掲載する文章を書く 3. 文章に意味や役割（タグ）をつける 4. 話題をセクショニング・コンテンツで囲む 5. ページの構造を表す（header,main,footer,address）の順に書くと間違いにくいと思ってる

1

37

216

@hilosiva

シバタヒロノリ | Webクリエイター

5 years

#Shibajuku って何ができるの？ってか何してんの？って聞かれる事が増えてきたので、ちょっと公開できる範囲でまとめてみましたw 興味ある方だけ、どうぞ！

Tweet card media

Shibajukuって何ができるの？ Shibajuku活用法 - Shibajuku

Shibajukuはフロントエンド系のWebクリエーターを要請するオンラインサロンです。スクールやオンライン学習サイトとはちょっと毛色が違います。ライブ授業や録画授業でWebのスキルを身に着付けたら、部活に入ってプロジェクト活動をすると実績になりますよ。

5

16

178

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

フォントをマシンにどんどんインストールしていくとマシンもどんどん重くなるので、フォントは「FontBase」を使って管理してます。使うフォントをアクティブにするだけで使えるし、Google Fontsも入ってるので便利。

0

7

176

@hilosiva

シバタヒロノリ | Webクリエイター

5 years

CSSのfont-sizeの指定に px 使うのってやっぱ多いんですね。僕は、emかrem派です。僕が、px を使わないのは、ブラウザの文字サイズ変更機能を利用しているユーザーを妨げないためです。また、基本remが便利なのですが、親の文字サイズの半分にしたいなんて時はemを使います。

3

16

169

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

人を騙すような感じでモノを売るのはマーケティングではないと思うよ。

2

8

171

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

#Shibajuku 夏祭り2021 を公開しました。 Webを勉強中のサロンメンバーのみなさんが中心となって一生懸命作ってくった夏祭りです。金魚すくい、射的、脱出ゲームどのゲームも1プレイ300ゼニーで遊べます。未完成な部分もあるかと存じますが温かい目でよろしくお願いします。

Tweet card media

Shibajuku Summer Festival 2021

オンラインサロン「Shibajuku」のサロンメンバーが作った夏祭りサイト。金魚すくいや射的ゲーム、脱出ゲームなどで遊べます。ゲームは1プレイ300ゼニー。お祭り会場にはゼニーが落ちてることもあるのよ。ぜひたくさん遊んでくださいね〜。

projects.shibajuku.net

1

42

166

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

Notoフォントが、収録されてない文字が□（豆腐）にならないように、世界中の文字を扱えるように作られたのは知っていましたが、「No Tofu」の「Noto」だとは最近まで知らなかった。

2

13

167

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

ずっと書いてたHTMLの書籍が、いよいよ明日発売となりました。HTMLのよく使うであろう要素だけにフォーカスした424ページとなっております。これからWebサイト制作をやってみたいって方や、HTMLを深く知りたい方に届けば嬉しいです。 #武器になるHTML

Tweet card media

武器になるHTML

武器になるHTML

www.amazon.co.jp

1

23

162

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

ネットショップとかでカード型のコンポーネントってよく見かけますよね。あれも、色んなマークアップありますよね。ってことで書いたみました。カード型コンポーネントの僕なりのHTMLとCSSを紹介 #Shibajuku @hilosiva より

Tweet card media

カード型コンポーネントの僕なりのHTMLとCSSを紹介 - Shibajuku

ECサイトやブログの一覧ページでよく見かけるカード型コンポーネントの僕流のマークアップ方法をご紹介します。カード型コンポーネントは一般的に画像が先頭にあり、その後に見出しやテキストなどが続く縦型のコンポーネントで、あらゆるとろこでよく見かけます。

0

20

152

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

今日で #Shibajuku を始めて4年が経ちました。こんな何者でもない1人のWeb制作好きの中年男性がやってるコミュニティに期待や応援をして下さり感謝しております。Shibajukuの今のこの状況があるのはサロンメンバーのみなさんのおかげです。本当にありがとうございます。5年目もよろしくお願いします。

9

8

153

@hilosiva

シバタヒロノリ | Webクリエイター

5 months

2月8日（木）にCSS Niteに登壇させて頂くことになりました。長年講師をやってきた経験を活かして、HTML初学者の方がよく詰まっている箇所をいくつか解説させて頂きます。初学者向けの内容ですので、「最近Webの勉強を始めたよ〜」って方々がたくさんご参加頂けましたら嬉しいです。

@cssnite

CSS Nite

5 months

CSS Nite、2024年一発目のオンラインセミナーはシバタヒロノリさん @hilosiva をお迎えしてのHTML講座。著者『#武器になるHTML』のライブ版的な位置づけで「HTML」の基本から、初学者の方が学習する際に詰まりやすいポイントをピックアップして解説いただきます。

Tweet media one

3

32

185

0

46

154

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

メリークリスマス🎄 ということで、 #Shibajuku にてクリスマスサイトを制作しました。Webサイト制作の勉強をしているサロンメンバーさん達が必死になってそれぞれのページを制作致しました。どうか温かい目で「ほっこり」楽しんでもらえたら嬉しいです。 #SCM

Tweet card media

Shibajuku Christmas Market 2022

オンラインサロン「Shibajuku」のサロンメンバーが作ったクリスマスイベントサイト。オリジナルグッズ、クリスマスカード、ゲームを楽しんで、ほっこりして下さい。

projects.shibajuku.net

1

34

148

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

一言だけ言うと。一言欲しかった。

1

1

152

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

僕はBootstrap自体は使ってないのですが、自分流のグリッドシステムを作っていて、それを活用してコーティングしてたりします。そんな僕流のグリッドシステムの作り方を書いてみました。オリジナルのフレキシブルCSSグリッドシステムを作ってみよう。 @hilosiva

Tweet card media

オリジナルのフレキシブルCSSグリッドシステムを作ってみよう。 - Shibajuku

俺流フレキシブルCSSグリッドシステム「Olex」の考え方や作り方、使い方などを紹介します。自分のCSSグリッドシステムを持っておくことで、比較的簡単にWebページのレイアウトが出来るため作業効率が向上します。デモサイトもあるのでそちらもご確認しながらグリッドシステムを作りましょう。

1

17

150

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

パクられたらしい。

Tweet card media

ハンバーガーボタン何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku

ハンバー��ーボタンの作り方はググればたくさん出てくると思います。span要素を3個並べたやつとか、チェックボックスを使ったパターンが多いと思いますが、個人的には、button要素で要素で作るのがベストだと思います。そこで僕流のハンバーガーボタンの作り方を紹介します。 %

@chome2xx

ちょめ子

3 years

こちらもタレコミ情報です。左がShibajukuという月額5400円のオンラインサロンの教材、右がZONEの教材。そっくりですね。なおZONEの方が後発です。

Tweet media one

Tweet media two

4

13

102

13

19

145

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

最近焦っているサロンメンバーの方が多いです。焦らないで下さいね。周りを見ると焦るかもしれませんが、周りと比べず昨日の自分と比べて下さい。焦って勉強すると後々もっとわからないことが増えて辛くなるかもですよ。ちゃんと理屈がわかると自分で書けるようになると思いますし、その為に↓

1

3

132

@hilosiva

シバタヒロノリ | Webクリエイター

8 months

【実績紹介】鳥取を副業・兼業実績全国No.1に導いた #週１副社長の仕掛け人、松井太郎様の公式サイトをコーディングさせていただきました。 ↓ 続き

2

14

132

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

純粋にWeb業界が良い方向に進めばいいなぁって思う。物作りをしていると自分が作ったモノが誰かの役に立ったならそれは嬉しいことだし、それを何のリスペクトも無く粗末に扱われたらとても悲しい。その気持ちがわかるクリエイターが増えたらいいなぁ。

0

7

131

@hilosiva

シバタヒロノリ | Webクリエイター

1 year

【実績紹介】敷島住宅様の採用サイトを実装させていただきました。若い世代の方が新しいことにチャレンジしやすい職場環境であることや、「もっといい未来へ、ブラッシュアップを続けよう。」というコピーを実装面からも意識して、コーディングさせていただきました。

@Ashida_Assy

アッシー｜デザイナー

1 year

敷島住宅様の採用サイトをデザインさせていただきました。住まいを提供し、その先にあるものを探求し続ける敷島住宅様。30歳以下は委員会制度に入りフレッシュな意見で経営を活性化する取り組みもそんなブラッシュアップを続ける姿や明るい社風が映えるサイトを目指しました

Tweet media one

1

5

94

2

12

126

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

今年はコロナのせいで多くの花火大会が無くなりました。大したものは作れませんでしたが、2020年にちなんで2020発の花火をブラウザの中に打ち上げてみました。　よかったらご覧下さい。　少しでも早いコロナの収束を願ってます。 #Shibajuku

Tweet card media

Shibajuku Hanabi 2020

2020発のWeb花火を打ち上げます。

projects.shibajuku.net

2

24

115

@hilosiva

シバタヒロノリ | Webクリエイター

9 months

今日で #Shibajuku は丸5年経ちました。皆様ありがとうございます。長年講師としてやってきた経験から、現場とのギャップを埋る場所を作ろうと思って、ジムのようなスタイルのサロンを作りました。まだまだ完成してないShibajukuですが、これからも「ルイーダの酒場」を目指して頑張ります。

8

8

111

@hilosiva

シバタヒロノリ | Webクリエイター

6 years

floatを手なずける方法 1. 横並びになるボックスにfloatを付ける 2. floatするボックスには幅も付ける 3. floatの後に(下に)くるボックスにはclearを付ける 4. floatの親ボックスには overflow: hidden これで、だいたいはいい子になる。

1

12

108

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

今日もHTML本の打ち合わせを楽しくさせてもらいました。 HTMLの豚骨ラーメンくらいドロドロに濃い部分を、出来るだけ塩ラーメンくらいスッと理解できる本にして、読んでくださった方が醤油ラーメンくらい自信を持ってマークアップできるように頑張ります。

1

2

110

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

あけましておめでとうございます。みんなと #年賀サイト作りました。今年の #Shibajuku は少し引きこもって、サロンの土台を今一度固め直し、もっとメンバーの皆さんが快適に学習できる環境を作ります。今年は少しおとなしくしますが、何卒よろしくお願い致します。

Tweet card media

Shibajuku年賀サイト2022

新年明けましておめでとうございます。今年もShibajukuの年賀サイトを作成致しました。本年も何卒よろしくお願い致します。

projects.shibajuku.net

8

12

108

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

未経験からWebディレクターをされている方がよくスクールにWeb制作を習いに来られてたなぁ。「実際やってる仕事内容が営業だったから」って理由だったり、「Webデザイナーさんやコーダーさんとのコミュニケーションが取れなくて困ってるから」って理由が多かったです。

0

2

104

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

おかげさまで、#武器になるHTML が、Amazonの「Webデザイン」など、複数のカテゴリーで売れ筋ランキング１位をキープしてたり、全体の中でも150位以内に入ったりと、心より感謝致しております。本当にありがとうございます。それと同時に、皆様のタイムラインを荒らしてしまい申し訳ございません。

2

7

103

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

XDしか使えないからXDで作ったり、WordPressしか出来ないからWordPressを提案す��のではなく、その時その時で最適なものを選択したり提案できる人でありたいし、そんな人を育成したい。言語やツールやプラグインに依存しないことって大事だと思ってる。

2

2

106

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

HTML本で解説するimg要素のサンプルとして使うロゴを必死に作ってた・・・。img要素の書き方のサンプルとしてしか使わないのですが・・・。時間を掛けるところを間違ってる気がしてきた。

Tweet media one

Tweet media two

Tweet media three

0

1

102

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

Webデザインを添削させてもらう時、装飾とかあしらいとか以上に、コンセンプトをどうデザインに落とし込んだのかや、なぜこの構成にしたのかの部分に目がいってしまう。

1

0

102

@hilosiva

シバタヒロノリ | Webクリエイター

5 months

皆様遅い時間までありがとうございました！そして、ガラガラな聞き取りづらい声で大変失礼致しました。このセミナーを通して、少しでもHTMLの奥深さや、楽しさが伝わったら嬉しいです。めちゃくちゃ楽しかったです！ #武器になるHTML

@cssnite

CSS Nite

5 months

1,000名超！本日（2月8日[木]）21:00からシバタヒロノリさん @hilosiva をお迎えしてのHTML講座。著者『#武器になるHTML』のライブ版的な位置づけで「HTML」の基本から、初学者の方が学習する際につまづきやすいポイントをピックアップして解説いただきます。・HTMLとは・要素の配置ルール

Tweet media one

3

14

71

2

4

104

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

フォーカスが当たるのはa要素とform要素じゃなくて、フォームのコントロール部品の要素（inputとかtextareaとか）ね。良い子のみんなは間違えないでね。

@chome2xx

ちょめ子

3 years

こちらもタレコミ情報です。左がShibajukuという月額5400円のオンラインサロンの教材、右がZONEの教材。そっくりですね。なおZONEの方が後発です。

Tweet media one

Tweet media two

4

13

102

0

24

103

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

長年HTMLやCSSやJSなどの授業してきたけど、これからを「簡単」って言った生徒さんはいない気がする。HTMLはまだなんとか行けて、CSSで心が折れて、JSで・・・あ、僕の教え方が悪いんでした。納得。

5

1

100

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

Web制作って人と人との縁を作ることができる仕事だと思う。その為にはクライアントさんとかユーザーさんの気持ちをわかろうとすることが大事だと思う。誰に何をしたら喜んでもらえるのかを考えて実践することがマーケティングの基本だと思うから、サロンではそういうとこから伝えて行きたい。

0

0

98

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

こちらコーディングを担当させて頂きました。「旅するようにはたらこう」という素敵なキャッチコピーのワーケーションプラン。写真もイラストもとっても素敵でコーディングしてても楽しかったです。アッシーさんの手書き文字はAshikoFontにして再現しました。

@Ashida_Assy

アッシー｜デザイナー

3 years

【公開】WORCATION COLLABO シェアオフィス・コワーキングスペースを展開されるReqreeさんが「旅するようにはたらこう」をコンセプトにワーケーションプランをご提案！私は構成・デザイン・イラスト・撮影ディレクションを担当させていただきました！

9

12

178

5

9

100

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

#Shibajuku の新しいコーディング課題を用意しました。ローディングやスライダーなどJSも結構必要で、レイアウトも一筋縄では行かないけど実際よくあるようなレイアウトを採用してみました。webpackとかの環境を使ってコーディングガイドラインに沿って開発し、GitHubに提出してもらおうかな・・・。

Tweet media one

5

1

100

@hilosiva

シバタヒロノリ | Webクリエイター

6 months

明けましておめでとうございます㊗️ 今年も年賀サイトを作らせて頂きました！ #Shibajuku のサロンメンバーの皆さんの年賀サイトもございますので、よかったらご覧下さい。今年もよろしくお願い致します🎍

Shibajuku年賀サイト2024

新年明けましておめでとうございます。今年もShibajukuの年賀サイトを作成致しました。本年も何卒よろしくお願い致します。

projects.shibajuku.net

1

12

97

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

ちなみにShibajukuは、「未経験からたった3ヶ月で稼げるフリーランスWebデザイナー」にはなれないサロンです。予めご了承下さい。 Shibajukuは「人を喜ばせる為のスキルやノウハウを養う場所」を目指しています。

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

#Shibajuku の10期生を募集する日を決めました。久しぶりの募集になりますが、また定員は先着20名の予定でござい��す。なお4月にはShibajukuを3.0にバージョンアップできるように色々調整中です。主に初学者向けのサロンになりますが、ご興味ありましたらDM下さい。

0

7

34

0

14

96

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

僕らが作るWebサイトはデザイナーさんとコーダーさんのように分業して役割が分かれてたりするけど、ユーザーさんが見てるWebサイトってデザインもコードも分かれてないんですよね。

0

5

94

@hilosiva

シバタヒロノリ | Webクリエイター

11 months

VSCodeの拡張機能で最近めっちゃ助けられてるのは、 #Markuplint です。色んな方のコードを添削させてもらう中で、パッと視覚的に問題があるところに赤線引いてくれるから、めっちゃ時短になってます。初学者の方は一旦これでHTMLのチェックをしてから添削してもらうといいと思う。

1

6

91

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

一昨日spicato さんにお邪魔させて頂きました。オフィスはもちろん素敵で、一歩入った瞬間からみなさんのおもてなし力の凄さを感じ、終始感動して絶句していました。これがクリエティブに反映しているんだと感じました。spicatoの皆様、お仕事中にも関わらずご対応頂き本当にありがとうございました。

Tweet media one

4

2

89

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

ShibajukuでWeb制作の技術もめっちゃ時間をかけて一通りWeb制作を行える授業をしてきました。でもそれ以上に、クライアントさんやその先のユーザーさんの事をめっちゃ考えて、細かなとこまで配慮したり、先の先まで考えてデザインやコーディングをしようって話の方がやってきたかもしれません。

0

3

86

@hilosiva

シバタヒロノリ | Webクリエイター

6 years

最近本当に独学でWebの勉強ができるサイト増えましたね。でも、それだけではなかなかWeb業界にぶち込むの難しいですよね。そこで、僕なりにやっておいたほうがいいと思うことを書いてみました。ちょっと厳しいこと書いてるので、メンタル的に余裕があるときにどうぞ!

Tweet card media

未経験から独学でWeb業界にぶち込む為にやっておいた方がいいこと - Shibajuku

最近独学でWeb業界を目指す方が増えてきました。それも独学でWebの勉強ができるサイトやサービスが増えてきたからかぁと思います。そこで今回は未経験から独学でWeb業界にぶち込むためにやっておいたほうがいいことを記事にしてみました。

4

19

88

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

デザインカンプ通りにコーディングするだけならそこまで時間は掛からないんです。メンテナンス性とか拡張性とかもそうだし、色んな環境でもちゃんと見れるようにしたりとか、アニメーションの心地良さとか、形にした向こう側を想像してコーディングするから、それなりに時間が掛かっちゃう。

0

4

86

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

サイクルショップナカゴヤ様のWebサイトを制作させて頂き、本日リリースさせて頂きました。クライアント様とエンドユーザー様とで育てていけるサイトになるよう工夫させて頂きました。

Tweet card media

サイクルショップナカゴヤ | 神戸の街のちょっとこだわった自転車屋

サイクルショップナカゴヤは昭和27年創業のちょっとこだわった街の自転車屋です。折りたたみ自転車を中心に本格ロードバイク、子供自転車など約150台の自転車を取り揃えています。お買い上げ頂いた自転車の修理はもちろん。メンテンナンスやカスタマイズも承ります。

3

0

84

@hilosiva

シバタヒロノリ | Webクリエイター

1 year

VSCodeの設定やプラグインの記事を2023年度版にしました。

Tweet card media

2023年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します - Shibajuku

僕のVScode（Visual Studio Code）に入れているWebサイト制作に便利なプラグイン（拡張機能）や各種設定を紹介します。これらのプラグインや設定があれば開発環境を構築しなくても基本的なWebサイト制作は効率よく制作できると思います。

0

8

84

@hilosiva

シバタヒロノリ | Webクリエイター

5 years

俺流Webデザイナーコース HTML CSS PCサイトコーディング lllustrator Photoshop デザインカンプ制作インターネット概論 Webの特性アクセシビリティユーザビリティ Webデザイン概論架空サイト制作実践 JavaScript jQuery モバイルデザイン概論レスポンシブWebデザインオリジナルサイト制作

2

10

80

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

全てのWeb制作会社さんがそうではないと思いますが、僕のところにご相談頂く会社さんに関しては、フロント系のコーダーさんの採用に「デザイン的な視点を持ってる方」を希望される会社さんが多いです。

0

0

81

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

デザインスキルも大事かもしれない、コーディングスキルも大事かもしれない。でも、腰も大事だよ。

2

1

83

@hilosiva

シバタヒロノリ | Webクリエイター

5 years

DTP経験者が、 Webデザインをする時は、少なくとも・UI（操作しやすい）デザインが必要であること・対話性を活かしたユーザー導線が必要であること・文字数や文字サイズの変更にも対応できること・コンテンツの増減にも対応できることを意識してカンプを作ると、いいと思うなぁ。

1

10

81

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

サロンメンバーの皆さんと試験的にスペースを使わせて頂こうと思います。内容は以下のようなことを考えています。・Webのスキルを身につけて何をしたい？・Webの勉強の楽しいとこと辛いとこ・モチベーションをどう保ってる？・サロンメンバーの皆さんが見てるWebの未来

0

7

79

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

最近またみんなで好きなWebサイトとか好きな制作会社さんをテーマにお酒を飲んでました。みなさんの挙げてくるサイトがほんとに素敵でした。その商品やサービス、会社ならではのWebデザインになっていて、そこにめっちゃ向き合ったからこそ生まれたデザインなんだよなぁ。すごいなぁ。頑張ろ。

1

1

79

@hilosiva

シバタヒロノリ | Webクリエイター

9 months

はじめてZennを書いてみた。内容はサロンにも書いたCSSのclamp()についての記事をちょこっと変えてスライドしました。 CSSのclamp()を便利に使うscssの関数｜しばひろ #zenn

Tweet card media

CSSのclamp()を便利に使うscssの関数

0

6

81

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

10年ほどスクールで講師をして、オンラインでもサロンで3年近く講師をしてるけど、意外とリアルでもオンラインでも初学者の方がハマるポイントなどは変わらないし、それは10年前ともそんなに変わってないと感じる今日この頃。

1

0

80

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

この度、 #NOT4H さんのYouTube Liveにゲストで出演させて頂くことになりました。僕なんかがあのような素敵な場所に出演させて頂くのは大変恐縮ではありますが、精一杯僕ができるお話しをさせて頂きたいと思います。当日よろしくお願い致します。

@n_masateru

西長正輝 / デザイナーアートディレクター

3 years

【NOT4H on Live】 6/22(火)21:30から #NOT4H LIVE配信やります！　 200名を越えるメンバーが在籍する人気のWebクリエイターオンラインサロンShibajuku主幹のしばひろさん @hilosiva をお迎えしてサロンのこと、キャリアのことなどお伺いします。 ↓↓↓視聴はこちらから

Tweet media one

1

4

36

5

5

79

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

そういえば、Webを勉強してる時CSSで心が折れたなぁ。floatってなんやねん！ってなってた。スムーズに理解できなかった分理解した時身になったし、理解出来なかったから同じ様に悩んでる人のサポートができるかもしれないって思った。

0

0

77

@hilosiva

シバタヒロノリ | Webクリエイター

6 years

HTMLやCSSって独学で書いてると、これで、いいのかな？って思う時ありますよね。また、僕が添削してても、ここ抜けてるなぁって思うこともあります。そこで、コーディング時に気をつけて欲しい事を書いてみました。でも、最後やっぱり添削してもらおうw

Tweet card media

独学でHTML+CSSの勉強をした人に気をつけて欲しい10のこと - Shibajuku

HTMLやCSSは独学でも勉強しやすい時代になりました。無料でこれらの言語を学習できるサービスが数多く登場し始めました。しかし独学では「アクセシビリティ」や「ユーザービリティ」といった知識を勉強し忘れやすいです。この記事では独学で勉強する時に気をつけてほしいことをまとめました。

1

22

76

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

ついに「武器になるHTML」電子書籍版が明日発売になります。 HTMLだけで424ページあるので、持ち運びたい方は電子書籍版がおすすめかもです。単行本版は26日（土）発売になります。 #武器になるHTML

1

17

77

@hilosiva

シバタヒロノリ | Webクリエイター

5 years

ボタンとかで、line-height をボタンの高さと同じpxで指定して、テキストを天地中央に持ってきてるコードを見るんだけど、「２行になったらどーーすんのさ！」w ちなみに、僕は上下のpaddingを使って、 emかremで指定する派です。これなら文字サイズ拡大機能で文字サイズが変わってもええ感じよ

3

7

76

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

未経験からフリーランスになってどんな感じでWeb制作をしてきたのかを聞いて頂く機会が増えたので、ブログでも書こうかなって思ったら、1年ほど前に既に書いてたからやめました。書こうと思ったこと、全部書いてた。

Tweet card media

未経験からフリーランスWebクリエイターになって10年経った僕の制作スタイル - Shibajuku

未経験からフリーランスのWebクリエーターになって10年。業界の右も左もわからない、業界の当たり前やルールも知らない中で、もがいてやっと自分なりのスタイルが見えてきたのかなと思います。このスタイルが誰かのロールモデルにはならないけどひとつのスタイルとして書いてみました。

0

3

73

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

「Web制作で稼ぎたい」とか「フリーランスになりたい」とかWebを始めるきっかけや動機はなんでもいいと思う。（Web制作をマルチ商材的に使うのはどうかと思うけど）Web制作の素晴らしさや、楽しさを背中で語れるような男になりたい。

2

0

73

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

こんな事言ったら「そんな奴が人に教えるな」って言われるかもしれないけど、僕は決してつよつよエンジニアではないです。でももし、階段の下にそこを登った先の景色が見たいのに躊躇している人がいて、僕にできる事が何かあるのであれば、手を引っ張って一緒に登りたいと思ってやってます。

1

0

75

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

昔書いたハンバーガーボタンの記事に「aria-label属性ではなく直接テキストを配置している理由は何ですか？」という質問がありましたので、記事を少し更新しました。aria-label属性だとCSSが読み込まれなかった場合に何も書いてないボタンになってしまうのでこうしました。

Tweet card media

ハンバーガーボタン何で作ってる？僕なりの作り方を解説してみる。 - Shibajuku

ハンバーガーボタンの作り方はググればたくさん出てくると思います。span要素を3個並べたやつとか、チェックボックスを使ったパターンが多いと思いますが、個人的には、button要素で要素で作るのがベストだと思います。そこで僕流のハンバーガーボタンの作り方を紹介します。 %

0

7

74

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

🌟クリスマスプレゼント企画🎅 #武器になるHTML 発売から2週間。多くの反響をいただいています。ありがとうございます。クリスマスということで、このツイートを引用リツイートしてくださった方の中から抽選で🌟5名🌟の方に『武器になるHTML』をプレゼントします！詳細はスレッドをご覧下さい。

1

19

70

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

Webの勉強って好奇心を持って楽しみながら色んなもの作るほうが身につく事が多いと思う。いきなり難しいこと考えずとりあえず作りたいもの作ろう。どんな風に作ろうがまずは形できたり、画面に表示できたら嬉しいやん。それが思い通りに動けばもっと嬉しいぞー。

1

3

71

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

#Shibajuku の新規募集を検討しています。とくにここに入ったからといって稼げるようになるわけでも、強強になれるわけでもありませんが、Webの勉強を始めた初学者さんを対象に数名の募集を考えております。スクールではなくジムみたいな感じのサロンです。

0

1

69

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

HTMLとCSSを一緒に勉強するスタイルのスクールと別々に勉強するスタイルのスクールがありますよね。僕も長年色んなスタイルで授業させて頂きましたが、個人的には別々に基礎を勉強してから、２つを組みわせた勉強をするスタイルの方が理解度が高く応用力を身に付けてもらいやすい。

4

0

70

@hilosiva

シバタヒロノリ | Webクリエイター

1 year

あけおめです！

7

0

71

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

僕がWebを始めた頃はWebデザイナーと言えば、デザインを作ってHTMLとCSS、jQueryとかでコーディングまでする人が多かったイメージ。今Webを始めた人はWebデザイナーってどんなイメージなんだろうとふと思った。

2

0

67

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

僕は自分にWebデザインのセンスがなかったから、勉強中の頃はひたすら自分が素敵だと思ったサイトを見つけては、「なぜ良いと思ったか」を分析して、デザインを1pxもずれないくらいにトレースして、それを自分でコーディングするって練習を何度も何度もやってたなぁ。アウトプットは大事だね。

0

4

69

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

11日（日）の夜に、#武器になるHTML 編集の藤田さん @elg_op36_9 と、スペースをさせて頂きます。 1時間半程度、本書ができるまでのお互いの気持ちとかを話してみたいと思います。

0

22

67

@hilosiva

シバタヒロノリ | Webクリエイター

3 months

【実績紹介】KOINEさんのWebサイトを実装させて頂きました。アートを通してコミュ力や創造力を伸ばすレッス��が魅力です！中村さんの雰囲気や子供たちとの関わり方が伝わる素敵なデザインを活かせるように実装も意識しました。是非、KOINEさんの雰囲気を感じて下さい。

Tweet card media

KOINE | 神戸六甲のコミュ力UP・創造性UPのアートスクール

KOINEは、神戸六甲にあるアートスクールです。アートに触れながら観察力や言葉の表現力、コミュニケーションスキルを伸ばす第2の図工室のような存在です。

@Ashida_Assy

アッシー｜デザイナー

3 months

KOINEさんのサイトを作らせていただきました！アートに触れながら観察力や言葉の表現力、コミュニケーションスキルを伸ばす、神戸六甲のスクール子ども達の話、全部聞くよ！というスタンスの中村さんは、言葉がシンプルで柔らかくてユニークそんなお人柄を表現してみました

1

12

261

1

6

70

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

1年ほど自分のサイト以外でWebデザインをしてないけど、どうやったら潜在的なユーザーさんがこのサイトを知って、どうやったらそのサイトやサービスを利用した後、満足してもらえるのかっていう、出会いから恋に落ちるまでのデザインを考えるのが好き。

0

0

69

@hilosiva

シバタヒロノリ | Webクリエイター

5 months

いよいよ近づいてきました。 HTMLは軽く勉強したけど、いまいち... ・タグの役割・要素の配置ルール・見出しの使い分け・emとstrongの違い・相対パス・代替テキストが、わからない。って方は、是非ご覧頂けましたら嬉しいです。 #武器になるHTML

@cssnite

CSS Nite

5 months

CSS Nite、2024年一発目のオンラインセミナーはシバタヒロノリさん @hilosiva をお迎えしてのHTML講座。著者『#武器になるHTML』のライブ版的な位置づけで「HTML」の基本から、初学者の方が学習する際に詰まりやすいポイントをピックアップして解説いただきます。

Tweet media one

3

32

185

1

20

68

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

昨夜退会枠よりご入会頂きました皆様ご入会ありがとうございます。今日から #Shibajuku は4年目に入ります。この1年もちゃんと目の前の事に向き合って、しっかり何かしらの成果物を出して行きます。Webを通してワクワクしたり、人と人との縁を作る。そんなサロンですが今後もよろしくお願いします。

8

1

68

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

色んな意見に気を使ってWebの勉強をされている方もいらっしゃると思いますが、自分が将来「こんなことがやりたい！」「こんな物が作りたい！」「こんな風になりたい！」とか、なんかそういう思いから突き進んで自分で答えを探しに行くのもいいと思う。

0

9

68

@hilosiva

シバタヒロノリ | Webクリエイター

5 months

いよいよ今夜です！！・HTMLってどんな言語？・要素の配置ルール・見出しのレベルの使い分け・ em、strongの使い分け・相対パス・画像の代替テキスト・ハンバーガーボタンこれらを僕なりに解説させて頂きます。どうかよろしくお願い致します！ #武器になるHTML

@cssnite

CSS Nite

5 months

1,000名超！本日（2月8日[木]）21:00からシバタヒロノリさん @hilosiva をお迎えしてのHTML講座。著者『#武器になるHTML』のライブ版的な位置づけで「HTML」の基本から、初学者の方が学習する際につまづきやすいポイントをピックアップして解説いただきます。・HTMLとは・要素の配置ルール

Tweet media one

3

14

71

0

19

68

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

Webの勉強を頑張ってる方で、自分のモチベーションとかメンタル的な部分との戦いに苦しんでる方をよく見かけます。勉強には学習曲線や忘却曲線があることを知ってるとその辛さから解放されることも多んじゃないかなぁーって思います。

0

1

66

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

HTML/CSSはを勉強してたころは、街を歩いてるときは目に入ったものをよく、頭のながでHTML/CSSに変換してみたり、喋る時も「ちょっとそのイスもうちょっとmargin rightして」とか言ってた。完全におかしいやつでした。

3

8

67

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

ちゃっかりですが、Shibajukuのサイトリニューアルしました。

1

5

65

@hilosiva

シバタヒロノリ | Webクリエイター

5 years

Web業界もだいぶ分業が進んでる。 Webデザイナーはコードを書くのが当たり前だったのに、コードを書かずにデザインを追求したり、逆にデザインをせずにマークアップやプログラムを追求したり。分業が進めば進むほど、僕は全部やりたくなるw

2

2

63

@hilosiva

シバタヒロノリ | Webクリエイター

4 months

今日から3月。気がつけばフリーランスとしてWeb制作を始めてから12年経ったのか。はじめは下請けが多く、直のお仕事を少しって感じだった。そこから講師業を始めたタイミングくらいから、「街のWeb屋になるんだ！」とか言いながら直受けを中心にやってた。地元の商店街のサイト制作は楽しかった。

0

0

65

@hilosiva

シバタヒロノリ | Webクリエイター

9 months

朝までマークアップ、みんな大好き @nicoicon_design 師匠と一緒に参戦します！！よろしくね！ #shibajuku #まるみデザインファーム #朝までマークアップ

@cssnite

CSS Nite

9 months

2023年11月2日（木）に開催する #朝までマークアップの出演者25名を発表します！・タムショー（田村章吾） @tamshow_ ・倉科宏行 @tortemusic ・長谷川喜洋 @hiro_ghap1 ・森川結子 @talocohc_rion ・相原典佳 @noir44_aihara ・池田泰延 @clockmaker （ICS）・半田惇志 @assialiholic

Tweet media one

1

96

276

0

12

66

@hilosiva

シバタヒロノリ | Webクリエイター

4 years

Webの勉強って聞くと、デザインやマークアップやプログラムの勉強をして、Webサイトを制作するって事をイメージしがちだけど、僕は、Webを使ってどうやって人を喜ばせるかってとこも知ってもらいたいなぁと思ってます。そこを知れば制作以外のWebでの生き方も見えて視野が広がると思うんですよね。

0

7

65

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

やっと回復してきた。長かった。

9

0

66

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

#Shibajuku は今月で200名のサロンとなりました。未経験からWeb業界を目指されている方、Webクリエイターとして現場で働かれている方、フリーランスの方、Webスクール関係の方を中心に様々な方が参加して下さっております。今後もサロンメンバーの皆さんと共に色々挑戦して行きたいと思います。

1

0

65

@hilosiva

シバタヒロノリ | Webクリエイター

4 months

4月には一緒に0からWebを学ぶ方を数名募集させてもらいたいと考えています。できれば、これからWebの勉強を本格的に始めようとしていて、Webを通して人を喜ばせたいと考えてる方に来て頂けたら嬉しいです。よろしくお願いします。

@hilosiva

シバタヒロノリ | Webクリエイター

4 months

新講座たちは色々とアップデートした自分との戦いでもあるな。10年以上講師してきた経験で初学者の方にとってもわかりやすく翻訳しつつ今の時代の内容をとことん深く掘る。わかりやすさと品質にこだわる。その分一つ一つの講座は長いけど、うわべだけにはしない。専門学生も2〜4年学ぶんだしね。

0

1

34

4

11

65

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

引用ならなぜ言葉を変えたり、間違った解釈にしたり、引用には見えない装飾にしたんだろ。引用ならなぜ消すのかな。どんな風に引用してくれてたのか見たかったなぁ。ちゃんとした引用なら堂々と引用してもらって構わないのに。

3

2

63

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

「なんでこう書いたらこう動くの？」って思ったら次に進めないタイプなので、それを掘り下げて掘り下げて仕組みをちゃんと理解するまで調べてやっと次に進めるようなった。これを10年繰り返してる。

2

0

64

@hilosiva

シバタヒロノリ | Webクリエイター

2 years

Webページが表示されるまでのスピードはもちろん大事だけど、ページが表示されてからユーザーが欲しい情報と出会うまでのスピードもとっても大事だよ。情報までの最短距離。ベンベン

0

3

64

@hilosiva

シバタヒロノリ | Webクリエイター

3 years

いっぱい言いたいことあるよ。

0

1

64

@hilosiva

シバタヒロノリ | Webクリエイター

1 year

学校でも #Shibajuku でもそうだけど、ただそこに在籍しているだけではなかなかスキルは身に付かない。Webを好きになって、作りたいものが生まれて、まるで子供の頃に親に隠れながら、夜こそこそゲームをしていたような感じで、Webを楽しみながらひたすらインプットやアウトプットをしている人が強い。

2

3

63

@hilosiva

シバタヒロノリ | Webクリエイター

7 months

小4の息子がVSCodeに、MarkuplintやPrettierとかいろんな拡張機能を入れていて、なんか色々してはる。

0

0

62