2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、 これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの比較関数の
GoogleやAppleも！すでにVue.jsを採用している企業サイト・プロジェクトのまとめ
Vue.jsの人気がすごいですね。 いくつかの企業はすでにVue.jsを使い始めており、一部はメインのプロダクトに、一部は二次的なプロジェクトに使用しています。 Vue.jsへの関心が高まる中、人気が高いフレームワーク、そしてVue.jsをすでに採用している企業サイトを紹介します。 画像: vuejs.org Google, Apple and Other Users of Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Vue.jsはGoogleも採用している 人気が高いフレームワークは？ Vue.jsを信頼している10大企業 まとめ Vue.jsはGoogleも採用している 先日、Googleの人材募集サイトにアクセスした際に私が注目したのは、Chromeの機能拡張でVue.j
管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。 HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。 Bootstrap 4をベースに、Flexboxでレイアウトされています。 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。 MITライセンスで、商用プロジェクトでも無料で利用できます。
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
PhotoshopやIllustratorの代わりになる！Adobe系ソフトの代替ソフトウェア（有料・買い切り・無料）のまとめ
Photoshop, Illustrator, InDeign, Animate, Lightroom, Dreamweaver, After Effects, Auditionなど、Adobe系ソフトの代替ソフトウェアを紹介します。 有名なものからあまり知られていないものまで、買い切り、オープンソースで無料、日本語対応のものなどいろいろあります。 Photoshopの代替ソフトウェア Illustratorの代替ソフトウェア InDesignの代替ソフトウェア Animateの代替ソフトウェア Lightroomの代替ソフトウェア Dreamweaverの代替ソフトウェア After Effectsの代替ソフトウェア Auditionの代替ソフトウェア 下記ツイートの代替ソフトウェアをまとめたグラフィックはAffinity Designerでデザインされています。 With the re
Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール -Fonty | コリス
2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。 日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。 自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。 参考: Google Fonts + 日本語 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語の使い方 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。 登録
CSSのborder-radiusは実はすごかった！あまり知られていない機能を使用して、かっこいいレイアウトを作る方法
border-radiusプロパティは角丸を定義しますが、カードなどの矩形の角を丸くするために使用するだけでなく、さまざまな形を作成することができます。 矩形や角丸だけのレイアウトではなく、さまざまな形を使用できるスタイルシートのテクニックを紹介します。 CSS border-radius can do that? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの基礎知識 流れに逆らう（わないで） はじめに 今年開催されたFrontend Conferenceにて、Rachel AndrewはCSS Gridのレイアウトについて講演しました。中でも私が注目したのは、彼女の話の終わりにあったCSSの古いプロパティについてです。 イメージはborder-radiusプロパティを使用するだけで、用
こんなやり方もあったとは！最近のWeb制作のワークフローにおけるAdobe系ソフトの効率的な使い方が詳しく解説された完全保存版の良書 | コリス
Web制作にAdobe系のソフト、Adobe XDとPhotoshopとIllustrator、そして、Creative Cloudを活用している人は多いと思います。ブラウザやスマホなどの閲覧環境が多様化する中、デザインツールや制作のワークフローも大きく進化しています。 今すぐに試したくなるテクニックが満載で、最近のWeb制作のワークフローを効率的にする解説書を紹介します。 本書は現役で活躍しているWeb制作者がAdobe系アプリを現場でどのように使用しているか、Web制作のワークフローを詳しく解説した一冊です。 初心者の人はもちろんのこと、今まで変わらず同じ使い方をしてきたベテランの人にも「こんなやり方があったとは！！」となり、きっと目から鱗だと思います。
カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法
テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS
びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール
さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ
ガーリーなデザインにぴったり！かわいいフォントに飾り罫がセットになった無料素材 -Marema
かわいくデザインされたレトロ風のフォントとそれにぴったりなグラフィックエレメントや飾り罫がセットになった素材を紹介します。 通常は有料ですが今週末まで無料なので、ダウンロードはお早めに！
Photoshopでの面倒な作業を簡単に！便利すぎるPhotoshopのアクションのまとめ | コリス
グラデーションの縞々を取り除いたり、背景を削除したりする実用的なアクションをはじめ、カラーのバリエーションを生成したり、画像を幾何学模様やハーフトーンにしたり、テキストやオブジェクトを3DにするPhotoshopのアクションを紹介します。 no more banding フラットやソリッドなスタイルがトレンドでも、まだまだグラデも健在です。そんなグラデーションが汚く見えてしまう縞々（バンディング）を取り除いて、美しく仕上げるPhotoshopのアクション。 バンディングを取り除く仕組みは、以前の解説記事（グラデーションをより美しく滑らかにするPhotoshopのアクション ）をご覧ください。
Web制作時に備えておくと便利なチートシートのまとめ（iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ）
iOS/Androidの各デバイスやエレメントの規格、BootstrapやFoundationなど人気のフレームワーク、WordPressのテーマファイル、Git/GitHubの便利な機能、Sublime TextやEmmetの使い方をまとめたチートシートなど、フロントエンドのWeb制作者に役立つチートシートをまとめました。 Web制作時によく使うサイズとかスニペットとかショートカットとか、チートシートを印刷してすぐに見られるようにしておくと便利ですよね。 チートシートの目次 iOS デザイン チートシート Swift チートシート Android チートシート Android デザイン チートシート Twitter Bootstrap 3 チートシート Foundation チートシート WordPress 時短用チートシート WordPress テーマ開発用チートシート GitとGit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの実用的なテクニックから素晴らしいアイデアまで！スタイルシートの最新テクニックのまとめ
Photoshop上で画像検索できる優れもの！Flickrで商用利用できる画像を探すことができるPhotoshopの機能拡張 -Pictura | コリス
フォント好きは要チェック！高品質な新作フリーフォントのまとめ -2014年5月