CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ素晴らしいアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。 これからのプロジェクトに使ってみたくなるような実用的なものから、CSSでこんなこともできるのか！という驚きのテクニックまで、今年もCSSに注目です。
HTML5とCSS3で何ができるかを実際に動かして学べる「The Expressive Web」
「HTML5」や「CSS3」を導入することで、ウェブサイトの作成やウェブデザインがさらに便利になります。そんなHTML5とCSS3で追加されている新しい要素で「何ができるのか？」ということが、実際に試したり動かしたりしつつ学べるAdobeの「The Expressive Web」です。 HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ 「The Expressive Web」は左側に各コンテンツのメニューがあり、1つずつ見ていくことでCSSやHTML5の動作が分かっていくというウェブサイト。一番上の「CSS3 Animations」をクリックすると、青いキャラクターと背景がCSS3アニメーションで動いている様子を見ることができます。CSS3アニメーションはHTMLにキーフ
Codepad - Share Code Snippets, HTML5, CSS3, JS Demos
ActionScript Ajax AngularJS Apache AppleScript ASP.NET Bash C C# C++ Coffee CoffeeScript ColdFusion Command CSS Delphi Django ES6 GLSL Grunt Gulp HAML Haskell HTML iOS Jade Java JavaScript jQuery JSX Less LUA MDX MySQL Objective Other Pascal Perl PHP Plain text PowerShell Processing Progress Prolog Pseudocode Python Rails RegExr Ruby SASS Scala Scheme SCSS SmallBASIC Smarty SQL Stylus SVG Swift Ty
[JS]Responsiveデザイン用のスタイルシートファイルのロードを最適化するスクリプト -eCSSential
Responsiveデザイン用に用意した複数のスタイルシートファイルのロードを最適化する超軽量（2KB）のスクリプトを紹介します。 eCSSential -GitHub [ad#ad-2] スタイルシートファイルのロードの注意点 eCSSentialとは eCSSentialの使い方 スタイルシートファイルのロードの注意点 スタイルシートファイルのローディングの最適化、あるいは優先順位をつける方法は非常に難しいです。ウェブサイトがクリーンなロードをするためには、ページレイアウトのレンダリングに必要なスタイルシートがドキュメントのhead内に配置されなくてはいけません。 もし、スタイルシートがドキュメントより後ろに配置、あるいはJavaScriptで動的に配置される場合は、ページのレンダリングと共ににスタイルシートのロードが始まってしまうので、ページの表示が遅くなります。 Responsiv
[CSS]既存のボタンのデザインをセクシーに美しくするスタイルシート -Sexy Buttons | コリス
ブラウザごとに異なる味気ないデザインのボタンをアイコンやグラデーションを使用してセクシーに美しくするCSSのフレームワークを紹介します。
入力箇所も手書き風にしたコンタクトフォームを制作するチュートリアル
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ：日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。 HTML: 基本構造 まずは、HTML5を使ってフォームを配置する前の基本構造から。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head>
黄金比にも対応したグリッドレイアウト用のシンプルなCSSのフレームワーク -The Square Grid
2, 3, 4, 6, 9, 12, 18の均等分割をはじめ、黄金比の分割にも対応したグリッドレイアウト用のCSSのフレームワークを紹介します。 The Square Grid [ad#ad-2] The Square Gridのグリッド設計 グリッドの全幅は994pxで、両端に余白7pxをとり、残りの980pxを均等に35分割したものをベースにしています。 均等分割のカラム
ラクするWeb制作「CSSフレームワークなにソレ？」な初心者へおすすめ7個
注：今回の記事は初心者向け、Web制作を効率化＆スピードアップしてくれる「便利なHTML／CSSフレームワーク」の紹介です。 CSSフレームワークとは？ 2021年のおすすめCSSフレームワーク7個 CSSフレームワークの選び方 上の3点をお伝えしていきます。 それなのに、なぜ、カレーの画像で始まるの？ その理由は、「CSSフレームワークって何？」を知ると理解できます。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 Follow @websae2012 CSSフレームワークって何？ CSSフレームワークは、言い方を変えれば「カレーのルー」と例えられます。 ある女は言った 女は言葉を続ける。 「本当に
コードを覚えなくてもWordPress編集ができるようになるためのカンペコレクション
WordPressには、いくつかのプログラム言語が利用されています。 主に使うものといえば、以下のような言語です。 WordPress関数（PHP） PHP HTML CSS JavaScript（jQuery） ただ、これだけの言語があると、初めてWordpressに触れる人には、覚えるのが大変なのではないかと思います。 というか、ある程度プログラム経験がある僕でも、揮発性の高い脳を利用しているため、全く覚えられません。 ということで今回は、Wordpressで「これどうすればいいんだったっけ？」「あれなんて関数だったっけ？」なんて時に見ると便利なカンニングペーパー（チートシート）の紹介です。 WordPressチートシート WordPressで重要な部分の覚え書きというか、これだけ覚えておけばある程度Wordpressを使えるようになるチートシートです。 日本語版 WordPress
WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS
WordPressの記事やページごとに、それぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインを紹介します。 Custom CSS and JS [ad#ad-2] Custom CSS and JSのインストール WordPressの記事ごとに個別のCSSを追加 WordPressの記事ごとに個別のJavaScriptを追加 Custom CSS and JSのインストール プラグインのインストールは、WordPressの管理画面「プラグイン」の「新規追加」から行えます。キーワードに「Custom CSS and JS」を入力して、「プラグインの検索」ボタンをクリックしてください。 プラグインの新規追加画面のキャプチャ 検索結果に表示された「Custom CSS and JS」の「プラグインのインストール」でインストールが始まります。 また、下記ページか
第1回 LESSのメリットと導入方法 | gihyo.jp
CSSをより柔軟に、わかりやすく、速く、ミスを少なく記述できる 最近、CSSの拡張メタ言語「LESS」が話題になっています。LESSとは、かんたんに言えば、CSSの良いところを活かしつつも 「より柔軟に」 「よりわかりやすく」 「より速く」 「よりミスを少なく」 記述できるという、新しい書き方です。うさんくさいと感じるほどにいいことづくめですね。 CSSの拡張メタ言語には、LESSの他にも、Sass、Stylusといったものがありますが、LESSは一番CSSの書式に近く、活用するためのツールがそろっているのが特徴です。 最近LESSについて、はてなブックマークや技術系ブログでもたくさんとりあげられているので、実際に興味を持っている方や試した方もいらっしゃるかもしれません。しかし、まだ入門記事が多く、実際に導入したときのメリットをイメージできないことも多いのではないでしょうか？ 本連載では、
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
![[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5d222ae06cf2d58d2b7bc17660d161a7352606d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102201-01.png)
CSSパフォーマンスツールを使いこなす - ワザノバ | wazanova
https://www.youtube.com/watch?v=FEs2jgZBaQA 1 comment | 1 point | by WazanovaNews ■ comment by Jshiike | 約1時間前 CSSconf EU 2014におけるGoogleのAddy Osmaniの講演です。CSSのパフォーマンス向上に役立つツールを40個+ 紹介してくれてます。 背景 パフォーマンスの最適化において、 ベースラインとしてやること 最小化（minification） 結合（concatenation） 画像の最適化 圧縮（GZip, Zopfli） 非同期スクリプト キャッシュの利用 WOFF2フォント CSSスプライトを使う リダイレクトをしないこと スピードアップ パフォーマンス向上に重要なCSSのインライン化 レンダリングをブロックしないように、急ぎでないアセットの取
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに
[CSS]複数行のテキストを天地左右中央に配置するスタイルシート
Vertically Center Multi-Lined Text demo デモでは、一行、複数行ともに中央に配置されています。 仕組みは、吹き出しに「display: table;」、その中のパラグラフに「display: table-cell;」を指定し、天地左右中央に配置します。 HTML <div class="area"> <div class="bubble"> <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p> </div> </div> CSS .area { width: 300px; height: 300px; background: url(../images/abe-bg.png) no-repeat;
SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ：cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
要素の横幅と高さの比率を保つ | 集の一期一会
[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム