【簡単】Googleサイトの使い方！社内ポータルサイト作成で情報共有もスムーズに | 株式会社G-gen（旧 株式会社トップゲート）
削除する Google Service TGカルチャー アプリケーション開発 コンサルティング セミナー テックブログ デザイン デジタルプロダクト開発 開発実績 ニュース 2025年の崖(1) 5G(1) AI(39) AI Hub(1) AI Platform(1) AlloyDB(12) AlloyDB for PostgreSQL(6) AlphaZero(1) Analytics HUB(1) Android(11) Android アプリ(1) Anthos(6) API(12) API エコノミー(1) APP(2) App Engine(2) App Maker(2) AppServer(1) AppSheet(3) arduino(1) Authentication(1) AutoML(4) AWS(12) AWS (Amazon Web Services)(1) AWS
無料で簡単にホームページが作れるGoogleサイトとは？使い方から公開まで紹介 | MakeLeap
インターネットの誕生以来、ホームページ（Webサイト）はウェブ上で情報を公開するメディアとして高い需要があります。しかし、ホームページの作成にあたっては専門知識が必要であったり、外部の専門業者に外注することで多くの費用が発生したり、公開までに時間がかかったり、あるいは更新や追加作業に手間がかかるなどの理由で敬遠されているのも事実です。 Googleサイト(Google Site、グーグルサイト)は、専門知識が不要で、無料もしくは少額の費用で簡単に、しかも短時間でホームページが作成できるサービスとして登場しました。今回はGoogleサイトのメリットとデメリット、Googleサイトを利用するのに適したユーザー、そしてGoogleサイトの導入から作成、公開までについて紹介します。 GoogleサイトとはGoogleサイトとは、Gmail、Googleカレンダー、Googleマップをはじめ、多数あ
HTML 知識不要！ Google サイトでイベントページを簡単に作成してみよう | Google Workspace 拡張の rakumo（ラクモ）
Google サイトは、 Web の専門知識がない人でも無料で簡単にホームページを作成することができるツールです。 この記事ではオンラインのイベントページを実際に作成してみたので、使い方をゼロから知りたい人はぜひ参考にしてみてください。 まずは、 Google サイトとはどのようなサービスなのか紹介します。 Google サイトはどんなサービス？ Google サイトとは、 Google が提供するシンプルな Web サイト作成ツールです。 HTML やプログラミング、デザインなどの専門知識がない人でも簡単にホームページを作成できるので社内ポータルや、イベント用などのサイト作成に最適です。 また、 Google サイトで作成したページはチーム内で共同編集ができるので、チームでの運用がしやすいところも特徴です。作成したサイトはパソコンからスマートフォンまで、あらゆる画面に合わせてレスポンシブ
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
SEO向け画像の工夫urlやテキストで有利になる10個のポイント
SEO向け画像の工夫urlやテキストで有利になる10個のポイント Home SEO SEO向け画像の工夫urlやテキストで有利になる10個のポイント SEO上使用する画像名にはキーワードの単語を付けましょう。Altテキストでその画像の説明をきちんと入れる事です。 画像サイズに注意し、常に画質の良い画像を軽量化するクセをつけたいですね。 テキストや見出しと関連性のある画像にして、できるだけオリジナル画像を使いましょう。ユーザーとGoogleに把握されやすいものにするべきです。 1.画像名にSEOキーワードを入れる 掲載する画像に「最適なファイル名」をつけることはSEO上しておいた方が良いと思います。 まだ連番数字の画像名（例えば「DSC0001.jpg」など）を付けたままではありませんか？ ファイル名にはなるべく、SEOキーワードの英語表記が入る様にしましょう。 どのページのどこで使われてい
[CSS]メディアクエリとは異なる、レスポンシブ対応のモジュール式コンポーネントの実装に適したコンテナクエリ
最近ではデザインもJavaScriptもモジュール式のコンポーネント化が進んでおり、HTMLとCSSでも徐々に浸透している流れですが、完全に対応できているとは言えない状況です。例えば、メディア クエリはページレイアウトではうまく機能しますが、モジュール式のコンポーネントを実装するのは難しくなっています。 レスポンシブ対応のモジュール式コンポーネントを実装する際に適したコンテナ クエリの考え方を紹介します。 Container Queries: Once More Unto the Breach by Mat Marquis 下記は各ポイントを意訳したものです。 ※A List Apartと著者の許可を得て翻訳しています。 メディアク エリの問題点 エレメント クエリとは エレメント クエリがダメな理由 コンテナ クエリとは コンテナ クエリに取り組もう メディア クエリの問題点 複数のコン
![[CSS]メディアクエリとは異なる、レスポンシブ対応のモジュール式コンポーネントの実装に適したコンテナクエリ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7db92ac4801336f7d4af89766702084294cf9b7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019020210-01.png)
レスポンシブデザインにも対応！Adobe XDの4つの新機能｜ferret [フェレット]
Webディレクター、デザイナーがワイヤーフレームやプロトタイプを作る作業に非常に便利なツールであるAdobe XD。 Adobeではユーザーの声を受け、より使いやすく便利になるよう日々アップデートを続けています。9月に新たにアップデート版がリリースされました。 今回のアップデートではどのような機能が追加されたのでしょうか。内容を詳しく紹介していきます。 レスポンシブ・リサイズ 今回のアップデートの目玉と言えるのがレスポンシブ・リサイズ機能です。これによりデバイスごとのデザイン、レイアウトを簡単に作ることができます。レスポンシブデザイン、モバイル最適化が推進される昨今、非常に重要な機能と言えるでしょう。 参考： Adobe XD September Update: Responsive Resize | Adobe Creative Cloud Adobe XDにて複数のデバイスに跨いでデザ
![レスポンシブデザインにも対応！Adobe XDの4つの新機能｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/05f381bd4cb38bdc8f6dcc73b25c4822afc881b3/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F11023%2Fog_image%2Fdefault-fb1f83245352e916bc1fe393fc590aaa.jpg)
レイアウトで選ぶWebデザイン・HTMLテンプレート40個総まとめ 2018年版 - PhotoshopVIP
今回は、無料ダウンロードできる高品質HTML5/CSS3テンプレート素材をまとめてご紹介します。どの素材も高品質なだけでなく、テキストエディタで編集しやすい仕様となっており、サイト制作が捗るアイテムが揃っています。 ここで紹介するHTMLテンプレートは、どれも無料で、Bootstrap 4フレームワークを中心にした、デザイントレンドもうまく取り込んだ、あらゆるウェブデザイン案件に対応してくれます。2018年のウェブデザイントレンドもうまく取り入れているので、サイト開発のデザインやレイアウトの参考にもいかがでしょう。 レイアウトで選ぶウェブデザイン・HTMLテンプレート厳選40個総まとめ 2018年版 Argon Design System Bootstrap 4フレームワークを利用し、100種類を超える独自コンポーネントを揃えたテンプレート。ウェブサイトに必要なパーツはもちろん、サンプルペ
[HTML] 今更だけど、ちゃんとレスポンシブな画像の設定方法を理解する。srcsetとsizesを使いこなそう。
[HTML] 今更だけど、ちゃんとレスポンシブな画像の設定方法を理解する。srcsetとsizesを使いこなそう。HTMLレスポンシブMediaQuery 世間のWebサイトをみてみると「横幅120pxのサムネイルに、1600pxの画像が使われている」ということがちょいちょいありまして、ソースコードを確認してみると ウインドウサイズが2000pxの場合の場合は800pxで表示して、スマホだと120pxで表示する。 またRetina対応をしているから、解像度の2倍が必要で、800px@2xだから、大きい方にあわせてる というパターンを結構みかけるので、あらためてimgの属性であるsrcsetとsizesについてまとめておきます。 大きい画像はファイルサイズが大きい おそらくこの記事をご覧いただく方には「何を当たり前な」と思われると思うのですが、もう少しお付き合いください。 猫のオリジナル画像
![[HTML] 今更だけど、ちゃんとレスポンシブな画像の設定方法を理解する。srcsetとsizesを使いこなそう。](https://cdn-ak-scissors.b.st-hatena.com/image/square/76d15183c3242fe1c09cd44a534ffdf1babe63cc/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSFRNTCU1RCUyMCVFNCVCQiU4QSVFNiU5QiVCNCVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBOSVFMyU4MCU4MSVFMyU4MSVBMSVFMyU4MiU4MyVFMyU4MiU5MyVFMyU4MSVBOCVFMyU4MyVBQyVFMyU4MiVCOSVFMyU4MyU5RCVFMyU4MyVCMyVFMyU4MiVCNyVFMyU4MyU5NiVFMyU4MSVBQSVFNyU5NCVCQiVFNSU4MyU4RiVFMyU4MSVBRSVFOCVBOCVBRCVFNSVBRSU5QSVFNiU5NiVCOSVFNiVCMyU5NSVFMyU4MiU5MiVFNyU5MCU4NiVFOCVBNyVBMyVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MCU4MnNyY3NldCVFMyU4MSVBOHNpemVzJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJTg0JUUzJTgxJTkzJUUzJTgxJUFBJUUzJTgxJTlEJUUzJTgxJTg2JUUzJTgwJTgyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lZWQ2OGEyYTYyZmFkMWVlYmI0MTgyNDkxZmMxYWZmZQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcmRsYWJvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yYzExNzQwNDhmZmM4YTU3MTVjNDA5NmU5YjEzNTBkOQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D7dbabc119a6fce6cf3ec76f724c77915)
[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート
// Function for converting a px based font-size to rem. @function calculateRem($size) { $remSize: $size / 16px; //Default font size on html element is 100%, equivalent to 16px; @return #{$remSize}rem; } @function calculateNum($lheight) { $numSize: $lheight; //Default font size on html element is 100%, equivalent to 16px; @return #{$numSize}; } // Mixin that will include the fall back px declaratio
![[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート](https://cdn-ak-scissors.b.st-hatena.com/image/square/68f33993450e46d15bbdfbb5207d0da2c88fffc7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018071905-02.png)
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる
CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができる サポートブラウザ minmax()の基本的な使い方
Adobe Muse のサービスの終了
アドビでは、最高の価値をお客様にお届けする製品およびソリューションの開発に注力するため、Adobe Muse CC に関するテクニカルサポートの提供を 2020 年 3 月 26 日を以って終了いたします。 アドビでは、ユーザーに謝意を表すとともに、ユーザーの特定のニーズを解決できる他のアドビ製品へのスムーズな移行を支援したいと考えています。 開発を行う前に web サイトやモバイルアプリケーションのユーザーエクスペリエンスを設計する場合は、Adobe XD をお試しください。 これは、UI のデザインおよび試作ができるツールです。詳しくは、Adobe XD を参照してください。 ユーザーがそれぞれのクリエイティブな仕事を発表する web サイトを作成する場合は、Adobe Portfolio を使用して、Behance プラットフォームにも接続可能な美しいポートフォリオ web サイトを
フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
Responsive web design basics | Articles | web.dev
Responsive web design basics Stay organized with collections Save and categorize content based on your preferences. As the number of mobile phone users on the internet increases, it has become more and more important for web designers to lay out content in ways that work well for a variety of screen sizes. Responsive web design, originally defined by Ethan Marcotte in A List Apart, is a design str
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
グーグルで「スマホ対応」ラベルを出すために僕がやった3つのこと | 初代編集長ブログ―安田英久