htmlとは?spanタグについて|【カタハリの女性に優しいhtml講座】

WEBデザイナー必見の女性に優しいHTML講座第15です

▲動画です。クリックして再生してください★

現役WEBデザイナーのカトパン&カタディお送りする、女性に優しいHTML講座!
htmlとは?spanタグについて|【カタハリの女性に優しいhtml講座】
というテーマでお送りしました。

LINE@:「@kubo」で検索してね

LINE@詳細はこちら

★おすすめのプレイリスト一覧★

女性に優しいHTML講座 ▶ https://goo.gl/jepS2u
くぼちゃんねる ▶ http://ur2.link/CFte
人気順で見る ▶ http://u0u0.net/CtfT
Q&Aシリーズ ▶ http://u0u0.net/CtgM
プチセミナー ▶ http://u0u0.net/D1Jz

【Photoshopバナー制作動画レッスン】
を無料プレゼント!▶ http://ur2.link/CFty

文章で読むカタハリはコチラ

こんにちは、デザイナーのカタディです。この動画では女性に優しいhtml講座を紹介していきたいと思います。今日紹介するのはspanタグ。

spanタグは何なのかって、簡単に説明すると、例えば、文章の一部分を色を変えたいとか、文字を大きくしたいとかっていうときに使われるんですけども、ここまで説明しても良く分からないと思うので、実際に実例を使ってやってみたいと思います。

今回紹介するサイトはデザインスクールの8月生の方の作品なんですけども、このおいしそうなおにぎりカフェのサイトで良いですね、これ。今回強調したい部分。この「浜松町駅から徒歩1分!おにぎり専門店」っていうのをちょっとじゃあ、どうしようかな、赤くしようかな。赤くします。一部分だけ、この部分だけ赤くしたい、っていうときに、まずやってみますね。

この「浜松町駅から徒歩1分!おにぎり専門店」っていう部分をまずspanタグで囲んであげます。で、これを囲むだけだと特に何も変化は起きないんですけども、ここに例えばclass名をつけてあげて、今回赤くしたいっていうことで、redとclass名をつけてあげてください。class名の紹介については別の動画で紹介しているので、ぜひそちらをチェックしてみてください。

じゃあ、まぁ、span class redっていうのを囲んであげます。この「浜松町駅から徒歩1分!おにぎり専門店」っていうのをspanタグ、class名をつけたspanタグで囲んであげます。で、じゃあ、スタイルシート、cssですね。

cssについてもイケメンのカトウ先生が教えてるのでそっちをチェックしてみてください。で、先ほど、redっていうclass名をつけました。じゃ、ここにプロパティでcolorっていうのをつけてあげますね。

で、このcolorっていうのは文字の色を何色にするの?っていうのを指定してあげるcssなんですけども、カラーピッカーっていうのを選択すると、このカラーピッカーが出てきますね。これで本当に自分の好きな色を選択できるんですけども。今回この赤くしたい。じゃ、赤くしましょう。これで保存してあげる。

で、保存してあげます。じゃあそれをブラウザでチェックしましょう。先ほど強調したい、赤くしたいっていう部分、この「浜松町駅から徒歩1分」っていう部分ですね。ここをspanタグで囲んであげてclass名をつけてあげることによって、この一部分だけ赤くすることができました。

spanタグのおさらいをすると、例えば文章中の一部分だけを色変えたいとかいうときによく使われます。今日のspanタグの動画は以上なんですけども、違う動画ではタグの説明、違うタグの説明だったり、今回使ったcssの説明をしているので、もしよかったらチェックしてみてください。この動画がもし役に立ったよっていう方はぜひチャンネル登録といいねボタンを押しちゃってください。お願いします。

今日の動画は以上です。ありがとうございました。バイバイ。

月一で交流会を開催中!はじめてでも楽しめるアットホームな会です

ABOUTこの記事をかいた人

地味な人生からの大逆転劇!私が好きなことを仕事にするまで...
株式会社日本デザイン WEBディレクター・WEBデザイナー・動画クリエイター
20歳WEBデザイン業界を目指すが、未経験のため15社を一次審査で落ちプチ鬱に
22歳 雑誌の編集部になんとか受かるが、過酷すぎて耐えられず早々に辞める
24歳WEB業界に転身。念願のWEBデザインの仕事に就くがセンスがなく惨敗
26歳 大坪拓摩と出会い、根性だけを認められアシスタントという形で雇われる
それから4年間、理論やルールに基いたセールスデザインを大坪に叩き込まれ、デザイン力が奇跡のように向上!紹介のみで仕事が埋まる売れっ子デザイナーとなり、動画制作・YouTubeプロデュースなどクリエイティブな仕事を幅広く請け負う
2015年10月、自身のこれまでの経験(もともとのセンスのなさも!)を活かして「現役デザイナーが教える」「センスはいらない」というコンセプトで日本デザインスクールを設立。現役としても活動を続けながら全国400名以上の生徒を45日という超短期間でプロのWEBデザイナーに育てる。座右の銘はミッキーの「夢は必ず叶う!」