kakipy.com
kakipy.com 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
Excelのテーブルを修飾ごとHTMLへ。数式も保持して表計算も可能なHTML/JavaScriptを生成する「Excel to HTML」。アドバンスソフトウェア
Excelのテーブルを修飾ごとHTMLへ。数式も保持して表計算も可能なHTML/JavaScriptを生成する「Excel to HTML」。アドバンスソフトウェア Webアプリケーションにおいて、ユーザーの入力に対して簡単な計算や変換をした結果をWebページ上に表示したい、というニーズはよくあることでしょう。例えば業務用のWebアプリケーションなら、いくつかの金額を入力すると合計を表示するといった動作は非常に一般的です。 アドバンスソフトウェアが発表した「Excel to HTML」は、こうしたWebページをExcelから簡単に生成できるWindowsアプリケーションです。計算式を含むExcelのテーブルをHTMLとJavaScriptに変換、Webページに簡単に埋め込むことができます。入力するセル間の移動はExcelと同様にタブキーで行えます。 Excelテーブルで設定された表示形式や
これはウェブページです｡
たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､タブレット端末やデスクトップ端末で読んでいるかもしれません｡ 私とあなたがこうして繋がることができたのは､私が書いた言葉をあなたが読んでいるからです｡ウェブとはそういうものです｡場所や端末､タイムゾーンが違っても､このシ
HTMLでマンガを作成できる「Comix I/O」、棒人間エディタ付きで誰でも挑戦可能 【増田 @maskin】 | TechWave（テックウェーブ）
全力で「アプリ博」をヨイショしている、ちょっと寒いマンガ、、、、内容はともかく、最近流行している「棒人間」を主役にしたこのマンガはHTMLでできているのである (ソースを参照→http://metamix.com/techwave/comix.html)。 使用したのは「Comix I/O」。オンラインで、棒人間のポーズを決め、あとはHTMLソースに吹き出しなどを入力すれば完成。 出力は画像ではなく、あくまでHTMLで表現できているのがポイント。 棒人間マンガ量産体制スタート? 「Comix I/O」にはオンラインエディターが提供されており、画面上部のグラフィック部が棒人間のポーズや吹き出しの位置を調整するエディタになっている。まずは、ここで図柄を作成すると、下部にHTMLコードが生成される仕組み。 吹き出しの文字列などは、HTMLコードを直接編集する。 棒人間や吹き出しには、ベクターグラ
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
知らない人は遅れてる？新Zen-Coding Emmet
頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。 早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加 Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
『■ホームページのCSSファイルの文字コードもUTF-8が良い。SEO対策云々では無く、Web戦略』
前回、HTMLファイルとCSSファイルという言葉を使ったので簡単に説明しておく。 メモ帳でページを保存する時に、ファイル名の最後を.htmlにしたものがHTMLファイル。 メモ帳でページを保存する時に、ファイル名の最後を.cssにしたもがCSSファイル。 具体的には、seo-tonchann.htmlならHTMLファイル。 seo-stylesheet.cssならCSSファイル。 メモ帳に何も記述してなくとも、.htmlで保存するれば立派なHTMLファイルである。 .htmlや.cssの前は何でも良い。 但し、この部分は英数字を使ったほうが良い。 HTMLファイルの場合、ここがURLの一部になるので。 .cssのファイルを作成する時には、必ず頭に以下の一文を入れる必要がある。 @charset "UTF-8" ; 文字コードを指定するのだが、CSSファイルにおいてもHTMLファイル同様、U
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
スマートフォンコーディング : ノウハウコラム ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。 そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。 そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptを紹介します。 サンプル サンプル ※iPhoneで見てみてください。 ダウンロード tilt.zip 使い方 ダウンロードしたtilt.jsをjquery.jsと一緒に読み込むだけで動作します。 用途 縦横でボックスの幅を切り替える 縦横で背景色を切り替える 縦（または横）の場合だけ表示する文章や画像を設置する 縦に最適化されたサイズのまま、横の場合はそれを中央寄せにして表示する 等々... 仕組み 仕組みはとても単純でwindow.orientatio
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - livedoor ディレクター Blog(ブログ)
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
モバイルサイトのXHTMLコーディング｜Webマーケティングのネタ帳｜Web制作・Webデザイン制作会社ウェブラボ-東京都新宿区
モバイルサイトは携帯電話のキャリアや機種によって動作やレイアウトが 異なる場合があります。これはそれぞれのキャリアや機種によって規格の違いがあるためです。 最近ではこの規格を統一しようという動きもありますが、いつになるか分かりませんし 古い機種の携帯電話を長く使われる方もいますので、しばらくはそれぞれのキャリアや機種での 使用の違いを意識する必要があります。 以前は3キャリア共通で動作やレイアウトに違いのないようなコーディング方法となると 制約が多く、デザインの自由度が低いのが悩みの種でした。 日進月歩のこの業界、3キャリア共通で使用できるコーディング方法が以前に比べ だいぶ変わって来ましたので、モバイルサイトのXHTMLでのコーディング方法を ご紹介します。 「livedoorディレクターブログ」で『ケータイ livedoor』のアクセスシェアが公開されているのを発見
今から始めるiPhoneコーディング｜クロノドライブ
何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。 それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。 iPhoneの特徴 まずは、iPhoneの特徴を見てみましょう。 一つの端末で複数の解像度を持つ iPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。 例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。 ※縦持ちのとき ※横持ちのとき そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。 ※そのためには、デザインをしっかりと考えたものにしなければいけませんが…。 HTMLやCSSの実装状況はパソコンと同様 iPhone
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
IDEA * IDEA
