Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

HTML

htmlのspanとは?使い道を紹介します。「意外に便利」

投稿日:

Pocket

 

うも、チャーさんです。

 

あなたはspanタグとは何だ?

spanタグって何に使えばいいの?

と思っていませんか。

 

この記事では、spanタグとは、

そしてspanタグの使い道、使い方について、

書いております。

 

 

なので、あなたがこの記事を読めば、

spanタグについての疑問が解消され、

コーディングスキルも幅が広がるでしょう。

 

なので、spanタグについて疑問がある場合、

このまま下にスクロールして読んでみてください。

 

スポンサードサーチ

htmlのspanタグとは?

 

まず結論ですが、

spanタグとは、htmlタグの1つでして、

別にそれ単体では特に何もなさないタグです。

 

じゃあ、使わんタグやな、

となるかと言えばそうでもないです。

 

spanタグにはその特性に応じた、

使い道があるのでここからは使い道を紹介します。

 

スポンサードサーチ

htmlのspanタグの使い道とは?

 

で、spanの使い道ですが、

何に使えるのか書きます。

 

  • 要素を横並びにする、
  • 一部分にcssを適用する、

これらに使えます。

 

htmlのspanタグで横並び

 

ではまず横並びをみていきましょう。

 

spanタグは、メニューなどのような要素を、

横並びにするときに使えます。

 

 

というのもspanタグはdivと違いインライン要素です。

(*divはブロック要素)

 

そしてインライン要素は横並びに配置されるという、

仕組みがあります。

 

そのため、spanタグを使うと、

メニューなどの横並びを再現できます。

 

 

こんな風にです。

 

 

なので、ただ単純に横並びにしたい場合、

htmlのspanはインライン要素なので、

他にcssとか何も書かなくても横並びにできます。

 

(*注意spanの場合幅高さ指定などできないので、

幅を出す場合、フォントサイズや、

letter-spacingなどを使い広げる必要があります。)

 

htmlのspanで一部分にcss適用できる

 

また他の使い道としては、

<p>タグなどで囲った文章の一部分に、

cssを適用するときなどに使えます。

 

例えば、pタグで文章を囲って、

cssを適用すると、pタグで囲われた、

文章全部にcssが適用されますよね。

 

こんな風に。

 

 

しかし、文全体を赤文字にしたいのでなく一部だけ、

cssを適用したい場合、spanタグを使えば、

okです。

 

例えばspanって文字だけ赤文字にしたいとすると、

 

 

このようにspanで囲ったとこだけに、

cssを適用させて、文章の一部分にスタイル適用とか、

できるわけです。

 

なので、htmlのspanの使い道としては、

一部分にcssを適用するですね。

 

スポンサードサーチ

htmlのspanタグの使う手順

 

spanタグの使い方ですが、

基本的に<span>タグで囲ってやるだけです。

 

そして上記紹介したような使用用途に応じて、

使ってやる形になります。

 

スポンサードサーチ

まとめ

 

spanタグとは、htmlタグの1つです。

 

使い道としては、インライン要素にしたい時とか、

一部分にcssを適用させたい時などですね。

 

 

最初は、spanって何に使うの?

 

思いがちですが、使い道があるので、

知っておくとあなたのページ制作や、

コーディングスキルに幅が出るでしょう。

 

なので使い道があるので、

一度は使ってみましょう。

 

 

さてそれでは早速あなたの、

プログラミングスキルアップのために、

エディターを開いてspanタグで囲ってみましょう。

 

横並びや、一部分にcss適用などは、

すぐできるので試してみてください。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-HTML

スポンサードサーチ

関連記事

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

htmlでリンクを画像につける方法「速攻でできます」

どうも、チャーさんです。   あなたは、htmlでリンクを画像につける方法を、 探していますか?   この記事では、画像にリンクをつける方法を 話しています。   &nb …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

htmlで改行をする方法(3秒で習得できます)

  どうも、チャーさんです。   あなたはhtmlを勉強していて、どうすれば 改行できるのか?と悩んでいませんか。   また色々タグを覚えて、プログラミングを上達させたい …

no image

htmlの画像の階層について詳しく説明(知らないと画像表示で困ります)

html 画像 階層   どうも、チャーさんです。   あなたはhtmlファイルで画像を表示したいのに、 できない。と悩んでいませんか?   実は画像ファイルが表示できな …

no image

htmlのテーブルを結合させたい場合は読んでください。

  どうも、チャーさんです。 あなたは、htmlで作るテーブルのセルを、 結合させたい、くっつけたいと思っていませんか?   この記事では、htmlのテーブルのセルを、 結合させる …

no image

webページにトップへ戻る機能をつける簡単な方法「2行書けばできます」

どうも、チャーさんです。   あなたはwebページにトップへ戻る機能を、 つけたいと思っていませんか?   この記事ではトップへ戻るを作る方法を、 紹介してます。   & …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。