【ハンバーガーメニュー＆トグルニュー】クリックすると表示されるグローバルナビの実装方法
ハンバーガーメニューの実装方法 それでは実装方法を解説していきます。 HTML <header class="header"> <nav class="global-nav"> <ul class="global-nav__list"> <li class="global-nav__item"><a href="">メニュー1</a></li> <li class="global-nav__item"><a href="">メニュー2</a></li> <li class="global-nav__item"><a href="">メニュー3</a></li> <li class="global-nav__item"><a href="">メニュー4</a></li> <li class="global-nav__item"><a href="">メニュー5</a></li> </ul>
事例から学ぶ！Webアニメーションのテクニックまとめ
Webデザインをする上で欠かせなくなってきているアニメーション。PCやスマホなど対応デバイスが増えたことで、クリエイティブに対しての重要度も高まってきています。実例を元にどんなWebアニメーションが良いのか紹介しています。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Studio by UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Nick Babich氏によって投稿されました。 機能的で楽し
Webアニメーションの種類と実装方法 | BACKYARD
＼月刊！／ソーシャルトレンド #26 キャッチーすぎるタイトルで話題！ 「チンアナゴ顔見せ祭り」 ほか【2020年6月】 田中 雄一郎 デジタルで遊ぼう！ #3 Webアニメーションの種類と実装方法 2017/02/03西田 慎吾 クロスコミュニケーションUXM本部 クリエイティブ TIPS デザイン html5 Flash JavaScript UI エンジニア UX（ユーザーエクスペリエンス）を高める手法のごく一部ですが、Webサイトにインタラクション性を持たせたり、アニメーション演出を加えたり、動的なWebサイトを作るには、HTML以外の技術を使う必要があります。その技術には、はやり廃りがあり、また用途に応じても、選択されるものが変わってきます。今回は、Webアニメーションを実現するための仕組み、を解説したいと思います。
Webデザイン100トレース | Hypertext Candy
こんにちわ！最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効
HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS
CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます
Web制作で役立つAdobe XDの「神プラグイン10選!!」導入方法からおすすめポイントまで徹底解説!! | 株式会社ウェブ企画パートナーズ
Web制作で役立つAdobe XDの「神プラグイン10選!!」導入方法からおすすめポイントまで徹底解説!! 颯爽とAdobe界に登場し、我々制作者のフローをより便利にしてくれるステキな「Adobe XD」。 XDは日々アップデートが行われ、便利な機能追加が進んでいます。しかし、まだまだ「この機能があったらいいな！」が絶妙に無かったりで、本格的に稼働させようと思うと、歯がゆい思いをするデザイナーさんも多いのではないでしょうか。 XDでもプラグインが可能に！ そんなXDですが、2018年10月のアップデート（バージョン 13.0）より、プラグインの使用・開発が可能になりました！ XDのプラグインはPhotoshopなどと同様にHTML・JavaScriptなどの技術で開発できるため、フロントエンドの知識があれば(比較的)手軽に作成可能です。 プラグイン開発の手順については、Adobe Blog
本当に簡単にできて驚いた！面倒な設定は一切不要、秒速でWeb開発用のサーバーが構築できる -Zero Server
Node.js、React、TypeScriptをはじめ、HTML、CSS、Sass、Markdownなどが利用できるWeb開発用のサーバーが秒速で簡単に構築できるZero Serverを紹介します。 必要な依存関係は自動インストールされ、ReactやSassは置くだけでコンパイル、マークダウンも設定は一切不要です。サーバーを構築する時間が無い人、設定に明るくない人でもすぐに利用できます。 Zero Server Zero Server -GitHub Zero Serverの特徴 Zero Serverのインストール Zero Serverの使い方 Zero Serverの特徴 Zeroは現代のWeb開発をシンプルにするためのNode.jsフレームワークです。パッケージマネージャーやルーティングを気にせずにアプリケーションを構築できます。 Node.js、React、HTML、MDX、静
「え？それそんなかかるの？」簡単そうに見えて案外時間のかかるWebサイト上のJavaScriptあるある仕様8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
多！ そのため、仕様の洗い出しが不十分になりがちになる、という点で厄介です。 ただし、今はSwiper, Slickといった優秀なプラグインがあります。こいつらは大抵の仕様は満たしてくれますので、積極的に使うと良いと思います。 参考 Swiper Slick フィットスクロール 厄介度：★★★ 紙芝居スクロールなどといったりもします。 海外のオサレなブランディングサイトや、ランディングページなんかでたまに見かけますね。 カッコイイ！うちもこんなんやりたい！と思うかもしれません。がしかし…… イメージ ハマりポイント スクロールに関する他の機能実装 これを実装する場合ブラウザにデフォで備わっているスクロールは使わず、別の方法（CSSのtransformとJSを組み合わせるなど）で実装することになるかと思います。 するとまず、スクロールイベントが取れないんですね。 そのため、スクロールに合わせ
WEBデザイナーを育ててきた私が駆け出しWEBデザイナーに言いたい事。考え込むよりも手を動かさなきゃ。 | コラム | ホームページ制作 大阪 インフォメーションメディアデザイン株式会社
WEBサイト制作 2015.11.24 WEBデザイナーを育ててきた私が駆け出しWEBデザイナーに言いたい事。考え込むよりも手を動かさなきゃ。 I.M.Dでは積極的にWEBデザイナーを育てる取り組みを行っております。 今は直接指導をする立場ではなくなりましたが、私も10年前はデザイナーの育成に尽力をしておりました。 その時を振り返って思う事があったので紹介したいと思います。 デザインプロセスがないとデザインを教えるのはすごく大変なんです 後輩が作ったデザインにアドバイスをする際、「プロセスを見せて」って尋ねるんですが、そのプロセスがないって事がしばしばあります。 「えっTOP.psdしかないの」 「ここまで作るのに葛藤とか、迷いとかあるでしょ。その際に出来たTOP案AとかTOP案BとかはたまたTOP案B-1とかないの？」 「じゃいかにしてこのデザインにたどり着いたか分からないじゃないか」っ
Web制作が一気に捗る！？Adobe XDでワイヤーフレームを作ってみた | WebNAUT by Beeworks
※この記事は2017年2月1日に執筆された記事です。現在は仕様が異なる可能性があります。 最近流行りのAdobe XDが良いと聞いて、せっかくの機会なのでこの「WebNAUT」のリニューアルのワイヤーフレーム作成に使ってみました。今回はその時の使用感をお伝えしていきたいと思います！ 11月にベータ版のリリースがあってとても便利になったのですが、ワイヤーフレームを作っていたのが10月頃だったので、まずは当時の「Adobe XD Preview 7 」を使ってみての感想です。 その前に、Adobe XDとは？ Webサイトやスマホアプリのデザインツールであり、プロトタイプツールです。PhotoshopやIllustratorのようにデザインを作成するだけでなく、 このアプリケーション内でプロトタイプを作成することもできます。その名前の通り、ユーザー体験を設計するうえで助けになるツールです。 A
ウェブデザインの本質に主眼を置いたデザインガイドライン「ブルータリスト・ウェブ・デザイン」
by Igor Miske 建築形式のひとつである「ブルータリズム」を基に、ウェブサイト本来のあるべき姿に焦点を当てて作られたデザイン手法が「Brutalist Web Design(ブルータリスト・ウェブ・デザイン)」です。「雑誌ではないが雑誌のような記事が載っている」「アプリケーションではないが商品の購入やユーザーとのやり取りに使える」「データベースではないが、データベースによって動く」といった複数の側面を持っているのがウェブサイトであり、サイト訪問者に対してコンテンツを純粋に楽しむための方法として提供されるものであるとして、ブルータリスト・ウェブ・デザインは構築されたとのこと。そんなブルータリスト・ウェブ・デザインのガイドラインを、エンジニアのデイビッド・コープランドさんが記しています。 Brutalist Web Design https://brutalist-web.desig
機械加工 野方電機工業 (金属加工・樹脂加工)
野方電機工業株式会社 営業カレンダー 〒165-0027 東京都中野区野方6-30-27 （営業時間 8：15～12：00／13：00～17：15） （ 交通アクセス >> ） TEL：03-3330-1191 FAX：03-3330-1193 E-mail：info@nogatadenki.jp 営業カレンダー
CSSのみでは実装できない、気持ちいい動きのちょっと面白いホバーエフェクト -Attract hover effect
周りがうねうねしたサークル状のアイコン、ホバー時にどんなインタラクションを想像しますか？ カラーが変化したり、裏返しになったり、サイズが大きくなったり、いろいろなエフェクトが考えられると思います。 あまり見たことがない、ホバー時のちょっと面白いインタラクションを紹介します。
WordPressの管理画面で403 Forbiddenが表示されたときに確認すべきことと、その対処方法
photo credit: mlcastle via photopin cc 先日、いつも通りブログサイトとアンテナサイトの管理画面(WordPress)に入ろうとしたところ、「403 Forbidden」の文字が表示されて驚きました。心当たりがあるので平静を装いつつ、対処をすることに。 今回は実体験を交えて、WordPressの管理画面で「403 Forbidden」が表示された時に確認すべきことと、その対処方法をご紹介いたします。 「403 Forbidden」とは まず、「403 Forbidden」について触れておきます。 ウェブにおける三桁番号403、またはエラーメッセージ”Forbidden”（英語では『(閲覧)禁止』）は、HTTPステータスコードの一つ。 ページが存在するものの、特定のアクセス者にページを表示する権限が付与されず、アクセスが拒否されたことを示すもの。 また、サ
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
ゆうのすけブログ » Macでスクロールバーを常に表示したい場合の対処法
ページ内にスクロール領域を作ったのですが、どうもスクロールできるように見えなかったので、スクロールバーを常に表示するように、overflow-y: scroll;を追加してみたのですが表示されない。 使用しているPCはMacのOS X Yosemite。 原因はMacのデフォルトの設定で、非表示になっているようです。 非表示の設定を表示にしても自分だけなので無意味です。 てことで「::-webkit-scrollbar」を使って解決します。 以下をcssに追加します。 ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px
画像にはカラープロファイルを埋め込んだ方がいい理由。sRGBになってますか？ - 中央線に乗って考える
まず、下の画像に違いは出ていますか？ ほぼ同じように見えるか、AdobeRGBだけ若干浅い程度でしょうか？ すべてJPEG画像ですが、カラープロファイル（ICCプロファイル）の有無があります。 元画像はAdobeRGBです。 左の画像はそれをAdobeRGBのプロファイルを埋め込んで保存したものです。 真ん中はさらに、sRGBに変換後、sRGBのプロファイルを埋め込んだもので、 右の画像はsRGBですが、プロファイルを埋め込んでいないものです。 そもそもsRGBとAdobeRGBって何が違うのか？ 人間が見ることのできる「色」が、図の色がある全ての領域だとすると、sRGBのモニターの表示できる「色」は青い三角の領域で、それより多くの領域をカバーするのがAdobeRGBです。このそれぞれの領域をカラースペースまたは色空間といいます。 さらに、印刷で表現できる色空間は白色の多角形の部分。sRG
動画制作・映像制作 ・撮影・マーケティングのLOCUS国内最大級の動画制作実績 | 東京都
幅広い業界の企業から学校、官公庁・自治体など累計約2,000社以上のビジネスの課題を動画で解決してまいりました。 累計20,000本以上の映像制作や動画の活用コンサルティングの実績がございますのでお気軽にご相談ください。 YouTubeチャンネルコンサルティング 企業や団体が運営するYouTubeチャンネルの戦略設計から開設・運用代行、映像制作、動画広告の運用などのYouTubeにまつわるコンサルティングをご提供。 もっと見る テレビCM制作サービス FAST CM テレビCMをもっと手軽に。映像制作のプロが、テレビCMの制作から配信、効果分析、改善提案までをワンストップでご提供。 もっと見る 調剤薬局デジタルサイネージ シニアード 調剤薬局の来局者は約55％が60歳以上となるため、シニアを対象とした商品・サービスの認知拡大など動画を活用したマーケティングに最適なメディアです。 もっと見る
株式会社アップランド
アップランドは「ネット上のサービスの活性化」はもちろん、先入観にとらわれない「ビジネスとネットとの連動的活性化」をご提案させていただいております。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creative Cruise