よく使うCSS

border-imageプロパティで縞模様の枠線を引く例。
これは、緑色のしましま柄画像を使った例です。

<p class="shima1">border-imageプロパティで縞模様の枠線を引く例。
これは、緑色のしましま柄画像を使った例です。</p>
.shima1 {
    border: #81ff3f solid 12px;
    padding: 5px;
    border-image: url(http://ikedash.work/wp-content/uploads/2019/06/shimashima1.png) 24 24 round;
}

 

テキストに影

<p class="shadow1">テキストに影</p>
.shadow1 {
text-shadow: 2px  2px 3px #000,
            -2px  2px 3px #000,
             2px -2px 3px #000,
            -2px -2px 3px #000;
color: #fff;
}

 

テキストに影

<p class="shadow2">テキストに影</p>
.shadow2 {
text-shadow: 2px  2px 3px #f00,
            -2px  2px 3px #f00,
             2px -2px 3px #f00,
            -2px -2px 3px #f00;
}

 

見出しに線
<div class="heading1">見出しに線</div>
.heading1 {
	font-size: 2.8rem;
	font-weight: bold;
	letter-spacing: 8px;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	margin-bottom: 20px;
	line-height: 1.5;
}
.heading1:before, .heading1:after {
	background: #999999;
	content: "";
	flex-grow: 1;
	height: 1px;
	min-width: 20px;
	display: inline-block;
	vertical-align: middle;
}
.heading1:before {
	margin-right: 30px;
}
.heading1:after {
	margin-left: 20px;
}

 

レジャー
<div class="heading2"><span class="heading2-inner">レジャー</span></div>
.heading2 {
	text-align: center;
}
.heading2 span {
	font-size: 2rem;
	font-weight: bold;
	background-color: #333;
	border-radius: 50px;
	text-align: center;
	padding: 2px 10rem;
	color: #fff;
	display: inline-block;
}

 

見出しの下に線
<div class="heading3">見出しの下に線</div>
.heading3 {
	font-size: 3.3rem;
	position: relative;
	text-align: center;
	margin-top: 5rem;
	margin-bottom: 8rem;
	line-height: 1.5;
}
.heading3:after {
	content: '';
	display: block;
	position: absolute;
	top: 130%;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #333;
	height: 3px;
	width: 100px;
	margin: auto;
	padding: 0;
}

 

見出しの上に線
<div class="heading4">見出しの上に線</div>
.heading4 {
	font-size: 1.7rem;	
	margin-bottom: 2rem;
	text-align: center;
	position: relative;
}
.heading4:before {
	content: '';
	display: block;
	position: absolute;
	height: 3px;
	background-color: #000;
	width: 32px;
	left:0;
	top:-2rem;
	right:0;
	bottom:0;
	margin: 0 auto;
}

 

moreボタン

<div class="btn-more1"><a href="#">more</a></div>
.btn-more1 a {
	background-color: #2e9d74;
	border-radius: 3px;
	color: #fff;
	text-align: center;
	padding: 0.5rem 0 0.5rem;
	display: block;
	margin: 0 0 0 auto;
	width: 160px;
	position: relative;
}
.btn-more1 a  {
	width: 245px;
}
.btn-more1 a:after {
    font-family: "FontAwesome";
    content: "\f105";
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -1.6rem;
}

 

カラムレイアウト

池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。

ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。

半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」

忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。

<div class="column1">
<p>
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
</p>
<p>
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>
<p>
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
</p>
<p>
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
</p>
</div>
.column1 {
    width: 100%;
    column-count: 3;
    column-gap: 30px;
}
@media (max-width: 576px) {
  .column1 {
    column-count: auto;
}
}

 

外部リンクに対する装飾

外部リンクに対する装飾

a:not([href*="http://ikedash.work/"]):after {
	font-family: "FontAwesome";
	content: '\f08e';
	margin-left: 5px;
}

 

先頭と最後尾の2項目以外を対象にする装飾

  • 文章が入ります。
  • 文章が入ります。
  • 文章が入ります。
  • 文章が入ります。
  • 文章が入ります。
<div class="list1">
<ul>
	<li>文章が入ります。</li>
	<li>文章が入ります。</li>
	<li>文章が入ります。</li>
	<li>文章が入ります。</li>
	<li>文章が入ります。</li>
</ul>
</div>
.list1 li:not(:first-child):not(:last-child) {
	border-bottom: 1px dotted #000;
}

 

ボックスに影

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
<div class="box-shadow1">文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</div>
.box-shadow1 {
	background-color: rgba(255,255,255,0.95);
	box-shadow: 0 0 13px rgba(0,0,0,0.1);
	box-sizing: border-box;
	width: 100%;
	padding: 2rem;
}

 

真ん中に文字
<div class="text-box1">真ん中に文字</div>
.text-box1 {
	background-color: #333;
	color: #fff;
	font-size: 2.3rem;
	width: 100%;
	padding: 8rem 2rem;
	text-align: center;
	box-sizing: border-box;
	line-height: 1.5;
}

 

左から右へのグラデーション

グラデーション
<div class="grad1">グラデーション</div>
.grad1 {
	background: -moz-linear-gradient(left, #FFC778, #FFF);
	background: -webkit-linear-gradient(left, #FFC778, #FFF);
	background: linear-gradient(to right, #FFC778, #FFF);
	padding: 2rem;
}

 

上から下にグラデーション

グラデーション
<div class="grad2">グラデーション</div>
.grad2 {
	background: -moz-linear-gradient(top, #FFC778, #FFF);
	background: -webkit-linear-gradient(top, #FFC778, #FFF);
	background: linear-gradient(to bottom, #FFC778, #FFF);
	padding: 2rem;
}

 

斜めにグラデーション

グラデーション
<div class="grad3">グラデーション</div>
.grad3 {
	background: -moz-linear-gradient(top left, #FFF, #FFC778); 
	background: -webkit-linear-gradient(top left, #FFF, #FFC778); 
	background: linear-gradient(to bottom right, #FFF, #FFC778); 
	padding: 5rem;
}

 

セレクタ

直下にある要素に指定

文章が入ります(strongにのみ

<p>文章が入ります(<strong>strongにのみ</strong>)</p>
p > strong { color: red; }

 

 

隣接兄弟セレクタ(例:h1要素と隣接しているp要素だけ)

大見出し

最初の段落

2番目の段落

<h1>大見出し</h1>
<p>最初の段落</p>
<p>2番目の段落</p>
h1 + p { color: red; }

 

特定の属性値を持つ要素だけを適用対象にする

<ul>
	<li><a href="#" target="_blank">外部リンク</a></li>
	<li><a href="http://ikedash.work/">文章が入ります。</a></li>
	<li><a href="#" target="_blank">外部リンク</a></li>
	<li><a href="http://ikedash.work/">文章が入ります。</a></li>
	<li><a href="#" target="_blank">外部リンク</a></li>
</ul>
a[target="_blank"] { color: red; }

 

縦文字

縦文字
縦文字
.tatemoji {
writing-mode: vertical-rl;
}

 

 

ボックスをずらす

ボックス
ボックス
ボックス
ボックス
.zurasu-block {
display: flex;
}
.zurasu-box {
border : 1px solid #ccc;
height: 100px;
}
.zurasu-box:nth-child(even) {
transform: translateY(40%);
}

きらりん加工

<div class="reflection-img">
        <img src="画像.jpg">
        <div class="reflection"></div>
</div>
.reflection-img{
    width       :510px;
    height      :510px;
    position    :relative;
    overflow    :hidden;
}

.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL