2019年11月14日スポンサーリンク写真ブロガーのためのHTML入門の第2弾です。今日は引用タグとリストタグについて説明します。最初は引用タグである「blockquote」です。スポンサーリンク目次blockquoteタグ(ブロッククオートタグ)ulタグ、olタグ、liタグ(リストタグ)blockquoteタグ(ブロッククオートタグ)引用タグってどういうときに使うのか、よく分からない方もいらっしゃると思います。簡潔にいうと、他のブログや本などから一部分を引用して自分のブログに引用したいときに使うと思っていただければいいです。具体的にはこんな感じでかきます。</blockquote>123<blockquote>見当がつかぬ。このように書くと、ブラウザのデフォルトのデザインでは、blockquoteで囲んだ箇所が少し字下げされて表示されます。引用箇所のデザインはCSSを使うことで自由にデザインを変更することができます。ちなみに余談ですが、1990年代のWEB制作の世界では、文章を字下げするという目的でblockquoteが使われていました。本来、blockquoteは引用を表すタグだったのですが、実際には時下げというデザインを表現するために使われていたんですね。これは本来の使い方ではないということで、当時はかなり熱い議論が巻き起こっていました。現在は数多くのブラウザが一般的なCSSに対応しているため、時下げというデザインはCSSで容易にできるようになりました。いうわけで、今はちゃんと引用のためにblockquoteが使われています。ulタグ、olタグ、liタグ(リストタグ)続きましてリストタグです。これは箇条書きを実現するために使われるタグです。リストタグは他のタグと違って少し複雑ですよ。実際にどのように使われるのか紹介します。</ul>123456<ul><li>リンゴ</li><li>バナナ</li><li>メロン</li><li>オレンジ</li></ul>このように使います。ulというタグと、liというタグの2種類がでてきました。このHTMLの見方は、まず、<ul>と書くことで、これからリストが始まりますよ~、という合図を表現しています。次に続く、<li>から実際にリストとして表現したい要素を記述していきまます。それぞれのリストの要素を<li>から</li>までの間に書いていき、要素の数だけ繰り返します。最後に、</ul>とかき、リストがここで終わります、ということをお知らせする、という感じです。このリストですが、このような書き方もあります。</ol>123456<ol><li>リンゴ</li><li>バナナ</li><li>メロン</li><li>オレンジ</li></ol>ulがolに変わりました。すると、箇条書きのリストから、順序付きリストへと変更することができます。実際にブラウザで見てみると良いでしょう!<ul>で書いた場合。CodePen.<ol>で書いた場合。CodePen.このようにolで書くとリストの項目に1から順に番号が振られていきます。これ順序つきリストです。List」の略語です。タグの書き方で、ただの箇条書きと番号付きのリストと使い分けることができるんです。これも実はCSSでデザインを設定することで、どうにでもできちゃうんですよね~。実際にHTMLを書くときは、記述した文章の構造をしっかり考えてマークアップすることを心がけましょう。スポンサーリンク今日はここまでにします。おつかれさまでした!この記事が気に入ったらぽちっとお願いします!==========ブログの更新情報をTwitterやfacebookで紹介しています。MEドレッドライティングやWeb制作などインターネットを活用して毎日を自由に生活してるドレッドのブログです。学びの記録、そして毎月買った本についての記録を残しています。LINK:https://stage.jugedred.net/スポンサーリンクスポンサーリンクお気軽にご相談下さい!このブログの運営者にお仕事を依頼しませんか?現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。コレカラウェブ公式サイトへこの記事が気に入ったらぽちっとお願いします!==========ブログの更新情報をTwitterやfacebookで紹介しています。ドレッド自由なステージ写真ブロガーのためのHTML入門の第3弾です。今日はテーブルタグについて説明します。このタグは少し使い方がややこしいです。ドレッド自由なステージ「モダン」なんて単語がついてるから、さぞかし見たことのないコーディングが学べるのだろう、なんて思っていました。利用したリストタグに任意の文字列をマーカーとして使用する方法を紹介します。ドレッド自由なステージ写真まみれをリニューアルするにあたって、いろいろなストックフォトブログや写真日記サイトを見て回りました。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。デジハリオンラインスクール卒業。(1)スポンサーリンクWordPressが高速で動作することで定評のあるエックスサーバーです。このブログはエックスサーバーで動作しています。管理画面も使いやすく、機能も豊富で、初心者にイチオシのレンタルサーバーです。詳細ページ公式ページクラウドソーシングの大手クラウドワークスです。クライアント向け・ワーカー向けの機能が豊富で、案件数も国内のクラウドソーシング内でトップを誇ります。詳細ページ公式ページ私も愛用しているランサーズです。毎年新しい試みにチャレンジしているクラウドソーシングであり、ランサーをとても大切にしています。2019年に上場しました。