MUSUBii腹が減ってはコードが書けぬ！ウェブ制作の腹ごなしに、CSSフレームワークMUSUBii（むすびー）をどうぞ。 MUSUBiiは、日本語サイトのデザイン・コーディングを元気づけます。 必要なものを食べておくウェブ制作は小技の積み重ねなので、毎回1から作っていたら辛いですよね。MUSUBiiにはボタン・フォーム・グリッドなど利用頻度の高い汎用スタイルが詰まっています。まずはMUSUBiiをほおばってウェブ制作を始めてみましょう。
DesignDevelop
旧ホームページドメイン(designwork-s.com)を利用し、当ブログの名称を利用し、文中のリンクからオンラインカジノの紹介サイトへ誘導するWEBサイトが発見されました。当該WEBサイトは、当ブログとなんら関わりのない第三者の手によって作成されたもので、当ブログとは一切関係ございません。 旧ドメインについては、現在、管理・運用を行っておらず、当ブログの運営元とは無関係の第三者が取得・管理しており、無関係となります。 そのため、旧ドメインへアクセスすることにより、何らかの被害等が生じても、一切責任を負いません。 現在のDesignWorksホームページドメインはdesignwork-s.netとなります。 ご注意のほど、どうぞよろしくお願い致します。
背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
『【カスタマイズ】動画をヘッダーの背景に設定する方法』
※2016年11月21日 更新 コードや本文を一部変更済み。以前のものだと動画上下に黒い背景が表示されてしまうため、新たにjQueryを使用したコードに変更しました。 詳細については、新たにご紹介した記事をご用意しましたので、ご参照ください。 YouTube動画をヘッダーの背景に設定する方法 ------- 先日Youtube動画をヘッダーの背景として利用したサンプルページを作成してみました。 その紹介記事を書いてみたところ、ちょこちょこ反響をいただきましたので、今回この記事にてYoutube動画をヘッダーの背景に設定する方法についてご紹介していきます。 動画をお持ちの方は、ぜひチャレンジしてみてください。 Youtube動画をヘッダーの背景に設定する方法 完成イメージは、以下のサンプルページのヘッダーです。 >> 動画ヘッダーサンプル ※2016/11/21更新 新たな動画ヘッダーを作成
IE確認の必需品「IETester」がIE8 RC1に対応してバージョンアップ
複数のバージョンのIEを同時に確認できる「IETester」が、IE8 RC1に対応し、機能を強化してv0.3にバージョンアップしました。 IETester IETesterの動作環境はWindows Vista or XP +IE7となっています。 確認できるIEのバージョンは、IE5.5, 6, 7, 8 RC1です。 新機能としては、ウインドウ下部のズームバーから、表示のズームをコントロールできます。 また、ツールバーの「All IE versions」をクリックすると、IEの全てのバージョンでの確認が簡単にできるようになりました。
29分でできる！ あのサイトの“技”を盗め
「プロが作ったWebサイトのあの“技”をウチのサイトでも（それもタダで）マネしたい！」――。そんな欲求に応えてくれる JavaScriptライブラリ／フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
携帯で画像振り分けで行なってきたこと - maru.cc@はてな
昨日、社内勉強会を開き、うちの会社でこれまで行なってきた、携帯への画像関連のことを話しました。 社内blogにも書いていたので、かける範囲でこちらにも転載してみます。 携帯向けのサイトでの画像 携帯向けのサイトで画像を使いたい場合、いくつかの超えるべき障害があります。 画像の種別（jpeg/png/gif） 端末ごとの対応画像 画像のサイズ（大きさ） 画面サイズ 画像の容量（ファイルサイズ） キャッシュサイズ 画像の種別 画像の種別は、キャリアによって対応状況が違います。 DoCoMo 古い端末 → gifのみ 最新機種 → jpeg/gif （pngは未対応） au 古い端末 → pngのみ 最新機種 → jpeg/png/gif SoftBank 古い端末 → pngのみ 最新機種 → jpeg/png/gif DoCoMoは、古い端末では、gifしか対応していません。 新しい端末でも
エスカフラーチェLLC
去る土曜日、パネラーとして参加させていただいたエンジニアの未来サミットが終わりました。 ご来場・ご観覧いただいた方々、ありがとうございました。また、関係者の皆様お疲れ様でした。 第一部の待機時間は、出演の準備と休憩と持ち込みのお仕事につぶしてしまって、 まわりの動きをなにもみることができませんでしたので、第二部に出演させていただいた際の反省・まとめ・感想を書かせていただきます。 ■パネラーとして 話すべきことをうまく伝えられなかったとか、ああこれをはなしておくべきだったということはたくさんありましたが、話す練習をしていかないと会場に対して失礼だったかなと反省しています。 とくに冒頭は緊張もして、自分でも話していることがわからなくなってしまったり（要点のメモがありながら）。練習とあわせて、もっと経験を重ねなければと痛感しています。 仕事についての姿勢について、ほかの人の考え方をうか
ROIを意識したサイト管理――書評『Web Design for ROI』第3章 | Moz - SEOとインバウンドマーケティングの実践情報
私は以前、「通りすがりを購買者に、潜在顧客を顧客にする方法――書評『Web Design for ROI』第1章＆第2章」という記事で、ランス・ラブデイ氏とサンドラ・ニーハウス氏の共著による『ROIを念頭に置いたウェブデザイン：通りすがりの客を購買者に、そして潜在顧客を顧客化する方法』（この本の詳細はwww.wd4roi.comをチェックしてね）を読み始めたって書いたけど、今日は第3章の「ROIを意識したサイト管理」から、ポイント部分を紹介するわね。 第3章「ROIを意識したサイト管理」には、最大限のROIを得るためのウェブサイト管理方法について、考慮しなければいけないことや著者たちからの提案が列挙されている。 (1) なすべきことを知るあなたはウェブサイトで何を達成したいのか？あなたはウェブサイトのデザインやユーザビリティにどれくらい満足しているか？以下の質問に自分で答えてみて。 「組織
MarkupDancing ウェブ業界はどこを向いているのか・その2
World & Sociery ゲリラ・オープン・アクセス宣言 last modified on 2024-01-12 アーロン・スワーツの「ゲリラ・オープン・アクセス宣言」の日本語訳と解説です。 冒頭に戻る World & Sociery On “Google’s Ideological Echo Chamber” last modified on 2021-04-03 Google の元技術者であるジェイムズ・ダモーアが回覧用に社内で発表した “Google’s Ideological Echo Chamber” という文書を発端にして展開している論点をとりあげています。 「街場」なんて存在するのか last modified on 2015-10-27 以下の文章は、何度か途中まで書いて「くだらない」と思いながらも、再び書き直してきたものである。どうして書き直すたびに「くだらない」と
二度押し防止の onsubmit で disable にするやつ :: Drk7jp
もう２年ほど前に話題になったアレなんですけど、今更ながらあるサービスでこの仕組みの導入を検討しています。 onsubmit で submit ボタンを disable にしてユーザビリティを良くする - naoyaのはてなダイアリー submit ボタン disable 技の罠 - naoyaのはてなダイアリー onsubmit で submit ボタンを < disable にしてユーザビリティを悪くするのはやめてください - のヮの うんこ♥ onsubmit で disable にするやつ - 鷹の島 onsubmit の disable 化ですが既に議論が終わっているように、onsubmit disable の実装方法として、 onsubmit イベント発生時に submit 要素を disable にして値をサーバへ渡すための hidden 要素を生成する方法 setTimeou
ブログが続かないわけ | 初心者プログラマーが簡単なフォームを作るときにやりがちな6つのミス
お問い合わせフォーム、登録フォーム、キャンペーンの申込フォーム。 Webにはいろいろなフォームがある。 Webプログラマーであれば誰もが一度は作ったことがあると思う。 新人プログラマーの初めての実務がフォームであることも多いだろう。 新人が作っているというのにもかかわらず、技術的にも面白い部分がないせいか、正しい知識のある人がレビューすることが少ないと思われる。 単純さゆえにテストが不足しているということもあるかもしれない。 上記の理由は憶測にすぎないが、杜撰なフォームがたくさん出回っているのは事実だ。 もう、CAPTCHAの話とか以前の問題だ。 よく見かける悪い例を簡単にあげておく。新人が初めての実務に当たるときにこれを気にしてくれれば、世の中のフォームがだいぶ良くなると思う。 1. クライアントサイド(JavaScript)でのチェックのみ。 2. 選択肢式の入力欄に対するチェックの漏
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
吹き出し素材専門サイト「フキダシデザイン」
まるで魔法のようだ。２Dの図形を輝く３D画像にしてくれるPhotoshopアクション:phpspot開発日誌
Free "Aurelius" Website Template
はてなブログ | 無料ブログを作成しよう
WEB制作会社-株式会社CUPPY （クーピー）
CSS Spriteを活用しよう - DesignWalker