タグ

WEB制作に関するrider-2のブックマーク (11)

  • ムームードメイン | 欲しいドメインがすぐ見つかる。

    メールアドレス作成 独自ドメインのメールアドレスを作成できます。作成したメールアドレスはWebメールをはじめ、様々なメールソフトやモバイル端末で利用できます。

    ムームードメイン | 欲しいドメインがすぐ見つかる。
  • レスポンシブWEBデザインのデザイン・設計上の注意点 | Web制作 | | SRE BLOG | SRE BLOG

    レスポンシブWEBデザインはその特徴から、レイアウトの自由度が低いと言われています。どのようなデザインにするのかは悩ましい問題とも言えるでしょう。 そこで今回は前回のレスポンシブWEBデザインの基に続き、実際の事例とともにデザインや設計における注意点を紹介していきます。 1、各デバイスのサイズを把握しましょう! レスポンシブWEBデザインの最大の特徴はなんと言っても、色々な端末から見れるということ。設計する前に端末のサイズを把握していなければ、始まりません。 参考までに主要なディスプレイサイズを図にしてみました。 ユーザーがいつどんな環境でサイトを見るのか、考えてみることが大切ですね。 2、よく使うブレークポイントはこれだ! どの画面サイズでも見やすいサイトになるよう適切なブレークポイントを設定しましょう。 ちなみにSRE BLOGでは1160,1080,1024,985,960,940

  • デザインも豊富、カスタマイズも可、ローディング用のGIFアニメーションをさくっと作成できる -Loader Generator

    簡単に、ローディング用のGIFアニメーション画像を作成できるオンラインサービスを紹介します。 用意されているデザインは7種類、サイズやカラー、アニメーションのスピードなどカスタマイズも簡単にできます。 上段:Line(カラーはピッカーから選択可能) 中段:Circle, Arrow, Snake 下段:Pulsate, Wifi, Rectangle ローディング用の画像を作成するのは簡単です。 サイトにアクセスします。

  • フリー素材、無料画像の検索サイトNo.1【タダピク】

    NEW 2022.04.05無料サイト「Blank Phostock」を追加しました。 2021.08.27無料サイト「写真素材のおすそわけ」と「キュンカッツ」を追加しました。 2019.02.25無料サイト「fotoma」を追加しました。 2018.05.23無料サイト「フリー素材ドットコム」の情報を更新しました。 2018.02.21無料サイト「unDraw」、「motionelements」の2サイトを追加しました。 2017.09.08フリーイラスト素材サイト「ありさちゃんがいく!!」を追加しました。 2017.08.01無料サイト「イラスタ」、「じぃばぁ」の2サイトを追加しました。 2017.04.18無料サイト「ダ鳥獣ギ画」、有料サイト「ForYourImages」の2サイトを追加しました。 2017.03.29無料サイト「イラストお助け部」、「スキマナース」、有料サイト「Sn

  • イベント告知に使える1枚ページを簡単に作成できるサイト「Tackk」 | ライフハッカー・ジャパン

    「Tackk」は1枚ページを簡単に作成できるサイトです。イベントの告知などに利用できそうです。イベントの概要、場所、連絡先などを記載できます。Facebookのソーシャルプラグインを活用したコメント機能もあるので便利です。 以下に使ってみた様子を載せておきます。まずTackkへアクセスしましょう。登録なしで利用できます。 ページのデザインや項目の編集ができます。画像を追加することも可能。地図を埋め込んだりコメント機能をいれたり、オプションも充実しています。デザインも詳しい知識がなくても簡単に編集できますよ。 できあがったページです。シンプルな構成で1枚ページが完成しますよ。イベントの告知などにぜひご活用下さい。 Tackk (カメきち)

    イベント告知に使える1枚ページを簡単に作成できるサイト「Tackk」 | ライフハッカー・ジャパン
  • [JS]アナタのソーシャルコンテンツをまとめてPinterest風レイアウトで表示するスクリプト -Socialist

    ブログのRSSをはじめ、Facebook, Twitter, Tumbler, Google+, Pinterest, Flickr, YouTubeなどのコンテンツを全てPinterest風のグリッドレイアウトで表示するjQueryのプラグインを紹介します。 幅800pxで表示 Socialistの使い方 Step 1: 外部ファイル head内に当スタイルシートと「jquery.js」と当スクリプトを記述します。 ※ダウンロードできるデモファイルにはjQueryの記述が無いのでご注意を。 <link href="../jquery.socialist.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <scri

  • パララックス効果を作るスクリプトやプラグインのまとめ:phpspot開発日誌

    Parallax Scrolling Scripts and Plugins | Impressive Webs パララックス効果を作るスクリプトやプラグインのまとめ。 最近では国内でもちらほら見かけるようになったパララックスなデザイン。 一言にパララックスといっても色々な実装があり、どれも斬新なものになっていて、見ておくだけでも参考になるであろう物が満載 こういう今では真新しいような技術も数年後には新しいテクニックが出てきていて、陳腐化したり応用されて汎用的なものになったりと今後も技術の進歩が楽しみですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル&サンプルDL

  • パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル&サンプルDL:phpspot開発日誌

    Parallax Slider with jQuery パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル&サンプルDL スライダーの背景がパララックスを利用していて画像が切り替わる際に奥行きが表現されるというものです。 サンプルのUIも超カッコいいのですが、画像が切り替わった時の奥行き感が素晴らしい。 ちょっと古い記事なんですが、知らなかったのでご紹介です デモはこちら パララックス効果を導入してみたいという方にはいいチュートリアルにもなります 関連エントリ 並べた画像を敷き詰めて超カッコよくするjQueryサンプル 円形で回転するタイマーを実装できるjQueryサンプル 良い感じで動作するニュースティッカー実装jQueryサンプル

  • PNG画像のファイルサイズが1/3に!PNG画像を超軽量化する「ImageAlpha」|男子ハック

    仕組みをよく理解できていないのですが、ImageAplphaは色数を減らしてファイルサイズを軽量化してくれるアプリのようです。 詳しい人がちゃんと解説してくれると嬉しいです。無知でごめんなさい。 さらには透過PNGの透過も維持したままにできるそうなので、これは是非試さないと損。 参考:透過を保ちつつpngを高圧縮するMacの無料アプリImageAlpha。素でIE6対応 以下のキャプチャ画像をサンプルに試してみました 上の画像をサンプルにファイルサイズの軽量化をImageAlphaで試してみました。 最初の状態でファイルサイズは579KBです。 PNGファイルをアプリケーションにドラッグ&ドロップします。 画面下部にImage sizeとしてどのくらい軽量になったかが表示されます。 保存しようとすると以下のような画面が開きます。 注目すべきは「ImageOptim」にそのまま送ることもでき

    PNG画像のファイルサイズが1/3に!PNG画像を超軽量化する「ImageAlpha」|男子ハック
  • 【リンク集】無償写真・テンプレ集を山ほど集めたった (1/2)

    「急に言われましても」に対応する フリー素材サイトいっぱいお盆だよスペシャル 気の早い話だが、もうすぐお正月だ。 夏コミあとの冬コミがすぐにやってくるように、夏から年末は一瞬。そして新年。新年といえば、年賀状だ。来年であれば巳年だから蛇のイラストの需要が高まるわけだが……そんなとき、知っておくと助かるのがフリー素材サイトだ。 個人利用であれば無料のものが多く、かつデザインがステキ。またビジネス用のテンプレートも豊富に存在しているので、普段からチェックしてけおけば、「急に言われましても」なイベントにも即対応できる。 ということで、お盆スペシャルとして編集部オススメの素材サイトを一挙に紹介していく。個別にブックマークするよりも、このページをブックマークしておくといいゾ。

    【リンク集】無償写真・テンプレ集を山ほど集めたった (1/2)
  • 目的を達成させるための最適なWebサイトのタイプ(種類)

    先日[ホームページ成功への道はすべてここから始まる。目的・目標の明確化]を書かせて頂いたんですが、「目的が決まっても、目的を達成させるためにどんなWEBサイトを作ったらいいのかわからない」と読者の方から連絡をいただきましたので、今回は【目的を達成させるための最適なWebサイトのタイプ(種類)】を紹介したいと思います! WEBサイトには多種多様な目的があり、その目的を叶えるためにさまざまなタイプのWEBサイトが存在します。今回はこれらをわかりやすく見比べられるように表にしてみました。新しくWEBサイトを作るときなどに参考にしてみてください。 WEBサイトの目的とタイプは生まれ続ける。 インターネット上には、さまざまなタイプのWEBサイトがあります。商品を直接販売するための「ECサイト」、会社情報を伝えるための「コーポレートサイト」、商品やサービスを認知してもらうための「プロモーションサイト」

    目的を達成させるための最適なWebサイトのタイプ(種類)
  • 1