今回はHTMLとCSSで画像の上にオシャレに文字やアイコン、ボタンなどをのせる方法を紹介します。覚えておくととても便利ですよ!
![画像の上におしゃれに文字やボタンをのせる方法(CSS)](https://cdn-ak-scissors.b.st-hatena.com/image/square/374ad9dc6617ef1d7439aeb396d84ecbf1070cbe/height=288;version=1;width=512/https%3A%2F%2Fsaruwakakun.com%2Fwp-content%2Fuploads%2F2017%2F03%2Fimage.jpg)
今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは? ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
レイアウト グリッド Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。 グリッド(Grid) v4.0.0設定変更 v4.2.1追加 12の列システム、5つのデフォルトレスポンス層、Sass変数とmixin、数十の定義済クラスにより、強力なモバイル・ファーストのFlexboxグリッドを使用して、すべての形状とサイズのレイアウトを構築する。 使い方(How it works) Bootstrapのグリッドシステムは、一連のコンテナ、行、列を使用して、コンテンツのレイアウトと配置をする。これはFlexboxで構築され、完全にレスポンシブになる。以下は、グリッドがどのように組み合わされるのかを示す例と詳細である。 Flexboxに慣れ親しんだり、馴染みがないのなら、背景、用語、ガイドライン、コードスニペットについては、こちらのCSS Tricks
prefixというのは接頭辞という意味です。列要素のclass名に、それぞれprefixが入った.col-sm-列数、.col-md-列数、.col-lg-列数、.col-xl-列数があります。そして、これらのclass名の違いによってブレイクポイントが決められています。 ブレイクポイントよりもブラウザの幅が大きい場合は指定したカラム数が保持されますが、ブレイクポイントよりも幅が狭くなったときは、列要素がすべて1列になる仕組みです。これでレスポンシブ対応させることができるというわけです。1つだけ例を見てみましょう。 HTML <h1>4カラム・レイアウト</h1> <div class="container"> <div class="row"> <div class="col-sm-2">col-sm-2</div> <div class="col-sm-2">col-sm-2</div
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く