ドロップキャップをCSSで実現する方法 | q-Az
段落の文字の1つ目を大きくして目立たせる手法です。正式名称を「ドロップキャップ」というそうです。英字新聞などではよく見る文章の書き出しですね。 日本ではあまり使われる書き方ではありませんが、CSS だけで実現可能なののでやってみたいと思います。 Drop Cap .dropcap:first-letter { font-size: 60px;/*文字の大きさ*/ margin-right: 6px; margin-top: 6px; float: left; line-height: 1;/*必要*/ }HTML<p class="dropcap">ドロップキャップは英字新聞などで・・・</p> 例ドロップキャップは英字新聞などでは、よく見る手法ですが日本語で使われることはほとんどありません。CSS だけで1文字目だけ選択することが出来、それを使うことでブログの文章などでもドロップキャップ
CSSだけでブルブル震わせる | q-Az
CSS だけで文字や画像をブルブル震わせてみます。 複雑な感じにブルブル震わせることも CSS を細かく記述すれば出来るのですが、なるべく短いシンプルな記述でブルブル震えるよう見える感じにしてみました。 CSS だけでブルブルCSS の animation を使って永久アニメーションをさせます。 HTML<span class="buruburu">ブルブル</span>class 名が「buruburu」の要素を作ります。 .buruburu { display: inline-block; animation: hurueru .1s infinite; } @keyframes hurueru { 0% {transform: translate(0px, 0px) rotateZ(0deg)} 25% {transform: translate(2px, 2px) rotateZ(
CSSが苦手なWebデザイナーが知っておきたい、デザインに関係するCSSのテクニックのまとめ
Webデザイナーはデザインの知識やテクニックだけでなく、どのような実装テクニックがあり、何が実現可能なのか知っておくことで、さらに素晴らしいデザインを作りだすのに役立たせることができます。 Webデザイナーにとって、CSSは難しく感じるかもしれません。しかし全部を覚える必要はありません。デザインに関わるいくつかの有用なCSSのテクニックを紹介します。 20 essential CSS tricks every designer should know イラスト: Girls Design Materials 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. 絶対位置への配置 2. 全称セレクタ（*） 3. すべてのスタイルを上書き 4. 左右の中央に配置 5. 天地の中央に配置（テキストのナビに） 6. ホバーエフェクト 7
CSSはやっぱり便利！最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ
ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇していたテクニックも数多く利用できます。 アコーディオンやカルーセル、モーダルボックス、ポップオーバー、フリップ コンテンツなど、JavaScript無しのCSSで実装するテクニックを紹介します。
Webにも紙にも使える、囲み枠デザインの基本テクニック
2016年1月20日 Webデザイン テキストを四角で囲ったシンプルな枠。もちろんWebだけでなく、印刷物でも多く使われていますよね。今回は、デザインをする上では欠かせないと言っても過言ではないこの囲み枠にフォーカスしてみようと思います。新米デザイナーさんや、デザイナーじゃないけど資料作成をする機会の多い営業さんの参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ 呼び方は「囲み枠」で正しいのか…謎ですが、テキストを囲んでいるボックスのことです。海外では「パネル」「テキストボックス」等と呼ばれています。 こんな時に使うと◎ 強調する時 「今なら20％オフ！」「期間限定！」等、注目して欲しい要素に利用されます。Webサイト上ではアラートメッセージでよくみかけますね。図はBootstrapのアラート要素。 要素の差別化 補足や注意書きなど、メインのコンテンツと区別して表示したい時
2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ
2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。 イラスト: Girls Design Materials 2016年1月12日からIEの対応は実質IE11に レイアウト関連のCSS アニメーション関連のCSS ユーティリティ関連のCSS 2016年1月12日からIEの対応は実質IE11に 2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。 各Windows OSごとの対応バージョンは、下記の通り。 Internet Explorer サポートポリシー変更の重要なお知らせ Vistaユーザーはほぼ
シンプルな水平メニューと相性が良さそうな、CSSホバーエフェクトのまとめ - NxWorld
グローバルナビゲーションといえば作り込んだ感じのデザインや移動先のページの内容が把握しやすいようなアイコンなどを一緒に配置しているものをやはり多く見かけますが、中には特にミニマルデザインなサイトなどでテキストだけを並べたシンプルな水平メニューを取り入れているサイトもあります。 ただパッと見はたしかにシンプルなデザインでもホバー時にアニメーションを加えたりしているサイトも多く、自分も普段からそのようなデザインの時にはせめてホバーぐらいはちょっと手を加えたいなと思うことが多いので、その際に参考になりそうなホバーエフェクトを備忘録兼ねてまとめました。 全体的にボーダーを組み合わせたようなエフェクトが多く、実装は全てCSSで可能なものになっています。 Creative Link Effects 少し前のものですが全21種類のエフェクトがまとめられており、ボーダーやテキストにアニメーションを加えて様
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
「サイトをつくる」のススメ - はぁはぁブログ
2015-09-10 「サイトをつくる」のススメ はじめまして。 まみぺこです。 Webサイトをつくるお仕事をしています。 コーディングが大好きなWebデザイナーです。 デザインから HTML / CSS / JavaScript までやっています。 このブログもそうですがデザインからコードまで心をこめて手づくりしています。 これから「サイトをつくるといいよ〜」というお話をしてみます。 とくに「Webをつくるお仕事がしたい」という学生さんや 「やりたいことをしたい」「なにかつくりたい」 「変わりたい」っておもっているひとへむけて 実際に私のつくったサイトの例を紹介しながら たのしくいってみたいとおもいます！ 「サイトをつくる」のススメ。 サイトをつくろう やりたいことがわからない。 つくりたいものがわからない。 そんなひとは なんでもいいからひとつ練習だとおもって サイトをつくってみるのは
年表やSNSのデザインの参考に！タイムラインのサンプル10例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 今回は「タイムライン」のサンプルを10例ほど紹介していきます。 たとえばLIGの沿革ページもSNSのタイムラインっぽいデザインになっているように、沿革や実績をタイムラインで見せたいという要望はときどきあるので、デザインの際の参考になればと思います。 それでは、はじめます。 さまざまなタイムライン10例 1. Vertical Timeline http://codyhouse.co/gem/vertical-timeline/ レスポンシブ対応のタイムライン。 JSも使用していて、スクロールでコンテンツが“びよよん”と気持ちいい動きで出現します。 中央のカテゴリーのアイコンがアクセントになっていて、かわいいですね。 2. VERTICAL TIMELINE http://tympanus.net/codrops/2013/05/02/vertical-
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード | 9ineBB
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
「春っぽいデザインにして！」と言われた時に参考にしたい華やかデザインと桜の無料素材まとめ
寒い冬が終わり、ついに花で溢れる春がやってきました！ ワクテカしながら春に関するデザインや素材を集めたので、今日はそれをまとめてご紹介したいと思います。 春デザインの参考画像 バナー・メインビジュアルなどで、春っぽいあしらいのものを集めてみました。 コードアワード コードアワード ピンクのベタ塗り背景に桜の花びらを散らしています。今をときめくフラットな感じの仕上がり。 minne 【締切りました！】「minneマルシェ in 門司港グランマーケット2015春」出展作家さま大募集！ | ハンドメイドマーケットminneお知らせブログ イラスト内に桜の木と花びらを配置したデザイン。春カラーの「グリーン×ピンク」とマルシェ（フランス）カラー「ブルー×レッド×ホワイト」が絶妙にマッチしています。 脱毛なら脱毛サロンのエピレ｜epiler【公式】 脱毛なら脱毛サロンのエピレ｜epiler【公式】 切
Webアクセシビリティの勉強に役立つツールやWebサイト、書籍いろいろ
2015年4月1日 アクセシビリティ, 便利ツール, 色彩 以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。 ↑私が10年以上利用している会計ソフト！ アクセシビリティとは？ 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシブルである」と言えます。 「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするの
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ
新着記事
ピュアCSSでシャキシャキ動くローディングアニメーション集「Loaders.css」:phpspot開発日誌