今回はul/ol/liを使った箇条書き(リスト)のデザイン例を紹介します。どれも画像は必要なく、CSSだけで作ることができます。メニューリストとして使っても、記事内でポイントをまとめるときに使っても良いでしょう。それぞれCSSコードを載せていますので、コピペしてご自由にお使いください。
![コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d2fe3b10177496959a5b60e62200544145c687/height=288;version=1;width=512/https%3A%2F%2Fsaruwakakun.com%2Fwp-content%2Fuploads%2F2017%2F02%2F75e1ec8ce26b1204e11a1598e8bcb8ea.png)
TOP > その他 > BootstrapのイケテないNavbarにスタイル適用。センターリング(justified)などについて 今回のゴール Bootstrapのナビゲーションメニューは、Navbarを使い、構築を行うが、センターリングされているサンプルコードが掲載されていません。 今回はこの区切り線も無い、イケテいないNavbarをセンターリングするとともに、少しイケテいるようにスタイルをあてます。 Nabvarのソースを編集 BootstrapのNavbarを下記のように編集を行います。 <!-- Site Name --> <div class="sitename"> <div class="container"> <a href="#">Project name</a> </div> </div> <!-- Static navbar --> <div class="navba
ブラウザのタブ部分などで、ページタイトルの左端に表示されるアイコンをオリジナルアイコンにすることができます。 このオリジナルアイコンは、ファビコンと呼びます。 せっかくですから、自分のウェブサイトのオリジナルアイコン(ファビコン)を指定してみましょう。 まず、アイコンとなる画像ファイルを用意します。 サンプルサイトでは、以下の画像を作成しました。 ファイル形式はPNGにしましたが、GIF・BMPなどの形式でも問題ありません。 アイコン画像ファイルをico形式に変換する 用意した画像ファイルをico形式に変換します。 ico形式への変換にはフリーソフトを利用しても良いですが、よりお手軽に、ウェブ上で画像変換してくれるサービスを利用しても良いでしょう。 「ファビコン 作成」などのキーワードで検索すれば、いくつもヒットします。 作成したアイコンファイルのファイル名は「favicon.ico」とし
ファビコン(favicon/サイトアイコン)とは ファビコンとは、Webサイト独自のアイコンのことです。ブラウザのタブの端、ブックマーク項目の先頭、アドレス欄の端などに表示されるほか、デスクトップに置くショートカットアイコンとしても使われます。 ■ファビコンという名称の意味 ファビコンは英字で「favicon」と綴ります。このfaviconの意味は「お気に入り(favorites)用のアイコン(icon)」です。ここでの「お気に入り」とは、IEやEdgeでのブックマークの名称です。つまり、ファビコンとは元々は「ブックマーク用のアイコン」という意味の造語です。 現在では多くのブラウザがファビコンを表示しますが、元々はIEの独自機能だったため、このような名称で呼ばれています。また、Webサイト独自のアイコンですから「サイトアイコン」と呼ばれることもあります。ファビコンとして、Webサイトを表す
Get the best experience with Internet Explorer 9 and above Based on your current browser, you are not seeing all that X-Icon Editor has to offer. Learn more about Internet Explorer 9 and above X-Icon Editor is an HTML5 application (based on <Canvas>) that allows you to create high resolution icons that lets your sites shine. With X-Icon Editor you can quickly get your site ready with a large icon
Bootstrap3.xの設定例 赤背景が変更箇所 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navber" aria-expanded="false"> <span class="sr-only">ナビゲーションの切替</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navba
datalist要素を使ったフォームの作り方 今回はHTML5に新しく加わったdatalist要素を使ったフォームの作り方を紹介します。datalist要素とはinput要素にサジェスト機能を追加する要素です。 フォームを作成するとなると<input type=”text”>や<select>を使うことが多いですが、datalist要素を使うことで、これら両方の入力形式を一つのフォームで併せて実現することができます。 datalist要素を使ったフォームの実装デモ 次のフォームにテキスト入力もしくはダブルクリックしてメニューを選択してください。 好きな拳法: ダブルクリックすると選択肢に 北斗神拳 南斗聖拳 南斗水鳥拳 と表示されます。これら選択肢のいずれかを選ぶとフォームに選択肢のテキストが入力されます。テキストはもちろん後で修正できます。 ※safariやIE9以下といったdatali
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く