レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ

以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb

この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. Web制作お役立ちツール 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. アイコン素材パック 7. デザインコレクション 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Fresh Folk スタイリッシュなイラストを作成で

HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。 少し前まではJavaScriptで行わなければならなかったことが、HTMLとCSSだけで行えるようになったりするので、最新情報にキャッチアップすることでより効率的にコーディングを行えるようになります。 今回は、HTMLとCSSの小技やテクニックをご紹介したいと思います。 1. ダークモードの時にスタイルを変える 最近のOSでは、通常のカラースキームと別に「ダークモード」が搭載されるようになりました。 prefers-color-scheme: darkを指定することでダークモードが設定されている場合のスタイルを別で記述することができます。

CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイスに対してフレキシブルなレイアウトが可能で、一貫性のある簡潔なコードで実装できます。 Relearn CSS layout Relearn CSS layoutは、インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）などの著者Heydon Pickering氏（@heydonworks）とAndy Bell氏（@andybelldesign）のプロジェクトです。

はじめに ちょっと前に（元の情報が見つからなかったので引用できませぬが）「スクールがRailsを教えるのはそれしか教えられないから」のような話題が出ていて、しばらくしてから、下記の内容が出てました。 働く業界によって学ぶべき言語が変わる、というのは目からウロコだった。 スタートアップで働きたいのだったらRubyだし、モバイルアプリ作りたかったら、SwiftやらJava。 安定して確実にお金をもらうのなら、体質は古いが、長く続いてる企業の言語COBOLかJavaか？— 特命任務ヒツジ (@sheepWebiOS) 2018年6月14日 この内容の出元はおそらく私だと思います。弊社のiOSメンタリングの最中に挟んだ雑談の内容が元だと思うのですが、若干ニュアンスが違うところもありそうなのと（極端に見える）「就活をしている時にこういう内容が知りたかった」と仰っていたのもあり、改めて文章にしてみます

2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。

こんにちは。UIプロトデザイナーのノムラです。 UIプロトデザイナーて何やねん、て思った人は https://goo.gl/5eDMnL をどうぞ。 しばらく前からなのですが、受託でデザインする人間は 「なくてはならない存在になってはいけない」と思っています。 ここ10年くらい、へっぽこフルスタックデザイナーとして生きてきました。 “フルスタック”と言ってみましたが、実際は無軌道に全力疾走してたら何だか色々身についてた、という具合です。 基本的に、予算と納期が無茶でなければ選り好みせずに仕事受けてきました。 ビジュアル作りもUI設計もフロントエンド実装も。調査とか講習会とかも。HTMLもCSSもJSもActionScriptもXAMLもC#もVBもJAVAもPHPもSwiftもMovableTypeもWordPressもAngularも。仕様書作成もテストも。 多様な領域をそつなくこなして

ひよっこデザイナーのmgです！早いものでもうじき2017年も終わりに近づいてきましたね…！そこで2018年のWeb制作に取り入れたいトレンドのWebデザインについて調査してみました！！ 目次 01. 文字を画像からずらして配置する 02. 斜めにレイヤーや線を重ねる 03. カラフルなグラデーション 04. デュオトーン 05. スプリットスクリーンレイアウト まとめ 01. 文字を画像からずらして配置する この頃　整然としているデザインの枠を超えていくような不規則に配置されたデザインが多くなってきているなと感じています。文字を画像からずらした配置にすることで動きや勢いが生まれます。 キドリ アソビュー Wantedly ハウスM21 02. 斜めにレイヤーや線を重ねる こちらも先ほどご紹介した「文字を写真からずらして配置する」と同様、きっちりと決まりきったデザインから斜めにレイヤーや線を

デザインの正解は、なんだかんだ現場によって作られている。じゃあデザイナーである私はどうするのが正解なのか考えた。 エンジニアばっかりのベンチャーに入った当初、ことごとく自分のやりたいデザインが通らなくて、悩んでいた。 言語化が下手くそだったこと、ベンチャー立ち上げ当初にしては経験が浅く、自分だけで完結する細部の調整ばかりに目がいっていたことが原因だったように思う。 毎日、上司とやりとりするもののデザイン案を通すことができず、自分を全否定されたような気分になっていた。「自分は全部が間違っている」と思い込み、基準が揺らぎ、どこにももたれかるところがない空間でふらふらしているような、不安でいっぱいの日々だった。 実は、あの頃考えていたデザイン案やUIの修正案を、タイミングを見計らって実現する作業を２年経った今、やっと進められている。考えていることは、ほぼ変わっていない。どの案がいつ実現できるかと

