Webデザインの参考資料に！ブラウザの幅ではなく高さをみんながどのくらいにしているか分かる -I am the fold
Webページを見る時、ブラウザはどのくらいのサイズにしていますか？ フルスクリーン？ 小さいサイズ？ 縦長or横長？ ページを制作する際、レイアウトで重要なポイントはその幅ですが、高さを見落としてしまうと表示されないコンテンツに気がつかなかったなどクリティカルな問題になることもあります。 そんなブラウザの高さをみんながどのくらいにしているか統計をとっているサイトを紹介します。 I am The Fold I am The Foldでは、ページが表示された際のビューポートの高さを記録し、その統計を表示しています。 現時点でビューポートの高さで集中しているポイントは、504px, 568px, 667px, 775px, 798px, 1392px, 1522px、という感じです。 800px, 1000pxあたりが特に集中してますね。
指定したウェブサイトで使われている配色・フォントを抽出してくれるサイト「Stylify Me」 | ライフハッカー・ジャパン
「Stylify Me」は指定したウェブサイトで使われている配色を抽出してくれるサイトです。ウェブサイトではさまざまな色が使われていますが、その色を抽出して一覧にしてくれます。「このサイトの配色を参考にしたいな」といったときに便利です。配色に加え、使われているフォントの種類も教えてくれますよ。 以下に使ってみた様子を載せておきます。まずStylify Meへアクセスしましょう。配色を知りたいウェブサイトのURLを入力して「Stylify Me」ボタンを押します。 するとこのように使われている配色の一覧が表示されます。ライフハッカーで使われている色は少なくシンプルですね。 さらに使われているフォントの一覧も作ってくれますよ。お気に入りのサイトの配色やフォント情報がまとめて手に入るので便利ですね。この結果をPDFで出力することも可能です。ぜひウェブサイトのデザインを考える際にご活用ください。
WYSIWYGエディタでCSSを作成できるサイト「EnjoyCSS」 | ライフハッカー・ジャパン
「EnjoyCSS」はWYSIWYGエディタでCSSを作成できるサイトです。ボタンやフォーム、テキストなどのデザインをWYSIWYGエディタで行うことができ、作成したものをCSS3でダウンロードすることができます。 以下に使ってみた様子を載せておきます。まずEnjoyCSSへアクセスしましょう。ボタンやフォーム、テキストなどいくつかのカテゴリに分かれているので、作りたいものを選びましょう。今回はボタンを作ってみます。 こちらがエディタです。左側にプレビューがリアルタイムで更新されます。右側にはTransitionや背景、影、余白などを設定できますよ。 編集が完了したら右上の「Get the code」からCSS3でダウンロードできますよ。CSSでボタンやフォームなどを作りたいときにぜひご活用ください。 EnjoyCSS （カメきち）
幅とカラム数を指定し、整数値のカラムと溝のサイズを一覧表示するグリッド生成ツール -Gridulator
Gridulator 使い方は簡単です。 「Overall Width」に幅の数値を入力します。 矢印で数値を変更することも可能です。 「# of Columns」にカラムの数を入力します。 整数値のカラムと溝が一覧表示されます。 左の「Preview」ボタンをクリックすると、どのような感じになるのか画像で表示されます（下記キャプチャ参照）。 グリッドを原寸サイズでみる場合は、「Make PNG」ボタンをクリックします。 プレビューは複数のものを同時に表示することができます。
初心者がWebフロントエンドを高速化するための基礎知識
連載目次 ブラウザーの持つ開発ツールとその使い方を紹介する連載「無料で使えるブラウザー開発ツール入門」の第2回です。初回の「初心者がブラウザーでデバッグするための基礎知識」では、フロントエンド開発を始めた方が、ブラウザーに組み込まれている開発ツールを使ってアプリの不具合を見つけ、修正するためのツールとその基本的な利用方法を紹介しました。 前回紹介した「DOMインスペクター」「スタイルエディター」「JavaScriptデバッガー」を駆使して、不具合の原因特定と修正を行えるようになり、意図通りに動作するアプリを作成できるようになった方も多いのではないでしょうか。 ところが、フロントエンド開発者には不具合の修正と同様、一定のパフォーマンスの確保もアプリ作成で必要とされます。誰もが体験されたことがあると思いますが、「自分の思い通りに動作してはいるのだが、どうにもこうにも遅くてストレスがたまる」とい
a-blog cms | 使いやすさで選ぶ国産ローコードCMS
プログラムなしで会員制サイトを構築できる 会員制コンテンツなどの通常はプログラミングが必要な仕組みもプログラムを一切書かかずに構築できます。 プログラムを書いたりロジックに悩む時間がなくなり、素早く目的のサイトを構築します。 さまざまな補助機能とともにフォーム機能が標準搭載 サイトの任意の場所にフォームを設置でき、入力データのチェックやコンバート機能を搭載。複数ステップのフォームも作ることができます。 さらに外部連携機能を使って、フォーム機能を拡張してデータを活用することができます。 テンプレートにロジックを持ち込まない a-blog cms のカスタマイズでは独自のテンプレート記法を採用しており、テンプレートにプログラムのロジックを持ち込みません。 これにより、PHPなどのプログラムを書くことによるセキュリティリスクを排除し、HTMLと独自のテンプレート記法を使ってWebサイトを自由に構
スタイルシートをすっきりと見やすくしてくれる『styleneat』 | 100SHIKI
シンプルで素敵なツールだったのでご紹介。 styleneatはCSSファイルを見やすく整形してくれるツールだ。 これを使えばセレクタの親子関係がインデントされて見やすくなる。複雑な階層構造もこれならわかりやすい。 またそれぞれのスタイルの属性をアルファベット順に並べたり、一行でまとめたり、といったオプションもある。 スタイルシートがごちゃごちゃしてきたなぁ、というときに試してみるのはいかがだろうか。
【特集】業務で使える！ 無料Webサイト作成ツール集（1/3） － ＠IT
上記ツールの詳細や、ほかのさまざまな無料Webサイト作成ツールについて知りたい読者は本稿に併せて、連載「どこまでできる？ 無料ツールでWebサイト作成」もぜひご参照ください。 Webサイト開発はテキストエディタだけで行えるのか？ ■ 今後もWebサイト開発にHTMLコーディングは必要なのか？ Web標準にのっとった制作、CSSによるレイアウト、Ajaxなど、HTMLとCSS、JavaScriptなどで実現可能なことは意外と多いものだ。その中でも、特にAjaxはこれまでシステム開発をしてきたプログラマが得意とする部分だろうし、世の中のデザイナーには、デザインだけではなくこれからはHTML制作に進もうと考えている人もいることだろう。 こういったことから、たとえ世の中がリッチなコンテンツ、Web 2.0、CMSという方向に進んでいったとしても、HTMLベースのWebサイト構築というものは、尽きる
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
実際に触れて楽しんでみよう！ロングシャドウをいろいろ試すことができるオンラインツール -Long Shadow Generator
最近よく見かけるロングシャドウをいろいろと試すことができ、そのスタイルシートも生成してくれるオンラインツールを紹介します。 「ロングシャドウ」って何？ という人は、下記ページを参考に。 フラットの後にじわじわきてるデザインのトレンド -long shadow design
Paletta - HSV Color Palette for Every Programmer
Palettaは顕色系 (色相, 明度, 彩度) をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます. 詳しく
黄金比などを使用して、緻密で美しいグリッドを設計できるツール集 | コリス
黄金比や白銀比などを使用して、緻密で美しいグリッドを設計したり、設計したグリッドを表示・確認できるアプリケーション・オンラインサービスの紹介です。 アプリケーション関連
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
ホームページビルダーを無料でお探しなら＞ホームページ作成ツール19個
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる 【発表】最新のHP作成方法はこちらへ ホームページビルダーを無料でお探しのあなた。 ホームページビルダーといえば、これ↓ 「ジャストシステムのホームページビルダー」なら、こちらですぐにダウンロードできます。 しかし、焦らずちょっと待ってください。 web制作歴14年目の僕は、ジャストシステムのホームページビルダーをおすすめしません。 なぜなら、このJustSystemホームページビルダーには以下のようなデメリットがあるからです。 ダウンロードしてからインストールするのが面倒 レンタルサーバーも必要。そ
【配色・色見本 Webサイト紹介】 - 10個のweb配色ツール【色の見本】
ポスターやWebサイトのデザインをする際の配色は奥が深く、デザイナーであっても毎回悩む問題の1つ。 ただ、デザインにおいて配色の役割は大きく、たった1つの色でそのサイトやモノの印象がガラっとかわることはよくあります。 ベースカラーやアクセントカラーの組み合わせが決定しても、その色で本当に正しいのかどうか不安になることもあるかと思います。 今回ご紹介するのは、そんな悩みを一発で解決する、配色を決定する際に役立つ便利なWebツールです。デザイナーの方はもちろん、ディレクター、エンジニアの方でも、覚えておくと使えるものばかりなのでぜひ利用してみてください。 Web配色ツールのご紹介 それでは、Web配色ツールを10個ほどご紹介します。求める色がすぐに見つかったり、色を組み合わせる時の見本となるサイトばかりなのでぜひ訪れてみてください。 HUE/360 HUE/360は、1つのキーカラーと調和する
ウェブサイトの制作・検証に役立つブックマークレット集
レイアウト用のグリッドをオーバーレイで表示します。 URLを変更すれば画像の変更可。 Bookmarklet Layout Grid Overlay MRI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
pxとemの相互変換をしてくれる『PXtoEM』 | 100SHIKI
見出しやパラグラフのフォントサイズや行間をemベースで簡単に設計できるオンラインツール -Em Baseline Generator