Visual Studio Codeで印刷する方法
ソースコードを印刷するときに、メモ帳で印刷すると白黒になりますが、Visual Studio Codeの見た目のまま印刷するとカラーでソースコードが読みやすかったりします。
しかし、なぜかVisual Studio Codeには印刷ボタンがついていないので、少し手間がかかります。
印刷の仕方ですが、まず表示＞拡張機能をクリックし、「printcode」を入力します。
「F1」を押し「printcode」と入力します。
あとは、ブラウザに印刷画面が表示されるので、印刷するだけ。
こんな感じになります。
少し手間ですが、慣れると簡単。
是非、試してみてください。
CSSで画像を横に並べる方法
ざっくり言うとfloatを使う方法とinline-bockを使う方法があります。
まずfloatを使う方法
<ul>
<li><img src="images/sample_image01.jpg"></li>
<li><img src="images/sample_image01.jpg"></li>
<li><img src="images/sample_image01.jpg"></li>
<li><img src="images/sample_image01.jpg"></li>
</ul>
<div class="clearfix"></div>
li {
list-style: none;
float: left;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
floatを使った後はclearfixでfloatを解除しておかないとデザインがおかしくなります。
続いて、inline-blockを使う方法。
li {
display: inline-block;
}
これだけ。めっちゃ簡単。
ブロック要素とインライン要素の違い
簡単に説明するとブロック要素はブロックなので縦に積み上げるもの。
インライン要素はインラインなので、横に並ぶもの。
そんな感じで理解しています。
<ul><li>はブロック要素なので、このように書くと縦に積みあがって表示されます。
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
</ul>
- リスト１
- リスト２
- リスト３
- リスト４
しかし、CSSでこのように書くと
li {
display: inline;
}
- リスト１
- リスト２
- リスト３
- リスト４
とブロック要素がインライン要素に変わり横に並んで表示されるようになります。
インライン要素はwidthやheightがきかない！
インラインなので高さがないのはわかるが、幅の指定もできません。
そうゆうときはinline-block
li {
display: inline-block;
height: 50px;
width: 100px;
}
inline-blockにすることで、インライン要素なのに幅と高さを指定できるようになります。
