最終更新HTMLの<code>コードタグは、ソースコードの文字列を表示して見せるときに使います。このページでは<code>の基本的な使い方から、CSSで装飾する方法、シンタックスハイライトを使う方法まで解説します。world!')</code>を実行してみましょう。👆<code>は文中でコードを紹介するときによく使います。<code>はいわゆるインライン要素[1]にあたり、多くの場合は段落やリストなどの文中で使うことになります。✍️HTML、CSS、JavaScript、Python、Ruby、Go...などなど、どんな言語であってもコードを表示したいときにはcodeタグを使えばOKです。codeを使うメリットソースコードをきちんと<code>タグで囲むことには以下のようなメリットがあります。<code>を装飾すればユーザーは「どの部分がコードなのか」がパッと見て分かりやすい検索エンジンのクローラーなどのロボットが「どの部分がコードなのか」が分かるユーザーにコードを見せたいときには基本的に<code>で囲むようにしましょう。</code></pre>👆複数行のコードを載せるときには<pre>タグの中に<code>タグを入れ、その中にコードを書きます。✍️preタグとは整形済みテキストを表すためのタグで、空白や改行などのホワイトスペースをそのまま表示してくれます(preを使わないとコード内の改行が詰められて表示されてしまいます)。1行〜複数行のソースコードをまとめて見せたいときには<pre>と<code>を合わせて使いましょう。関連するページを読むHTMLのpreタグの使い方<>HTML<p>サンプルコードを紹介します。👆HTMLの<pre><code>〜</code></pre>の中のテキストの改行や半角スペースが、そのままページに反映されているのが分かると思います。<pre>が1つのブロックを作るため、<p>などのタグ内に入れる必要はありません。CSSでcodeのスタイルを変更デフォルトの表示<>HTML<p><code>console.log("hello")</code>を実行しましょう。👆デフォルトでは<code>内のテキストはこのように表示されます。monospaceが適用されているため、等幅フォント(コードを表示するときによく使うフォント種類)で表示されます。これだけだと少しコード部分の区別がしにくいですね。CSSで装飾するサンプル<>HTML#CSS<p><code>console.log("hello")</code>を実行しましょう。👆このように<code>の背景色や文字色を調整するのがおすすめです。inline-blockがないとpaddingやmarginなどの余白の調整が反映されないので注意しましょう。コードのフォントを変更デフォルトのフォントが気に入らない場合はfont-familyを指定しましょう。monospace;}👆参考までに当サイトではこのような指定をしています。{~}というセレクタを使うと、ページ内のすべての<code>が装飾されます。CSSでpreを使ったコードのスタイルを変える<>HTML#CSS<p>サンプルコードを紹介します。👆<pre>によるコードブロックのスタイルを変える例です。pre-wrapを指定すると、コードが1行に収まりきらないときにはみ出さずに折り返すようになります。preで横スクロール可能にする<>HTML#CSS<p>サンプルコードを紹介します。autoを指定します。touchはモバイルブラウザで滑らかにスクロールできるようにするためのものです。コードをシンタックスハイライトシンタックスハイライトとは、コードを色付けして見やすくすることです。シンタックスハイライトはライブラリを使えば簡単に実現できます。有名なライブラリは次の2つでしょう。highlight.jsPrism.jshighlight.jsの使用例ここではhighlight.jsの導入方法を紹介します。必要なファイルはCDN配信されているため、少しコードを貼り付けるだけでシンタックスハイライトを実現できます。href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css">👆まず<head>タグ内でCSSファイルを読み込みます。highlight.jsではたくさんの種類のスタイル(配色)が用意されています。ここではdracula.min.cssを読み込むことにします。hljs.initHighlightingOnLoad();</script>👆次にbodyの閉じタグ(</body>)の直前で、JavaScriptファイルの読み込みと、ハイライトの実行をします。設定は以上で完了です。✍️メモオプションや細かな設定はhighlight.jsの公式ページを参考にしてください。最新バージョンのファイルのURLはcdn.jsで確認できます。デモたったこれだけでシンタックスハイライトを導入できるのはありがたいですね。(従来の考え方ですが)HTMLの要素は「ブロックレベル要素」か「インライン要素」のどちらかに分類されていました。このうち「インライン要素」は、段落やリストの中など文章の一部として扱われます。