SimplicityとCocoonの見出しタグは別物 SimplicityとCocoonではもとから見出しタグのデザインが変わっています。 なので、 Simplicityでは特に指定しなくてもよかった項目も、Cocoonでは指定しなくてはならない項目も増えています。 指定するというと追加している感じですが、Cocoonのデフォルトである見出しの線を消すとか、色のついた背景を透過させるとかいったニュートラルの状態に戻すような感覚の指定です。 Simplicityではなかった指定項目には「/* 背景透過 */」みたいな感じで備考を書いてあります。 SimplicityのCSSをそのまま使うとこんな感じになります グローバルメニューのカスタマイズ グローバルメニューのデザインもSimplicity時代とほぼ同じです。 Simplicity時代は左寄せでしたが、Cocoonでは現行にならって中央寄
流れるテキストヘッドライン概要この表示をヘッドラインと言っていいのかわかりませんが、欄外表示という意味も持つ「ヘッドライン」表示と勝手に言っております。 無料ワードプレステーマのライオンブログにもあるヘッドライン表示。 やっぱり、動きのある表示は目立ちますよね。 今回は新着記事3件を表示させて、右から左へ流れる動きを付けて表示させます。 PC表示は左から流れてキュっと止まる感じ。 またスマホ表示(横幅768px以下)で流れる表示を変え、ゆっくり流れるようにしてます。 HTML<div class="head_line"> <div class="hl_title">New Article</div> <ul> <li> <span class="day">2019/01/01</span> <a href="#">タイトル</a> </li> </ul> </div>ワードプレスの場合(g
Result Font Awesomeのアイコンをアニメーションで変化するグラデーションカラーにする 例によってbackground-clipとtext-fill-colorを使用します css.element span {/*font-familyにFont Awesomeを指定してtransition設定しておく*/ color: #4a4a4e; text-decoration: none; transition: .2s; font-family: "Font Awesome 5 Free"; } .element span:before {/*アイコンはフォントなのでテキストの形で切り抜く*/ font-family: "Font Awesome 5 Free"; font-size: 3rem; transition: .2s all; opacity: 1; -webkit-
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。 レスポンシブなデザインの場合は端末の画面サイズに合わせて要素の幅を変える必要があるので、こういうテクニックを使ってアスペクト比を固定してやります。 imgの場合 HTML
テーブルをメインに使用しているコンテンツをレスポンシブ対応する必要があるので、色々調べてみて実装してみました。 参考にしたサイトと実装デモ 色々見てみた中で、自分なりに一番しっくりしたレスポンシブ対応の参考サイトはこちら。 Responsive table layout · Matt Smith これを基に実装したテーブルのデモはこちらになります。 レスポンシブ対応 table デモ 各テーブルの説明は下記になります。 縦並びの見出しテーブル 参考サイトとは関係ありませんが、一応縦並びの見出しテーブルのレスポンシブ対応も実装してみました。 会社概要風のテーブル 会社概要とかでよく使われている感じの一般的なテーブルです。 通常 <table class="col-head-type1"> <tr> <th>見出し1</th> <td>コンテンツ</td> </tr> <tr> <th>見出し
フローティングラベルとは、フォームのラベルが入力時にアニメーションで上方向にフローティングするテクニックです。 一昔前までは、完全にJavaScriptの範疇、もしくは強引なCSSでもたつく感じのアニメーションでしか実装できませんでした。しかし、:placeholder-shown疑似クラスを使用すると、シンプルなコードで滑らかなフローティングラベルを実装できます。 下記のデモはJavaScriptは無し、CSSのみで実装されています。
ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いCSSが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アップデート 2020/6/8: サポートブラウザを現在の状況に変更しました。 「backdrop-filter」だと、一行のコードで実装できる ガラス効果のさまざまなスタイル backdrop-filterののサポートブラウザ 「backdrop-filter」だと、一行のコードで実装できる 私はbackdrop-filterとい
はじめに 今回はCSSだけでタブ切り替えを作る方法をご紹介します。 最近はCSSの使い方次第でできることが非常に多くなっているので、タブ切り替えなどちょっと動きがあるものでもJavaScriptを使わず作ることが可能です。 今回作成していくもの まずは、今回作成していくデモをご紹介します。 今回作成していくデモはこちらです。 See the Pen CSS tabs by Ayaka Sasaki (@ayausaspirit) on CodePen. HTML解説 では、中身のソースコードを見て行きましょう。 まず、今回の全体のHTMLはこのようになっています。 <div class="tabs"> <input id="all" type="radio" name="tab_item" checked> <label class="tab_item" for="all">総合</lab
Result 今更感満載かもですが、いわゆるCSSオンリーのタブです。 :checkedと間接セレクタを使っています。 cssdiv{display: none;}/*非表示にしておく*/ input[value='1']:checked ~ #one{ display: block;}/*該当するradioボタンにチェックが入ったら表示に切り替え*/ input[value='2']:checked ~ #two{ display: block;} input[value='3']:checked ~ #three{ display: block;} input[value='4']:checked ~ #four{ display: block;}html<input type="radio" name="switch" value="1" checked="checked"> <in
display:inline;のスタイルを当てた場合、CSSの仕様上、上下の「margin」「padding」が当てられなくなります。 しかし、どうしても「display:inline;」のスタイルに当てたい場合があると思います。そんな時は、少々強引ですが、以下のCSSを試して見てください。 「display:inline」のスタイルのついた「moji」というクラスに「padding」を当てる場合の例です。上に25px、下に25pxの「padding」を当てています。 <div class="moji"> 我が名はネオエクスデス。FF5のラスボスである。 オメガより全然弱いけどなんか文句あるか!? さぁかかってこい!俺は神龍よりも弱いけどな! </div> .moji { display: inline; } .moji:before { display: inline-block; co
普段制作している上でうっかり忘れてしまったときにさっと確認することができる便利なチートシートや特定の情報がわかりやすくまとめられているリソースなどまとめてみました。 主にフロントエンドやマークアップエンジニアの方が日頃から利用することが多いと思うHTML・CSS・JavaScriptに関するものが中心で、他には各ブラウザのバグ情報を検索したり様々なデバイスの情報がまとめられたサイトなどもあります。 普段から多用している言語はもちろん、頻繁に調べてるとかまだまだ勉強しつつ使っているというものがあれば、それに関するチートシートをブックマークしておくことで不明点が出る度に検索する手間も省けて制作時間の短縮にも繋がると思います。 また、基本的にはweb上で確認するものになっていますが、中にはわかりやすく1枚のイメージでまとめられていたりPDF形式で用意されているものもあるので、それらを印刷して手元
使い方 HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。 スキップ 手順1:CSSをコピペ のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。 link rel〜を貼る場所 WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中に貼付け アメブロ[マイページ][デザインの変更][CSSの編集] Livedoorブログ[ブログ設定][PC][カスタマイズ][CSS] FC2ブログ[設定][テンプレートの設定][スタイルシートの編集] Blog
.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く