最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section

当サイトはフリーランスでWeb制作や動画制作をするクリエイターの備忘録なメモサイトです。 Webサイト制作で気になった事、動画撮影や動画制作で気になった事、また個人的に気になるでき事、日常の事などを気ままに勝手に書き綴っています。 WordPressを納品する時に またWordPressネタです。 今回は、WordPressで制作したサイトをクライアントに納品するときに、ぜひ設定したい項目です。 WordPressは、簡単にサイトのデザインなどを変更できて非常に便利です。 しかしWordPressの設定・HTML・PHP・CSSなどの操作が不慣れなクライアントに触って欲しくない項目がありますよね。触れてほしくない項目は、事前に管理画面から消しておきたいです。 WordPressを理解しているなら触っても問題ないのですが、いろいろと触ったせいで表示しないとか、動かなくなったとかの作業が増え、

＜忙しい方・面倒くさがりの向け＞野菜不足を手軽に補えるジュース類や青汁まず初めに、手軽に野菜や栄養素がとれるものを紹介していきます。 手軽だからと言って効果が薄いわけではありませんので是非参考ください。 ふるさと青汁 健康維持だけでなく美容も取り入れたい方におすすめの青汁です。 「明日葉」と呼ばれる野菜が使われているのですが、ケールの2倍近くのビタミンを持ち、女性が不足しがちな栄養素であるミネラル・カリウムが豊富に含まれています。 野菜不足を感じている方におすすめできる青汁ですので、興味のある方は以下より詳細をご確認ください。 ふるさと青汁公式サイトへ 野菜ジュース・青汁の歴史は長い青汁の起源と呼ばれているものが平安時代の書物「医心方（日本に現存する最古の医学書。）」に記載されているようで、植物の葉を利用した汁といった記載があり、これがそうだと言われています。 平安時代（永観2年（984）

2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま

こんばんは、ファーレンハ……桐谷ヨウです。毎週、東京フライデーナイトに幾多の恋ダンスを踊りまくってきました。 過去、ブログ『My Favorite,Addict and Rhetoric Lovers Only』（ファーレンハイト*1名義）で恋愛についてのコラムを書いていたところ、ありがたいことにたくさんの方に読んでいただきました。それを機に女性誌をはじめ色々なところで男女向けに恋愛について執筆しています。 今回は、モテない編集者から、実際のデートを見せてほしい、テクニックを教えてほしいというご要望をいただきました。初めての企画で胸が踊ります。 § 悩める編集とデートテク伝授のための打ち合わせ 今日は、モテない私のような人々を救うべくよろしくお願いいたします！ 桐谷さん、今回はモデルなどマルチに活躍されている佐藤瀬奈さんとデートいただき、テクニックやスマートな会話術を是非教えていただきたい

レスポンシブWebデザインとは、画面の横幅に応じてWebサイトの表示を変化させ、最適化するデザイン手法です。 レイアウトが「シングルカラム」から「マルチカラム」に変化したり、ナビゲーションメニューが「ハンバーガーメニュー(三←こういうの)」から「横並び」に切り替わったりすることで、スマートフォンから、タブレット・PCまで、画面の横幅に合わせて、Webサイトを最も見易い形で表示します。 そして、そのデザインが変わる境目を「ブレイクポイント」と言います。 ブレイクポイントは、画面のピクセル数（CSSピクセル ※）で表されます。 ※ CSSピクセルについては記事：高解像度ディスプレイとデバイスピクセル比 さて、このブレイクポイントですが、特に、「何ピクセルにすべき」「何箇所設定すべき」といった決まりがありません。 Web制作者も「この辺りに設定すれば大体スマートフォンとタブレットの境目になるので