1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ
HTML 5.2は2017年12月14日に勧告（Recommendation）され、仕様がRECステージに達しました。これはW3Cメンバーとディレクターの正式な承認を受けたことを意味し、Web制作者として、新しい機能の実装を開始するのに最適な時期になります。 HTML 5.2ではいくつかの新機能と削除された機能があり、記述ルールもいくつか変更され、今までinvalidだったものがvalidになり、新しくinvalidになったものもあります。 すべての変更点はHTML 5.2: Changesで確認することができます。 Web制作に最も影響を与えると思われるいくつかの変更点について説明します。 What's New in HTML 5.2? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能 HTML 5.2
Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ
Webの創始者であり、W3Cのディレクターを勤めるTim Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。 10 guidelines to improve your web accessibility 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webアクセシビリティとは何ですか？ 01.カラーに依存しない 02.ズームを無効にしない 03.alt属性のあなたが知らないかもし
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
プロトタイプにも最適！ 誰でもWebサイトを爆速開発できる無料Webサービスをまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に最近のトレンドを意識したWebサイトを作成できる無料のWebサービスを厳選してみました！ 短時間で美しいサイトが作れるので、プロトタイピングにも最適です。 各サービスの特徴や使い方などを簡単にまとめているので、これからWebサイトを作ろうと考えている人はぜひ参考にしてみてください！ ■「Bootstrap 4」ベースのWebサイトを作れるサービス！ 【 Pingendo 】 マウスでポチポチクリックしていくだけで、いつの間にか「Bootstrap 4」ベースのWebサイトが作れてしまうのが「Pingendo」の面白いところ。 当初はシンプルなWebエディタとしてリリースされていましたが、活発にバージョンアップを繰り返して多機能なサービスに変化しています。 豊富なテンプレートやコンポーネントが搭載されており、ファイルの書き出し
デザイン制作を助けてくれる国内外の素材サイトまとめ - NxWorld
見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -
かなりオススメ！WordPressのローカル環境が簡単に構築できる、Windowsもmac OSも対応の無料ツール -Local | コリス
WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです！ ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP
スゴイのが登場！Webやスマホページを積み木感覚でデザインできる、日本語対応の無料オンラインツール -STUDIO
国産のツールでは初じゃないでしょうか。 Webサイトやスマホアプリのページデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。 操作が非常に快適で、ちょっと触るだけでもかなり楽しめます。 STUDIO STUDIOは無料で利用できるオンラインサービスで、日本語版と英語版がリリースされています。 ヘッダやフッタ、コンテンツのコンポーネントなどをドラッグ&ドロップでぽんっと配置するだけで、レイアウトを完成させることができます。コーディングのスキルは一切必要ありません。 レイアウトはすべてレスポンシブデザインに対応しており、従来のデザインツールでは表現できない動きやスクロールの再現も可能です。 STUDIOの作例 さっそく使用してみました。 まずは、メールアドレスとパスワードを登録します。
ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
ネタ探しも仕事の内！フロントエンドのネタさらし！2017春の陣！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
春ですね、いや、夏の匂いを感じる人もいることでしょう。 フロントエンド担当、ザワです。 今回は、フロントエンドエンジニアの私が日常的にチェックして情報を得たり、困ったちゃんの時にお世話になっている主なサイトをご紹介します。 フロントエンド系記事 CSS-TRICKS https://css-tricks.com/ CSS関連といえばこのサイトではないでしょうか。サイト名もカッコイイですし。CSSでお困りの際に検索すると、大体ヒットしてきます。CSSのTips系の記事や、最新のプロパティに関する記事などが掲載されるので、フロントエンドならマストでチェックしておきたいサイトです。 HTML5Experts.jp https://html5experts.jp/ Web技術に関する最新動向、エキスパートによる見解などが見所のメディアサイトです。最新の技術に関してプロ中のプロ、いわゆるロープーの人
Webで仕事をする人に捧げるブックマークレット集 2017年春ver. | HRナビ by リクルート
はじめに Webをより便利にするブックマークレット。 Webブラウザのブックマークとして起動し、ブラウザ上で処理を行う。JavaScriptで書かれた簡易的なプログラムを指します。ブラウザを閲覧している時にあると便利な機能を補うことが可能です。 しかし便利な反面、ブックマークレットは仕様変更によりJavaScriptが起動せず使えなくなっていたりするもの。定期的な情報のキャッチアップとメンテナンスが欠かせません。 そこで今回は、デザインやコーディングなど、Webで仕事をするすべての人が使える、便利なブックマークレットを紹介します。 （今回の記事は、Google Chrome 56.0.2924.87にて検証してあります。2017年3月23日時点の情報です） ※ ブックマークレットの設定方法は記事末尾に記載してあります。 1. Quix 特定のショートカットコマンドを入力することで、Web上
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
おもしろいほど効果が出た！【100倍クリックされる 超Webライティング実践テク60】を読んで実践！ タイトルリライト編
100倍クリックされる 超Webライティング実践テク60を読みました 先日、ブロガーであり［アイデアプロデューサーのRYO君］とオンラインでお酒を飲んでいる時に彼から紹介された本です。 Webライティングに興味があったのもありますが、この本は1時間位でサクッと読めて分かりやすかったので記事にすることにします。 すぐに実行出来ることばかりなので執筆活動をされている方にはもってこいの本だと思います。 正直、ここで紹介することは迷いました。 なぜならこの本のテクニックを使って全てのブロガーさんが記事を書いてしまったらライバルが増えるからです。 それは、初心者ブロガーとしては死活問題です。 しかしそこは［人を喜ばせるスペシャリストのRYO君］のマインドを継承するつもりで情報を共有させて頂きます。
2022年更新 ホームページ制作費用の相場｜目的で変わる料金相場 | 大阪 バリューエージェント
サイトごとにかかれているホームページ制作料金の相場がバラバラで、どれが本当の料金相場なのかがわからない。と感じていませんか？ 実際のところ、Googleで「ホームページ制作 費用 相場」等で検索して表示されているWEBサイトがいう料金相場は、決して間違えているわけではありません。 しかし、ホームページに求める効果・目的次第で、ホームページ制作費用の相場が大きく変わるので、適正な料金相場がわからないことが問題なのです。 こういった背景を踏まえてこの記事では、下記2点のことが分かります。 効果・目的別に必要なホームページの違いアナタの求めるホームページを制作するための適切な費用相場この2点がわかれば、使い物にならないホームページを作る事もなくなり、無駄に費用を掛けなくて済む助けになるかと思います。 ホームページ制作の費用相場（早見表）ホームページとはいってもコーポレートサイトや採用サイト、ポー
Webサービスの公式ロゴDLページまとめ【Facebook・LINE・インスタグラム・Twitter・Google・Microsoft】
Webサービスの公式ロゴDLページまとめ【Facebook・LINE・インスタグラム・Twitter・Google・Microsoft】更新日: 2020年12月16日SNSマーケティング TwitterやFacebook、GoogleのようなWebサービスを自社コンテンツ内で取り上げる時、ブランドのロゴを使いたいと思うことはありませんか？営業資料に用いたり、ホームページで発信する記事の画像として含んだり、サービスのプロダクトに盛り込んだりとブランドロゴを使用する機会は多いでしょう。 今回は、主要Webサービスの公式ロゴの使い方と参照ページを紹介します。 商品やサービス名、ロゴは著作権及び商標にて保護されており、使用にはガイドラインが設定されています。ブランドのロゴに似せたデザインを勝手に作成したり、ガイドラインとは異なる加工をしたりした際には法律に違反する場合があるので注意しましょう。
Web制作者が知っておきたい、ハンバーガーメニューに代わるスマホ向けのナビゲーションのまとめ
スマホのナビゲーションをどうするか、Web制作者の間で多くの議論が交わされてきました。スマホのスクリーンは小さく、掲載する情報量には限りがあるため、多くの情報を格納できるハンバーガーメニューが候補にあがるでしょう。 しかし分かりにくい、使いにくいといった問題点があります。ハンバーガーメニューに代わる、より分かりやすく使いやすいスマホ向けのナビゲーションを紹介します。
わずか1行のコード追加で、どんなWebサイトもCMSっぽくできる！「Simpla」の驚くべき使い方を徹底解説 - paiza開発日誌
どうも、まさとらん（@0310lan）です。 今回は、既存のWebサイトを究極にシンプルなCMSっぽく管理することができる無料のWebサービスをご紹介しようと思います！ このサービスを活用すれば、Webサイトのテキストや画像などの編集、サイトの更新作業などを直感的に誰でも行うことができるようになります。 【 Simpla 】 ■「Simpla」とは？ まず最初に、「Simpla」がどのようなサービスなのかを実際に見ていきましょう！ 以下に、「Simpla」を導入したサンプルサイトがあります。 見た目はごく普通のWebサイトですが、URLの末尾に「#edit」と追記して再読み込みします。 すると、専用の「ログイン画面」が表示されます！ 「Simpla」アカウントでログインすると、画面上でそのままコンテンツを編集できるようになります！ （編集できる箇所、できない箇所の設定も可能です） また、画
2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2017年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、コンテンツファースト、レイアウトの多様化、フラットデザインやミニマリズムの進化、アニメーションの重要性、コミュニケーション・コラボレーション、AR/VR。 2017年のトレンドカラーは、フレッシュなグリーン。 参考: 2017年のトレンドカラー「グリーナリィ」と春のトレンドカラー10色 2017年、Webデザインのトレンド 2016年に人気が高かったインターフェイスのデザイントレンド 2017年、Adobe社のデザイン予測 2017年、Web制作業界全体の流れ 2017年、注目されているデザイナー・デベロッパーのツール 2017年、WebデザインのUIにおけるトレンド 2017年、Webデザインのトレンド まずはWebデザインのトレンド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーダーの仕事が楽になる！レスポンシブ対応のさまざまなHTMLテンプレートが驚くほど簡単に作成できる -Aperitif
