美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
AtomエディタのMarkdown PreviewのCSSを実務書類的に調整する | 大石制作ブログ
大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed Atomエディタ、すっかり使いやすくなりましたね。 出始めのころは動作が重く、使い物にならないと感じてたけど、しばらく経って入れなおしてみると、凄まじい進化をして、当時Sublime Textを使っていた僕も乗り換え不可避でした(笑) そのAtomエディタのならではの標準プラグイン、Markdown Previewの表示のスタイルは、元々GitHub的スタイルなだけあって、そのままでも本当に美しいです。 だけど、これは完全にパソコンスクリーン表示向け、そして半角文字向けの見た目なので、それを印刷やPDF化したり、プロジェクタで映す場合、ちょっと見辛い上、日本語が主体
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
float で横並びさせてリストを中央揃え（センタリング）させる方法 - Qiita
<div class="hoge"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> ↑こんな感じのhtmlを想定します。 css position: relative; を使います。 大枠の要素(別にdivでもpでも他でも大丈夫)から指定していきます。 .hoge { position: relative; overflow: hidden; /* 下のulのcssでリスト全体を右に50%移動しているので、その分幅が広がってしまいスクロールバーが表示されてしまいます。それを防ぐ為の設定です。 */ } .hoge ul { position: relative; left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */ float: left; } .ho
親要素の表示領域内でabsoluteな配置 - Qiita
親要素の表示領域内でabsoluteな配置 普通にposition: absoluteを使うと画面内での絶対座標に配置されてしまう。 だが、親要素のpositionにstatic以外を指定することで、親要素の表示領域内での絶対座標に配置することができる。 .parent { position: relative; margin-left: auto; margin-right: auto; width: 80%; } .child { position: absolute; right: 0px; top: 0px; } static以外だとpositionにはabsoltute, relative, fixedが指定可能だけれども、 ここではtop等を指定しなければstaticとなんら変わらないrelativeを親要素.parentに指定している。 absoluteとfixedを指定した
画像編集いらず！jQueryとCSSだけで画像をトリミング＆センタリングする | ホームページ制作・開発／大阪｜アルカナワークス
商品画像の一覧を作成したいとか、トップページにブログ内の画像を固定サイズにトリミングして表示したい。 そんな時に元画像を変更せずにCSSとｊQueryだけで自動的にトリミング＆センタリングする方法をご紹介します。 システムで自動的に商品一覧を表示しているときや、 Wordpressなどで登録するときに、画像を編集してトリミングとか難しいことができない、 といった時に便利に使えます。 CSSでのトリミングはもともとこのサイトで紹介されていたのですが CSS GLOBE – Create Resizing Thumbnails Using Overflow Property こちらはCSSだけでの方法なので、画像をセンタリングするには1つ1つ調整するか、 元の画像を決められたサイズにしなくてはいけませんでした。 そこで、追加でｊQueryで、画像をセンタリングるものを組み合わせてみまし
flexible.gs - レスポンシブ対応のグリッドレイアウトフレームワーク MOONGIFT
レスポンシブなWebサイトを作る際にBootstrapやZurb Foundationといったフレームワークを使うことはままあります。それはなぜかと言えば便利な機能と整ったデザインが提供されるからなのですが、逆にデザイン上の縛りが出てしまうのが難点です。 そこで使ってみたいのがflexible.gsです。レスポンシブWebデザインの中でも肝になるであろう、メディアクエリーとグリッドについてのみ提供するスタイルシートフレームワークです。 flexible.gsの使い方 flexible.gsのパターンは次のように分かれています。 xl（デスクトップ）、lg（横向きのタブレット）、md（縦向きのタブレット）、sm（横向きのスマートフォン）、xs（縦向きのスマートフォン）といった組み合わせでデザインを指定するようになっています。 グリッドのデモとしては次のようになりまうｓ。 スマートフォンの場合
Skeleton - レスポンシブサイトを構築するためのベースデザイン MOONGIFT
レスポンシブなWebサイトを作ろうと思った時、一からすべてを設計するのはとても大変です。とはいえ既存のフレームワークはUIウィジェットを含んでいたりして余計なしがらみが発生してしまう可能性もあります。 そこで使ってみたいのがSkeletonです。ごく基本的なレスポンシブ構造だけを提供するCSSフレームワークです。 Skeletonの使い方 こちらがデモページのトップです。 デザインのデモ。スマートフォンアプリのランディング風。 3つのグリッドを分けて表示。 画像のレスポンシブにも対応しています。 幅を狭めるとこうなります。 先ほどの3段カラムは縦に並びます。 画像も縦です。 グリッドはよくある12カラムで構成されています。 タイポグラフィ。 ボタン。 フォーム。 リスト。 コード。 テーブル。 Skeletonはごく基本的な機能、部品だけを提供します。このまま本サイトに適用するということは
[CSS]かっこいいアイデアが盛り込まれた横からスライドするナビゲーション
スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。 このオフキャンバスのスタイルも少しずつ確実に進化してますね。 デモのアニメーション スライドの切替にはチェックボックスを使われており、ナビゲーションが表示される際には各アイテムが異なるタイミングでアニメーションします。 HTML コンテンツエリアはsection要素で、そこにナビゲーション表示のトグルとなるチェックボックスのラベルを配置します。ナビゲーションは、普通にリスト要素で実装します。 <div id="wrapper"> <div class="mobile"> <!-- トグルとなるチェックボックス --> <input type="checkbox" id="tm" /> <!-- ナビゲーション --> <ul class="sidenav"> <
pixivのCSSで使われるクラス名ルール
pixivで運用して上手く行っている感触のあるルールを紹介。 CSS的にルートになるセレクターのクラス名は_で始める _始まりのクラスはサイト内でユニーク CSSの何が問題か。それはどこで指定が衝突するのか分からないことである。そこさえ把握できれば気を付けながら書けるので、それでもう問題ないと思っている。CSSには機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない方がいい。 コード例。 HTML: <section class="_foo-container"> <h1 class="title">foo</h1> <ul class="_bar-items"> <li class="item"><span class="title">item 1</span></li> <li class="item"><span class="title">item
独自のCSSやJSを読み込む
WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみました。 CSSファイルを読み込む方法 CSSを読み込むには、以下の関数を使用します。 wp_enqueue_style ★例として、子テーマフォルダ下に配置したBootstrapのCSSファイルを読み込ませる functions.php(子テーマ)に追加して下さい。 // wp-config/theme/[子テーマ名]/functions.php function my_styles() { wp_enqueue_style( 'bootstrap', get_bloginfo( 'stylesheet_directory') . '/bootstrap.min.css', array(), n
Admin LTE- A full featured, free Bootstrap 3 admin dashboard theme.
blog Bootstrap themes, templates, and gallery Menu and widgets Admin LTE is an absolutely stunning free Bootstrap dashboard theme from almsaeedstudio. It is fully responsive and built on top of Bootstrap 3. Admin LTE comes shipped with the following : Pages Dashboard Mailbox Calendar Invoice Lockscreen Login Register 404 Error 500 Error Blank page Plugins Boostrap Slider Ion slider Bootstrap WYS
Canvas Fingerprintingはクッキーより怖いのか技術的に調べてみた｜TechRacho by BPS株式会社
morimorihogeです。最近忙しくて遠征すらおぼつかない状態です。夏イベント資源足りるのかこれ。 なんかはてブ界隈などでCanvas Fingerprintingの話題が出ていて、Cookieより怖い！とか、Adblockみたいに無効にする方法がないのにユーザトラッキングできて怖い！！といったアオリの記事がぽこぽこ出てきているようです。 でも、ざっと調べた限りの日本語のどの記事を読んでも、具体的にどうやってユーザ個々のトラッキングができるようになるのか、技術的に解説されている記事が見つかりませんでした。 というわけで、エンジニアとしてはここは一つキッチリ理解しておきたいと思い、調べた結果をまとめます。 もし僕の読解がおかしくて変なことを言っている部分があれば、はてブやTwitter、コメント欄などで指摘して頂ければ更新していこうと思いますので、マサカリ上等です ;) Canvas F
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
SpinKit - 凄いテクニック。CSS3を使った各種スピナー MOONGIFT
CSS3だけで作れちゃうのが凄いですね！ 処理中にユーザがストレスを感じないように表示されるスピナー。最も簡単なのはアニメーションGIFを表示することかなと思いますが、背景色を微妙に違ったり、大きさを適切に考えないといけないなど画像だけに扱いがちょっと面倒に感じることがあります。 そこで使ってみたいのがSpinKitです。なんとCSS3のアニメーションを使ってスピナーを実現しています。 一例。四角いパネルが回転します。 円が次々に大きさを変えていくパターン。 棒の長さが変わっていくパターン。 スクリーンショットでは分かりづらいので動画を撮影しました。 例えば棒の長さが変わるウェーブの場合、次のようなスタイルシート設定になります。 .spinner { margin: 100px auto; width: 50px; height: 30px; text-align: center; fon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの実用的なテクニックから素晴らしいアイデアまで！スタイルシートの最新テクニックのまとめ
無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス
先端サイトに学ぶCSS3/jQueryアニメーションデザイン
Iconic