少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2010/04/14 2024 users 実装 Webクリエイターボックス CSS小技集 コード 少し

CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ サンプル まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをa... 続きを読む

ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌

2012/06/04 1443 users gmaps.js 緯度経度 phpspot開発日誌 実装 以下

gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイ... 続きを読む

JavaScript アニメーションのデザインパターン

2012/05/13 955 users アニメーション JavaScript デザインパターン 変色

JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() ... 続きを読む

この打ち水をする女性の素晴らしい写真だが昭和29年の撮影でもなく撮影者不明でもなかった。このツイートは良い写真を紹介したが、情報は虚偽しか書いてなかった。 - Togetterまとめ

2017/08/11 810 users TinEye 打ち水 虚偽 Togetterまとめ コンテスト

Googleでは引っかからないが、tineyeではtmblrで横流しされる大元の画像販売が見つかる。撮影者はToji Takahashi、タイトルはMagic of Water、コンテストの白黒部門で5位入選したとある。 gettyimages.co.jp/license/517397… リンク Getty Images Fifth prize in the black and white div... 続きを読む

divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック

2011/06/14 608 users スタディ ラッパー IE6 段階ごと CSS3

「」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに... 続きを読む

HTMLとCSSでアイコンを作りました | Webamb | ウェブアンブ

2013/08/19 590 users イラレ Webamb ウェブアンブ アンカー CSS

2週間ほど前に、KOJIKA17のこじかさんがひとつのdivも使わずに素晴らしいクオリティでアイコンを表現されたのを見て、「僕もやりたい！」と思っていたところ、イラレの変態である鈴木ともひろくんが「1つのアンカーでアイコンを表現」したのを見て、「これだ！」と挑戦してみました。 それがこちらのアイコンになります。 Illustrator Minimum Object Appearance それを再現... 続きを読む

[CSS]高さの異なるカラムを揃えるスタイルシート | コリス

2007/10/25 577 users コリス padding-bottom カラム CSS デモ

Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指... 続きを読む

[CSS]次のプロジェクトで使える！スタイルシートの極上テクニックのまとめ | コリス

2014/04/25 540 users コリス エレメント font-size指定 ボーダー CSS

CSSの進化が止まりません。 ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。 Zig Zag Border Created CSS 最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく... 続きを読む

[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス

2008/10/30 509 users コリス カラム クロスブラウザ対応 CSS エントリー

Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷で... 続きを読む

HTMLをレイヤー分けしたPSDに変換するキャプチャーソフト Page Layers が神 | fladdict

2012/09/16 490 users fladdict psd AppStore レイヤー HTML

Page Layersは、すごいウェブのキャプチャーアプリ。なんとキャプチャーするサイトを、DIVやIMG要素ごとにレイヤーわけしたPSDにしてくれる。 これは素敵と言わざるをえない。 ビデオをみれば素晴らしさは一目瞭然。URLを入力して保存ボタンを押すだけで、なんでも構造化したPSDにしてくれる。 Mac専用アプリで、AppStoreで$28.99。これは買いだと思います。 Web関係者は必須的... 続きを読む

divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」:phpspot開発日誌

2011/02/10 490 users スライダー jQueryプラグイン phpspot開発日誌

divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」2011年02月10日-jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 次のような、なんともオシャレなスライダーが簡単に... 続きを読む

CSS のみで吹き出し - terkel.jp

2009/12/06 485 users terkel Demo Weblog Body CSS

hail2u.net – Weblog – Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="... 続きを読む

マコなり社長の株式会社divを退職しました

2021/09/04 464 users まご 株式会社div 親友 社長 同僚

マコなり社長の株式会社divを退職しました あなたは誰？マコなり社長が経営する株式会社divの元社員です。 数年勤務した後に退職しました。 divで働けて良かった？良かったと考えてます。 divの同僚はみんな心優しくて有能な方ばかりでした。 退職した今では、親友として連絡を取り合っている元同僚もいます。 また、div... 続きを読む

[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ | コリス

2014/12/02 442 users コリス ＨＲ 囲い CSS 実装

divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。...記事の続きを読む 続きを読む

1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo

2009/12/21 442 users CSS outer margin rounded inner

スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0p... 続きを読む

divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ | コリス

2015/10/13 436 users ユーザエージェント セクショニング セマンティック コリス

HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Con... 続きを読む

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

2007/07/21 431 users CREAMU CSS style type 方法

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。 Web creatorsに載っていた方法ですw。 » Web creators (ウェブクリエイターズ) 2007年 03月号 ■CSSは↓。 <style type=... 続きを読む

透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos

2008/08/13 424 users youmos Box HTMLタグ カラス 数行

ガラスのように透明感のあるデザインをコンテンツに適用してくれるのがglassbox.js。JavaScriptコードで、GrassBoxデザインを適用したい<div>などを指定すると、必要なHTMLタグとスタイル指定が行われる。数行のJavaScriptコードを書くだけで、デザインが適用されるのは非常に分かりやすい。 オプションパラメータの指定で簡単に、Boxを可変サイズに設定もできる。Boxをド... 続きを読む

[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート | コリス

2009/07/05 390 users ブッダ コリス ヘッダ CSS 天地

ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 ... 続きを読む

[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス

2008/03/05 389 users clear コリス float hack CSS

TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, F... 続きを読む

DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌

2006/12/04 385 users height プロパティ CSS div要素 HTML

Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50%... 続きを読む

DIV一個で洒落たボックスを作ってみる！最近知ったCSSを使ったボックス装飾とか色々！ | バンクーバーのうぇぶ屋

2013/02/18 349 users バンクーバー CSS うぇぶ屋 ボックス グラデ

CSS3からDIV一個で出来る表現なんかにもかなり幅が出て来ましたね。ちょっと前まで超面倒だったボックスのオシャンティーな2重線の装飾とかぼかしとかグラデになんやらかんやら。DIVボックス一つとっても色々な装飾効果をもたせられるなぁと思う今日この頃。 それこそ、ONE DIVのような一つのDIVで表現できるアイコンを作ってるサイトもあって、CSS3を突き詰めると色々知ることも出来て面白いなぁと思う... 続きを読む

katatema.js - ✘╹◡╹✘

2016/11/23 347 users React import React コマンド HTML

2016 - 11 - 24 katatema.js 次のようなコードを書いて、 import React from "react"; export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、 katatema というツールをつくった。 <!DOCTYPE html> <html... 続きを読む

[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック | コリス

2014/08/27 290 users コリス シャドウ CSS HTML デモ

シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。 実際の動作は、下記ページで確認できます。 Jagged Border HTML まずは、デモのHTMLから。 デモは3つのギザギザがあるので、3つのdivを使用します。 [html] [/html] ギザギザを一つにした最小限のセットは、こんな感じです。 [html] [/html] ... 続きを読む

[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック | コリス

2013/04/18 289 users border-radius コリス 絵筆 ラッパー CSS

角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 HTMLはdiv要素が一つだけで、ボーダーも単にborderとborder-radiusを使用しているだけです。 デモページ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 [html] This is my para... 続きを読む