突然ですがおしゃれなWEBサイトを作るのに欠かせない存在となってきた「Bootstrap」を知っていますか？ BootstrapとはTwitter社にて開発されたWEBサイト構築をよりスムーズかつ、スピーディーに仕上げる為のフレームワーク。 フレームワークとはCSSのスタイリングやレイアウトが既に定義されたCSSのパッケージの様なもの。 引用：無料テンプレートで爆速WEB制作！Start Bootstrapを使ってみよう！ 数年前では考えられなかったスピードでWEBサイトを作成できるようになりました。簡単に利用できる「Bootstrap対応のテンプレート」を使用する人も増えていますが、 などの悩みもでてくるのではないでしょうか？ そこで今回はおすすめの優良なBootstrapテンプレートを集めてご紹介したいと思います。無料のテンプレートもありますが、有料でも使い勝手の良いテンプレートをピッ

<div class="cp_card"> コンテンツ <div class="cp_ribbon05"> <div class="cp_ribbon">Ribbon</div> </div> </div> .cp_card { position: relative;/*リボンをかけたいコンテンツボックスにセット*/ width: 300px; height: 300px; background: #ffffff; margin: auto; padding: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } /*リボンの部分*/ .cp_ribbon05 { position: absolute; top: -6px; right: -6px; overflow: hidden; width: 108px; height: 108px; } .

Bootstrap4で用意されているdisplayに関するクラス d-{prefix}-none d-{prefix}-inline d-{prefix}-inline-block d-{prefix}-block d-{prefix}-table d-{prefix}-table-cell d-{prefix}-table-row d-{prefix}-table-flex d-{prefix}-table-inline-flex {prefix}には、{なし | sm | md | lg | xl}が入ります。 なお、Bootstrap4では、Bootstrap3で用意されたhidden-{prefix}やvisible-{prefix}は廃止され、代わりにd-{prefix}-noneやd-{prefix}-blockに変更されました。 displayで表示・非表示を設定 ここでは、

全国対応！外注・下請けのホームページ制作会社をお探しの会社様。 人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい

manaable（マナブル）は、利用ユーザー数25万人を突破した医療団体向け研修管理システムです。会員や研修から決済・受講・アンケートまで、研修管理に必要な機能を網羅。あらゆる業務の一元管理を可能にしたシステムだからこそ、お客様に合わせた革新的で最適な研修体制をご提供します。 borderで三角形を作る方法 では、三角形を作る方法を紹介していきますが、前述したように三角形を作る際には、CSSのborderプロパティを使用します。ですので、まずは下の図のような下向きの三角形を作る際に、どうしてborderを用いるのか、ということから説明します。 borderは通常、要素の境界線として、枠のように設定することが多いです。しかし、borderの四隅のうち一辺を見てみると、実は両端に斜めの切り込みが入っているようになっています。 そのため、borderで囲っている中身の要素の高さと幅を0に近づけれ

会社員などで年末調整で精算されている場合は、確定申告を行う必要はありません。 個人事業主などは、原則確定申告で定額減税が実施されますが、個人事業主以外でも、確定申告によって定額減税の精算を行う場合があります。 個人事業主で予定納税をしていない方 給与収入が2,000万円を超える方 退職所得があり、減税額が控除しきれない人 公的年金等を受給しながら働いていて確定申告が必要な人 （確定申告不要制度の該当者は対象外）

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

Habakiri は Bootstrap ベースの WordPress テーマなので、Bootstrap の CSS を使用することができます。ここでは良く使う便利な Bootstrap の CSS をご紹介します。 ボタン a、button、input[type="button"]、input[type="submit"]は、.btnというクラスを付けることでボタンのスタイルを適用することができます。 <a class="btn btn-default">リンク</a> <button class="btn btn-default">button</button> <input type="button" class="btn btn-default" value="input"> <input type="submit" class="btn btn-default" value="s

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。 メール Twitter SEE MORE 今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。 見出しなどで使えるデザイン例についてどこよりも詳しく（おそらく..）紹介・解説しています。すべてCSSのみで実現しているものになりまります。 コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。 CSSのみで作る見出しについて見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTMLタ

画像を使わなくても、立派なリボンをWebサイト上に表示することができます。この記事では様々な形のリボンの作り方を使用サンプルとともに紹介していきます。どれもHTMLとCSSのコピペで使うことができます。 はじめに リボンのテキストはサンプルでは「Welocome to My Blog!」や「NEW」などとしていますが、お好みのテキストに変えてご利用ください。ただし、複数行にわたるような長文にするとデザインが崩れてしまうことがあります。なるべく、短めのテキストを入れて頂くのがおすすめです。 また、HTMLコードでは例としてh3タグを使っていますが、この部分をh1~h5やpタグ、div、spanタグに置き換えてそのまま使うことができます。

CSS3の新たなプロパティ「transform」と「border-radius」を使って、CSSのみでいろんなカタチを表現できるようになりました。すべてを暗記するのも大変なのでコピペで再利用できるようにメモしておきたいと思います。 DEMO 正方形 -Square- 長方形 -Rectangle- 円形 -circle- 楕円形 -oval- 三角形（上） -Triangle Up- 三角形（下） -Triangle Down- 三角形（右） -Triangle Right- 三角形（左） -Triangle Left- 三角形（左上） -Triangle TopLeft- 三角形（右上） -Triangle Topright- 三角形（左下） -Triangle BottomLeft- 三角形（右下） -Triangle Bottomright- 湾曲した矢印 -Curved Tail

サイトデザインを行うと必ず目にする「マージン」と「パディング」。どちらも余白を指定するときのプロパティですが、「とりあえず書いたら整った！」と理由なく使っている方も多いのではないでしょうか。今回は、マージンとパディングの違いを、Bootstrapを用いながら解説していきたいと思います。ぜひ、参考にしてみてください。 SE 確かに、どっちがどっちだっけ？ってよく分からなくなりますね。 PL 大丈夫です。覚えやすい方法をお伝えするのでご安心ください。 マージンは、ボックスの外側の余白です。ボックスをどこに設置するか、という位置を調整するために使用されるプロパティです。一方パディングは、ボックスの内側の余白です。パディングには「詰める」という意味があり、ボックス内のテキストや画像の位置を調整するために使用します。以下のようなイメージです。（青：マージン/グレー：パディング） マージン・パディング

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel sceler

Web制作に便利なHTMLやスタイルシート、jQuery、WordPress等のノウハウをまとめています。