CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
CSS だけでスライドショー | q-Az
jQuery、JavaScript を使ってスライドショーを作るのが昔は一般的でしたが今なら CSS だけでも十分スライドショーに見える仕組みを作ることが出来ます。 この記事ではシンプルにフェイドイン・フェイドアウトで画像が切り替わるスライドショー作ってみます。下の方にデモも作りましたので参考にしてみてください。 作り方制限を緩めて作ることも当然可能なのですが説明をシンプルにするために、画像の形は正方形限定です。サイズに関しては制限はないですが width、height 属性はあった方がいいのでそろえた方が楽に HTML をかけると思います。画像の枚数も制限を付けて8枚です。 HTML<div class="photo-show"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <im
[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog
こんにちは。Supership デザイナーのハガです。今回はcssのお話です。 皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。） 10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
![[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/21b346cfad597981c91042909ace96f1a78b32c2/height=288;version=1;width=512/https%3A%2F%2Fd2v9k5u4v94ulw.cloudfront.net%2Fsmall_light%28dw%3D1200%2Cdh%3D630%2Cda%3Ds%2Cds%3Ds%2Ccw%3D1200%2Cch%3D630%2Ccc%3DFFFFFF%29%2Fassets%2Fimages%2F1468299%2Foriginal%2F334f34df-ae68-4ffe-a408-12dd1d5f21fb.png%3F1490245478)
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
CSSのみで幅可変のヘッダ固定テーブルを実装 - Qiita
テーブルのヘッダを固定して中身をスクロールさせたいって事、めちゃくちゃあると思います。 当然既にいろんな対策が練られています。 方法としては、大きく分けてCSSのみで実装する方法と、JQueryでプラグインなどを用いて実装する方法があります。 （参考：http://webnonotes.com/css/table-header/） しかし、CSSだけで実装する方法では、幅を固定しなければいけないというデメリットがあります。 でも… CSSだけで幅可変のヘッダ固定テーブル、作りたくない？ と思ったのでやってみました。 解決法 結論から言うと、calc()とpaddingを利用します。 まずはテーブルを用意。 <table class="table-header-fixed"> <thead> <tr> <th>#</th><th>ヘッダ2</th><th>ヘッダ3</th> </tr> </
Bootstrap 対応！グラデーションアニメをクラス名ひとつで簡単実装！Granim.js
ウェブサイトの制作中、目を惹くデザインのアクセントに悩むことはありませんか。最近、インタラクティブなグラデーションアニメのためのJSライブラリGranim.jsが公開され、注目を集めています。 今回は、このライブラリを使い、Bootstrapを使うような感覚で、クラス名をつけると背景にグラデーションアニメが実装できるようにしました。 デザインスパイスのひとつに、一度試してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方はシンプルで、グラデーション用のクラス名をつけると、その要素の背景がグラデーションになります。 ロゴと短文を使ったカード型レイアウト。 See the Pen qaxExO by ya90net (@ya90net) on CodePen.
変態的 CSS トリック
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。
Pure CSS Cinema Effect
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
CSSだけで画像トリミングできたよ ｜ Tips Note by TAM
サイズや比率がバラバラの画像を、CSSで同じサイズにトリミング（はみ出た部分をカットして表示）する方法を紹介します。 運用案件やCMSなど、更新の度にサイズ・比率がバラバラの画像がアップロードされてしまい、レイアウトが崩れると困りますよね。また、更新を担当する人がWebに詳しくないクライアント様であったり、担当者のスキルによっては画像を加工することが難しい場合もあると思います。 CSSで調整するようにしておくと、画像サイズがバラバラでもある程度レイアウトを揃えることができます。 やり方 HTML構造は、トリミングの枠になる要素で、画像を囲む必要があります。 例では<div>を使っていますが、<p>や<li>でも問題ありません。外側の枠はブロック要素が良いようですので、もしインライン要素を使う場合はdisplay: block;にしておくと良いと思います。 CSSのトリミングは、パターンによ
checkboxを使ってCSSだけでハンバーガーメニュー | q-Az
CSS だけでハンバーガーメニューを設置する という記事を以前書いたのですが、iPhone など CSS のセレクタで hover が効かないデバイスではメニューが開きませんでした。今回の記事はそれを解消すべく input 要素の checkbox を使う事で、hover ではなく click に反応するようにして iPhone でも CSS だけでメニューが開くようにしてみます。 当然、iPhone 以外の PC ブラウザ、アンドロイドでも問題なく開閉します。 checkbox って？checkbox とは input 要素で選ぶことが出来る種類の1つで、下のデモのようにクリックすることで 〆 マークがついたり消えたりする要素です。アンケートやフォームなどでよく使われれています。 input 要素に共通して言えることですが、label 要素というのを個々に設定することが出来ます。labe
WordpressをDreamweaver化!?できるプラグインがやばい - TetraThemesブログ
WordPressの管理画面をDreamweaverのようなエディター化できる「SiteOriginCSS」がすごいので使ってみました。 WordpressでブログやWeb制作をしていますが、ゼロから作るにしても、既存のテンプレートを使うにしても、スタイルの変更はコードエディターで行うことになります。 SiteOriginCSSを使うと管理画面でスタイルの変更が可能になるので、テンプレートでサイトを構築した後はコードエディター開かずに管理画面上でWeb制作が完結してしまいます。 ということで早速使ってみました。 WordPressをエディター化できる SiteOrigin CSS SiteOriginCSSは無料でダウンロードできるという太っ腹ツール。 このプラグインがすごいのはテンプレート側で特にコードの追加や設定などしなくても簡単に使えるという点です。普通にプラグインとしてインストール
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。 マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。 コマ割り風レイアウトの実装 実装はシンプルです。 HTML 各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。 <article class="comic"> <div class="panel"> <p class="text top-left">Suddenly...</p> <p class="text bottom-right">...something amazing happened</p
jqueryを使わないcssだけで実装するアコーディオンメニュー – VEGLコンテンツ
※高さを内容に合わせたいと言うコメント頂いた為、ちょっぴり編集しました。 アコーディオンメニューとは、クリック（タップ）すると隠れていたメニューが出てくるヤーツです。 スマフォ用のナビゲーションとかにも使われていたりしますね。 今まではこういうメニューはjqueryを使うのがわりと一般的でした。 が、htmlとcssだけでも実装できるのよ、という時代になって来たのでご紹介。 ちなみにクソブラウザ（ワタクシのスマフォ標準ブラウザ）でも動きます。 ひとまずコピペでオッケーです。 チェックボックスを使用したアコーディオンメニュー html <div class="ac_menu"> <label for="nav01">メニュー１</label> <input type="checkbox" id="nav01" class="bellows" /> <ul> <li><a href="">ナビ
Webサイトがスターウォーズの世界になるCSSライブラリ「starwarsintro.css」を使ってみた！ : うえぶはっく
CSSライブラリを読み込んで「専用のクラス」をHTMLに記述するだけで、あっという間にスターウォーズの「イントロ風サイト」が完成する【starwarsintro.css】が公開されているのでご紹介！ 映画のように下から上に流れていくテキストを、プログラミング不要で実現できるのが魅力で、表示させたい箇所のHTMLにクラスを付与するだけというお手軽さです！ 使い方！ まずは公式ページにアクセスして、CSSライブラリをダウンロードしましょう。 もしくは、公式ページで使われているURLからも利用可能です。 http://polarnotion.github.io/starwarsintro/starwarsintro.css そして、新規に「index.html」を作成しましょう！ <!-- index.html --> <!doctype html> <html> <head> <meta ch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/RinoTsuka/items/1a86fbb719e0a76a3784
Pure CSS3 Cycle Slider
「Yaku Han JP」で“約物”を半角に | Swings
fontawesomeのアイコンをcssの:before/:afterで挿入する - Qiita
