[CSS]たった二行で、さまざまなカラムを設定するグリッドのフレームワーク
たった二行のシンプルなスタイルシートで、さまざまなサイズのカラムを設定するグリッドのフレームワークをを紹介します。 .row { display:table; width:960px; margin:0 auto } .cell { display:table-cell; vertical-align:top; padding-left:10px } HTMLもシンプルでdiv要素を使うだけです。 HTML 3カラムの例です。カラムの数にあわせて、div要素を配置します。 <div class="row"> <div class="cell" style="background-color:#aaa;">1</div> <div class="cell" style="background-color:#bbb;">2</div> <div class="cell" style="back
今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
非デザイナーのためのデザイン基本テクニック その１ | 07design.blog
デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で
Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選 - かちびと.net
Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基本的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Firebug Web制作といえばFirebugですが、僕はChrome派なのでChromeエクステンションのLite版を使っています。元々、Chromeにはデベロッパーツールがありますし、FxのFirebugも使いこなせてなかったのでこれで十分。 Fi
まずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.net
ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 html5.jp ～HTML 5で導入されるcanvas要素の使い方～ 同じく教科書的なサイト。ありがたい。まだ、ざっと読んだだけですが、すごく分かりやすかったです。 ～HTML 5
フリーフォント で簡単ロゴ作成 | キーボード画像作成 | アイコン・はんこ画像作成
● 自由の翼フォント ➡ ( ☑ 表示サンプル ) ※ 禁止事項 当フォントファイル(TTFファイル本体)を無断で販売する行為 M+ FONTS ベース 個人・商用問わず無料でご利用いただけます。 ● りいてがき筆 ➡ ( ☑ 表示サンプル ) ● りいポップ角 ➡ ( ☑ 表示サンプル ) ※ 禁止事項 フォントファイルの無断転載・再配布・販売・改変 公序良俗に反する行為・違法行為・アダルト・出会い系・宗教関係・その他迷惑行為等でのフォントの使用 フォントを使用して作成したロゴ等の商標登録・意匠登録 上記の禁止・使用不可とさせていただいている行為を除き、誰でも、用途や、商用・非商用を問わず利用可。 商用利用される場合でも、利用方法に上記の禁止事項以外の制限なし。 事前のご連絡や許可等は不要。 webフォントとしてもご利用可能。 ● FZイモケンピ ➡ ( ☑ 表示サンプル ) ※ 禁止事
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
Lumzy
Who's using lumzy: 76,644 Designers from 215 Countries on 103,240 Projects... From creating a prototype, to sending it to clients, everything is seamless. In fact, Lumzy doesn't have a file extension, so your client need not bother downloading a player to open any prototype files. A link is all they need. Add actions and events to controls, to emulate your project. Lumzy is NOT one of those simple
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
見ておくべきHTML5サイト集:phpspot開発日誌
5 Must See HTML5 Sites 見ておくべき、かどうかは分かりませんが、HTML5の可能性について知ることができるサイト集です。 ビデオ、キャンバス、ドラッグ＆ドロップ、ストレージ等HTML５のデモ集。 サポートブラウザの対応もアイコン付でわかりやすいサイト。 CanvasでWindowsのPaintを実現した凄いサイト HTML５で書かれたサイトのギャラリーサイト。 といった感じでHTML5について学べるサイト集。暇なときに眺めるだけでも予習になりそうですね。 関連エントリ 無茶苦茶カッコいいHTML5ビデオプレイヤー「SublimeVideo」 最近公開のHTML5関連の参考サイト色々まとめ
ホームページ作成 簡単ホームページ作成サービス Jimdo
プロに任せる。ジンドゥーに精通した制作のプロが、\nあなたの代わりにホームページをお作りします。\n全てを安心してお任せください。
見ているページをTwitterに投稿するBookmarkletとブログ用ボタン | Creazy!
[2009/06/18：追記] bit.lyに対応したスクリプトも書きましたので、こちらもどうぞ。 ・【bit.ly対応版】見ているページをReTweetするブログ用ボタン [C!] いしたにさんがブログにTumblrボタン付けて、Twitterボタンもつけたいようなので持っていたBookmarkletから在庫放出しますw 自分のブログのエントリーにTumblrに１クリックで投稿するボタンつけました。 (snip) twitterボタンお待ちしてます！ via: 自分のブログのエントリーにTumblrに投稿するボタンつけた:[mi]みたいもん！ Tumblrボタンは単純にTumblr純正の bookmarklet をリンクにしているだけなので、Twitterも同じ要領でできます。 まずは、元となるBookmarkletから。 Surfing Page to Twitter ソース中身はこん
第1回 ウェブブラウザとJavaScriptの未来 | gihyo.jp
こんにちは、id:os0xこと太田昌吾です。今回から、クロスブラウザ対策を中心としたJavaScriptの初級から中級の方向けの連載を開始します。JavaScriptの基礎的な文法は理解されているという前提での解説となりますので、ご了承ください（間違いやすい、わかり難いと思われるところは適宜補足します）。初回である今回はJavaScriptやウェブブラウザの背景など盛りだくさんの内容でお届けします。 JavaScriptのイマ JavaScriptは2010年現在において、最も重要な言語となりつつあります。旧来はすべての処理をサーバーで行って、結果をウェブブラウザ上に表示するだけというのがウェブの一般的な姿でした。2005年に登場したGoogle Mapsを一つの契機として徐々にウェブブラウザ・クライアント側での処理が見直され始め、近年ではクラウドやSaas、そしてHTML5の流行によ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Border Radius