プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介 | 独学Webデザイナーの覚書
最新の記事 レスポンシブWebデザインでリニューアルいたしました 2016年12月27日その他 「独学Webデザイナーの覚書」をリニューアルいたしました。ありがたいことにかなりの間更新が滞っているサイトではありますが、毎日多くのユーザーに閲覧していただきたき大変感謝しております。 今回のリニューアルについて本記事にまとめさせていただきました。 続きを読む 設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」 2014年11月15日CSS フロントエンド開発の際に今となっては不可欠である、ビルドツール「gulp.js」の導入手順についてご紹介いたします。 続きを読む 超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 2013年7月31日jQuery 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 続きを読む 超便利
ホームページビルダーを無料でお探しなら＞ホームページ作成ツール19個
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる 【発表】最新のHP作成方法はこちらへ ホームページビルダーを無料でお探しのあなた。 ホームページビルダーといえば、これ↓ 「ジャストシステムのホームページビルダー」なら、こちらですぐにダウンロードできます。 しかし、焦らずちょっと待ってください。 web制作歴14年目の僕は、ジャストシステムのホームページビルダーをおすすめしません。 なぜなら、このJustSystemホームページビルダーには以下のようなデメリットがあるからです。 ダウンロードしてからインストールするのが面倒 レンタルサーバーも必要。そ
ヒップソフトハブ
こんにちは、ロピタです。 あなたはホームページ作成ソフトを探しに来たんですね。ありがとうございます！ホームページがあるとすごくいいことがありますよ。 自分や商品を販売できる。 たくさんの人に知ってもらうきっかけになる。 情報を発信するから情報が集まるようになる。 ホームページを作るための情報をたくさん集めました。お役に立てれば嬉しいです。 ホームページ作成ソフトの選び方 要件に合ったものを選ぶには・・・？ まず初めに考えて欲しいことはあなたが作りたいホームページに必要な機能です。例えば飲食店を経営されている場合を例に考えてみましょう。「頻繁に変わるメニューの更新がやりやすい」「店舗への予約機能が必要」「スムーズな申し込みフォーム」「クーポン発行」「場合によってはショッピングカート機能」などの機能が必要になると思います。 さらに、自分の能力と使える時間も考慮する必要があります。 ホームページ
簡易的なワイヤーフレームを手軽に作成、URLも発行してくれるWebサービス・Wireframe.cc
ワイヤーフレームを手軽に作れる、 というWebサービス。ユーザー登録 も不要です。URLが発行されるので 教えるのも丁度いいかも。ただ、 凄く高機能、というものではない のでイメージを伝える、みたいな 用途になりそうです。 個人的には軽量でユーザー登録不要、直感で作成出来る点、URLが発行される、という点が気に入りました。 こんな感じ。ドラッグで範囲を決めてエレメントを選定するだけ。メモも残せます。 背面、前面設定なども出来ます。 機能はシンプルながら、最低限欲しい物は揃っていて、操作性も良い感じです。URLさえ分かれば誰でも編集できてしまうので、場所の離れた方とのレイアウトの打ち合わせ等、簡易的な用途として使うのもいいかもしれないです。 Wireframe.cc
自身のポートフォリオ用Webサイトを手軽に作成出来るWebサービス・Dunked
ポートフォリオを作成出来る、というWebサービス・Dunkedのご紹介です。レスポンシブWebデザインにも対応していますので、出先からスマフォやタブレット等で自分の作品を相手に見せることも出来ますね。 ポートフォリオ用のWebサイトを作れるサービス。この手のは他にもありますがシンプルで見やすかったので備忘録的に。 ポートフォリオ作成サービス。無料で利用できて、スマフォやタブレットでもレイアウトを崩すことなく表示可能です。また、Retinaディスプレイにも最適化されるそうです。 アップロードやスタイルの変更も簡単に出来そうです。 手軽で必要最低限の機能も備わってる印象でした。結構いいかもしれない。 Dunked
[to-R]JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信
Tailwind CSSで任意のメディアクエリを指定する Tailwind CSSでは簡単にメディアクエリの指定が可能です。 2023年11月 2日 00:40 カテゴリー CSS Tailwind CSSでdisabled Tailwind CSSでdisabled属性がついた要素に対してスタイルを当てたい場合には、disabled擬似クラスを利用して指定を行います。 2023年10月19日 15:32 カテゴリー CSS Vue.jsでコンポーネントの要素をpropsによって切り替える Vue.jsでボタンコンポーネントなどを作成する場合、ユースケースに応じてHTMLの実体をa要素とbutton要素と切り替えたいケースというのが発生します。 2023年9月15日 11:18 カテゴリー JavaScript Nuxt3でESLintの設定をする 案件でNuxt3のESLint設定をする
15NOTE
2012年8月27日にMdNから出版された『すべての人に知っておいてほしい スマートフォンサイトデザインの基本原則』を執筆させていただきました。11名の執筆陣による共著で、私は「Chapter 1 スマートフォンサイト制作の基礎知識」の冒頭16ページを担当しました。 ≫ 続きを読む 手軽にモバイルWebサイトのユーザーテストを行うことのできる iOSアプリ「UX Recorder」がなかなか便利 2012年07月26日 ツール・リソース 2012年7月23日に Foraker Labs よりリリースされた「UX Recorder」を使ってみました。ユーザーのアクション（スワイプ、タップ、スクロール）と同時に表情を記録できるとあって、なかなか便利なアプリだったので共有したいと思います。「UX Recorder」で録画した動画を晒したりもしてみます。 ≫ 続きを読む UX & Business
ウェブ業界で求められるスキルセット | six1ブログ
先日、独立した元部下と飲んだのですが、その時の話。 その部下が「企画、コンセプト立案から、デザイン、集客」まで行なって立ち上げた事業が軌道に乗りつつあるという話を聞いたのだけど、フト 「いろいろできるんですけど、自分のスキルって専門性が低いんです。システムエンジニアとして専門って言えば、そうじゃないし。。。」 という弱音をはいてました。 その時に「そんなこと無いんじゃない？」とは思ったんだけど、その理由をチョイチョイと。 —- 例えば、少し昔の記事で、Zyngaの求める人物に関する記事があったのだけど、その中でZyngaはデザイナーとプログラマーの両方が、FlashとPHPのスキルを保有しているという話。 一般的にPC向けのソーシャルゲームでは、クライアントはFlash、サーバは、Zyngaの場合はPHPと、異なるスキルが必要になります。もしデベロッパーがいずれか一方の知識しかない場合は、
情報処理推進機構：情報セキュリティ：脆弱性対策：安全なウェブサイトの作り方
「安全なウェブサイトの作り方」は、IPAが届出(*1)を受けた脆弱性関連情報を基に、届出件数の多かった脆弱性や攻撃による影響度が大きい脆弱性を取り上げ、ウェブサイト開発者や運営者が適切なセキュリティを考慮したウェブサイトを作成するための資料です。 「安全なウェブサイトの作り方」改訂第7版の内容 第1章では、「ウェブアプリケーションのセキュリティ実装」として、SQLインジェクション 、OSコマンド・インジェクション やクロスサイト・スクリプティング 等11種類の脆弱性を取り上げ、それぞれの脆弱性で発生しうる脅威や特に注意が必要なウェブサイトの特徴等を解説し、脆弱性の原因そのものをなくす根本的な解決策、攻撃による影響の低減を期待できる対策を示しています。 第2章では、「ウェブサイトの安全性向上のための取り組み」として、ウェブサーバの運用に関する対策やウェブサイトにおけるパスワードの取扱いに関す
チャットワーク（ChatWork） | ビジネスが加速するクラウド会議室
まずは無料で始められる ビジネスチャットを気軽にはじめていただくために、Chatworkでは無料のプランをご用意しています。実際に業務で利用できる環境を無料でお試しいただけます。
リーディングカンパニーのWeb戦略に迫る 第1回 トヨタ自動車株式会社 - MdN Design Interactive
リーディングカンパニーのWEB戦略に迫る 第1回 トヨタ自動車株式会社 トヨタ自動車株式会社 e-TOYOTA部長 友山茂樹氏 1981年トヨタ自動車（株）入社。生産技術部、FAシステム部、生産調査部、国内企画部を経て、2000年GAZOO事業部部長、Eコマース/車情報サイト『GAZOO』を立ち上げる。2002年e-TOYOTA部部長、トヨタのインターネット戦略を統括しつつ、第二世代テレマティクス『G-BOOK』を立ち上げる。2003年トヨタモーターアジアパシフィック（シンガポール）に出向し、アジアにおけるCRM戦略、e-CRBを確立。2004年帰任しトヨタ自動車e-TOYOTA部長に復帰。現在はGAZOO、G-BOOK事業を運営するデジタルメディアサービス（株）の代表取締役社長も兼任。 トヨタ自動車が取り組む 新しいWEBコミュニケーションの形とは 昨年度売上高9兆2,183億円を計上す
紙媒体とWebの違いを理解する
前回まで2回にわたって、Webアクセシビリティの基本ともいわれるalt属性について述べてきた。alt属性によって代替情報が指定できることは、Webならではの特徴である。 では、何故alt属性は基本とされるのだろうか？ 紙媒体の場合、画像などの情報を視覚以外の方法で得ることは難しい。しかし、Webでは代替情報が用意できるおかげで視覚以外の方法でも情報にアクセスすることが可能になる。ということは代替情報がなければその情報にアクセスできない環境がある、ということだ。alt属性の提供がアクセシビリティの基本とされるのはこのような理由による。 一般にWebは紙媒体と比べてアクセシブルであると言われる。しかしながら、情報提供者側がその特性を理解していないために、Web本来の力を生かしきれていないということが多いのが現状だ。そこで、今回はWebを理解する為のキーポイントとなる紙媒体とWebの違いについて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wireframe.cc
無料ホームページ作成 | ホームページの作り方 | Wix.com
Webクリエイター必見！Web制作で役立つサイトとtwitterアカウントまとめ | らふらく^^ ~ブログで飯を食う~
今押さえておくべきWeb制作に役立つ37個のブックマークまとめ*ホームページを作る人のネタ帳
designmap.info
ウェブル
Webデザイン・システム、SEO、アクセス解析などのWEBサイト制作に役立つ情報が満載。 « Sugar Clip