ピクセル、ライン、グリッドをはじめ、ざらっとした感じやフローラル、アブストラクト、日本の伝統文様や小紋などのパターン素材がダウンロードできるサイトを紹介します。 ごく一部のもの以外は、全て個人でも商用でも無料で利用できます。
ピクセル、ライン、グリッドをはじめ、ざらっとした感じやフローラル、アブストラクト、日本の伝統文様や小紋などのパターン素材がダウンロードできるサイトを紹介します。 ごく一部のもの以外は、全て個人でも商用でも無料で利用できます。
デスクトップ・タブレット・スマートフォンなど、レスポンシブ対応で柔軟性に富んだ可変グリッドのレイアウトをつくるのに便利なフレームワークを紹介します。 各エレメントのツラや高さの異なるパネルも簡単に揃えることができます。 Extra Strength Responsive Grids Extra Strength Responsive Grids -GitHub Extra Strength Responsive Gridsの特徴 Extra Strength Responsive Gridsのデモ Extra Strength Responsive Gridsの特徴 %ベースの可変グリッド デスクトップ・タブレット・スマフォなどのレスポンシブ対応 各エレメントのツラ揃えも簡単 グリッドのネストにも対応 使いやすいclass名 Sass対応 不揃いの高さも揃えます Extra Strengt
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト! 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない><」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか? HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる ホームページの作成を依頼するとき役立つチェックリストはいかがですか? 現在、無料で配布しているチェックリストへ目を通せば、以下の2点がわかるでしょう。 web制作会社へ依頼する前に準備しておくべきこと 効果的なホームページを作成するためのポイント 「ホームページの作成をweb制作会社へ依頼したい。 でも、何をどこから始めればいいの?」 そんな悩みを抱えるあなた。 以下のチェックリストをひとつずつチェックしていってみてください。 ホームページを依頼する前の準備が整うはずです。
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
軽量且つ、クロスブラウザにも対応したレスポンシブWebデザイン対応のCSSフレームワーク・Responsive Boilerplateのご紹介。パッと見た限りですが、かなり使いやすそうです。軽量なのも◎。 軽量なレスポンシブWebデザイン用のボイラープレート(文例集)です。圧縮版で2KBほど。また、IE7等でも表示が崩れません。 いわゆるCSSフレームワークですね。軽量でシンプル。IEにも対応と、欲しい特徴だけ絞られた感じでよかったです。 IE TabのIE7のスクショです。 また、Sublime textのパッケージも用意されていますのでSublime textユーザーの方で興味がありましたらお試しになってみては如何でしょう。ライセンスはMITです。 Responsive Boilerplate
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
作成:2013/01/28 更新:2014/11/01 Tool > Webサービス フリーソフト、無料ツールなのにここまで使える 前回、無料素材をご紹介しました。 今回は無料で使える「ツール」をまとめます。フォント、画像、配色、htmlからエディター・アフィリエイトリンク作成補助まで。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 1.フォント 2.画像編集 3.ロゴ作成 / ネタ 4.配色 5.HTML5 6.CSS 7.ブラウザチェック 8.エディター 9.アフィリエイトリンク作成 10.フォーム作成 1.フォント PCにインストールされているフォント一覧をプレビュー Font picker イラスト等に使われているフォントを調べる WhatTheFont Windows上のテキストをくっきり、見やすく表示。 gdipp - k本的に無料ソフト・フリー
アップルウェブサイト「Apple.com」の15年の歴史をスライド(全141枚)でどうぞ2013.01.27 19:007,552 そうこ ここにアップルの歴史あり ウェブサイトのトップページには歴史があります。世に送り出されてきた多くの製品のデビュー時の姿があります。それは、企業の歴史そのもの。多くの本のマーケティングを務めるCharlie Hoehn氏が、今までのApple.comページをスライドショーにまとめています。その数なんと141スライド! ちなみに、過去ページ観覧に使ったツールはこれ、Internet Archive Wayback Machine。 15年もの間、アップルのサイトは大きな変化なくクリーン&シンプルを保ったデザイン。メインの製品を大きくみせる、そこに過剰な説明文やコピーは不要。大きな変化と言えば、2000年にメニューバーを上部に移動させたことと、2007年Le
様々なスタイルでツールチップを実装する為のJavaScriptフレームワーク・opentipのご紹介です。噴出しの形状や表示場所、Ajax対応など、状況に応じて実装する事が出来ます。 ツールチップ実装用のJSライブラリです。様々なスタイルで実装可能です。 ツールチップのJSフレームワークです。OSSとして公開されています。 複数のツールチップを一括で出すことも可能です。 <div data-ot="Shown after 2 seconds" data-ot-delay="2"></div>カスタムデータ属性でセッティングできるみたい。 new Opentip("#foobar", "Shown after 2 seconds", { delay: 2 });上記のようにAPIを使用する方法でもOKとの事。 ライセンスはMITです。詳細は以下よりどうぞ。 opentip
林浩一氏の「ITアーキテクトの視点」が今週、最終回を迎えた。同連載は、ITアーキテクトとして企業へのIT導入に取り組んできた林氏の経験を基に、「これからのIT業界はどうなるのか、その中で(ITエンジニアは)キャリアをどのように積んでいけばいいのか」をロジカルシンキング、プロジェクトの進捗遅れなど、ITエンジニアにとって関心の高い話題にからめて取り上げてきた。 林氏は、これからのIT業界について「大手SI業者にお任せでシステム開発を進める」という従来の開発スタイルが限界に近づいていると見る。例えば「RFPによるコンペで失われた信頼関係」では、 提案依頼書(RFP)によって開発費用の相場は下がったが、その弊害として発注者と受注者との信頼関係が損なわれ、結果としてアジャイル開発の普及を阻害したとして、「その歴史的役割は終わったのではないだろうか」と主張する。「『次工程はお客様』を業界の合言葉に」
twitter→ɹəʇʇɪʍʇのように英数字を180度回転する際に役立つ情報を掲載。この他、TeXで文字を回転して表示する方法についても。 どうやって180度回転するか “twitter”を“ɹəʇʇɪʍʇ”に、“7-11”を“⇂⇂-L”にするように、英数字を180度回転させて面白おかしく見せるという遊びがある。これは、英数字をひっくり返した形とよく似た文字を使っている。例えば、“M”を実際にひっくり返すかわりに、これをひっくり返した形によく似ている“W”を用いるのである。 自分でひっくり返した形を見つけるのは面倒だろう。だが、簡単に180度回転ができるウェブサービスが提供されており、これを使えばすぐにひっくり返してみせることができる。また、この記事に、英数字をひっくり返した形とよく似た文字の一覧を付けたので参考にしていただければ幸いである。 なお、ひっくり返した形とよく似た文字を使うのは
Dropzone.js ドラッグ&ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」。 ファイルをブラウザ内にD&Dすると画像ならサムネイルがすぐに表示されつつ、プログレスバーが表示されて進捗が分かり、更に完了した際にはチェックマークでアップロード完了が分かります なかなかカッコいいだけでなく、便利なアップロードが可能。 ブラウザ非対応時のフェイルバックも 関連エントリ クロスブラウザでファイルのドラッグ&ドロップ、Ajaxアップロードを可能にする「FileDrop」 DropBoxからファイルアップロードをする&切り取って保存するデモ jQueryとHTML5でドラッグ&ドロップアップロードを実現するチュートリアル ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」
第1回のアジェンダ編では、高速化に関わる要因と解決策の全体像を紹介しました。 アジェンダ編にもかかわらず多くのブックマーク、シェアをいただきありがとうございます! 余談ですが、記事にブックマーク、シェアをしていただくと、このブログでは執筆者に経験値がたまるような仕組みになっています。 たくさん経験値を貯めると四半期ごとに良いことがあるかもしれないので、気が向いたらこの他の執筆者の記事もシェアしていただけるとうれしいです。 言葉にせずとも、わかっていただけると思いますが、この記事も・・・ね? 右上にあるボタンをちょちょっと。 本題 余談はさておき、本題に入りましょう。 今回は「無駄なリクエストとレスポンスの削減」に視点を置き、解決策について調査、計測して紹介してみたいと思います。 と思ったのですが、長くなりすぎたため、まずは「検証ツールとHTTPについて」紹介することにしました。 この記事の
スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く