[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。 Bootstrap 実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。 Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrapのグリッドシステムの基本な使い方 BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル 以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。 Scrolling
CSS Font Sizing | bitsofcode
Following on from last week's article in which I briefly discussed css pixel sizing, I decided to look into the different ways you can declare your font size with CSS. Meet the Units # There are several different ways you can declare the size of a font in CSS. Broadly speaking, the units fall into one of two categories - absolute and relative. Absolute units are fixed and (mostly) relate to some p
美しいグラデーションを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
ペライチのWebページをすばやく作り始められるやつ「Rin 3.0」作った - MEMOGRAPHIX
Rin 3.0 というのを作った。 Rin - A lean, gulp-based HTML and SASS boilerplate by sanographix僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。 フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。 Rinは、だいたい下記のようなことがすば
Unleashing Creativity Across Instagram, TikTok, and Twitter
YouTube is undoubtedly one of the most popular platforms for sharing and enjoying videos. However, sometimes we might come across a video with an amazing soundtrack that we want to listen to on the go without having to watch the video. That's where YouTube to MP3 converters come in handy. Introduction: If you’ve ever tried to listen to your favorite music or watch a movie in a noisy environment, y
第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。 - 納豆には卵を入れる派です。
どうも。 書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。 先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck 反響の大きさに驚き！ありがとうございました。 実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザイン
コーディングする時のスライス方法とか - CSS HappyLife
珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい！ 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます！ Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック
CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。 Multiple Backgrounds and Borders with CSS 2.1 CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。 実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。 下記にその実用的で面白い効果をもったデモを紹介します。 マルチプル バックグランド デモ：Multiple Backgrounds with CSS 2.1 CSSファイル：backgrounds.css
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
Simple Page Peel Effect with jQuery & CSS
You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery. View Demo 1. HTML - Page Peel Wireframe The “pageflip” div will act as the container, mainly used to establish the relative positioning. Then nest the image and the span class of “msg
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
z-index playground
Creative CSS3 Animation Menus
http://www.designwalker.com/2010/06/jquery-forms.html
RFPtable_20100205.xls
https://vanillate.org/blog/wp-content/uploads/minecraftskin_02.jpg
IDEA * IDEA
