ちいさなWebデザインブログ | Webデザイン制作のヒントをお届け
Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説
デベロッパーツールとは、Google Chromeに標準搭載されている開発者用の検証ツール（デバッグツール）で、Webサイトのパフォーマンスを向上させるための多くの機能が搭載されています。 この記事では、デベロッパーツールの中でも特に利用頻度の高い、HTMLとCSSの検証をするための「Elementsパネル」と、スマートフォン表示を検証するための「デバイスモード」に的を絞って解説していきます。 今まで、デベロッパーツールを使ったことが無い方でも分かりやすい、初心者向けの内容になっています。この記事の内容を習得すると、ページ修正前の表示検証や、表示崩れの原因特定などができるようになると思います。ぜひ実務で活用してみてください。 ※本記事の公開／更新時のGoogle Chromeのバージョンは107。 起動方法 まずは、デベロッパーツールで検証したいWebページ、またはローカル環境で制作中のH
どうしてもドメインを永久保持できない企業向け 企業はどうドメインを捨てるべきか - Web > SEO
コロナ禍中に取得された地方自治体のドメインがオークションで高値売買され、中古ドメインとして悪用されるなど、公的機関のドメイン放棄問題が注目されています。 11月25日のNHKニュース7でドメイン流用の件が報じられました。私も取材を受け少しご協力をしています。 www3.nhk.or.jp 公的機関のドメイン放棄問題の理想の解決は、今後は lg.jp、go.jp などの公的機関しか使えないドメインだけを使うようにすることです。 ただ今回の問題はコロナ禍初期の大混乱時、非常にスピーディにサイト立ち上げが求められていた時の話です。 信頼が求められる lg.jp などのドメインの利用には厳格なルールがあるのも当然です。あの混乱時期にルール改定も難しかったと思います。新規ドメインが選ばれた事は仕方がない事と思っています。 ただ、コロナ禍が落ち着いた今、無責任に放棄されるのは明らかな問題です。 今回の
自治体サイトランキング | Gomez -Webサイトランキング・評価・構築サービス-
総合得点2010年3月自治体サイトランキングの総合得点による順位1位～20位は以下のとおりです。このランキングは、2010年3月10日までの各自治体サイトの情報をもとに評価をしています。主要項目調査で一定基準を満たした170サイトのうち、上位50サイトをランキングにノミネートしています。カテゴリ別順位、都市タイプ別順位については右側の各項をクリックして下さい。 21位以下はこちら 上位サイトの特徴 総合得点1位～20位21位～50位上位サイトの特徴 順位 得点 サイト名 サイトの使いやすさ 情報の公開度・先進性 サイト 1 8.54大阪市（大阪府） 8.66（1位） 8.41（1位） 2 8.31三鷹市（東京都） 8.62（3位） 7.99（7位） 3 8.27相模原市（神奈川県） 8.22（20位） 8.32（2位） 4 8.22神戸市（兵庫県） 8.31（15位） 8.13（4位
Webサイト制作時に役立つディレクトリ名とファイル名の英語リスト
使い方のポイント 一般的な企業サイトであれば、上記のリストで基本的な構成は整います。ただし、企業や業界に特化したコンテンツが必要な場合は、その都度適切な英語表現を検索し、命名することをおすすめします。 私の方法として、和英辞書などを使うこともありますが、基本的には「調べたい日本語 + 英語」でGoogle検索を行います。例えば「概要 英語」や「採用 英語」などです。この方法が最も効率的で、正確な翻訳結果を得ることができます。 命名規則の重要性 Webサイトのディレクトリ名やファイル名は、検索エンジン最適化（SEO）の観点からも非常に重要です。適切な英語の単語を使うことで、Googleなどの検索エンジンで適切にインデックスされ、検索結果にも影響を与えます。 以下のポイントに気を付けて命名しましょう。 シンプルでわかりやすい名前を付ける：ファイル名やフォルダ名は短く、簡潔にします。長すぎる名前
Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 - btmup Blog
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ディレクトリ名とかファイル名って、ちゃんとしようとすると意外に時間がかかるもの。 ページタイトルを直訳すれば良いってもんでもなく、いくつかある候補から内容に一番合った単語を見付けてこないといけない。 いちいち英語を調べるのもメンドいし、かといって「gaiyo」とかじゃ気持ち悪いし、どうしたもんかねー、とずっと思っていました。 で、今回、勢いでざっくりとまとめてみたのでついでに公開します。 本当にざっくりなので抜けもあるだろうし「それくらい書かんでも分かるわボケ」なものもあるでしょうけど、まぁそれは追々。 ディレクトリ名やファイル名として使用することを前提としているので、文法とかは全く考慮してませんので悪しからず。 最近、医療・病院関係のサイトに仕事で関わることが多
【無料で簡単】SiteSuckerの使い方 ホームページ丸ごと保存
こんにちは、マルオです。 フリーランスでWEBデザイン・フロントエンドをやってます。 みなさん、WEBページをサイト丸々をローカルに保存したい時ありませんか？ ブックマークでお気に入りにしても、そのサイトがずっと残っている保証はないですよね。久しぶりに訪問したら「Not found」なんてこともありえます。 そんな時は、ローカルに丸っとWEBサイトのページを全部保存しちゃいましょう。 SiteSuckerとは なかなかハイセンスはこのアプリアイコン「SiteSucker」。 SiteSuckerはMac用のアプリで、主に下記のものをダウンロードすることができます。 HTML CSS 画像データ JS 基本的に静的ファイルになりますので、 wordpressなどのCMSで動的なサイトで作られていても、 静的なページとしてダウンロードされますのでご注意ください。 SiteSuckerのダウンロ
【料金相場】バナー広告の種類や費用の目安について徹底解説
具体的な費用について知る前に、それぞれのバナー広告の種類を具体的に確認しておきましょう。 運用型バナー広告 運用型バナー広告は、広告枠が存在するメディアに掲載される広告でGDN（Google）とYDN（yahoo!）のふたつが存在します。 運用型バナー広告では、ユーザーの属性や地域に応じたターゲティングが可能なため、広告手法の中でも精度が高いことがメリットです。 ただし、運用型バナー広告では、入札額や配信期間などの条件を動かしながら配信するため、運用の知識が必要になるでしょう。 純広告型バナー広告 純広告型バナー広告は特定の広告枠を買い取って一定の期間掲載できる広告で、Yahoo!の公式サイトや日本経済新聞社などで掲載できます。 購入した期間は必ず広告が掲載されるため、サイトに訪れた人全員に情報を伝えることが可能です。 認知度の向上を目指す際には効果的ですが、有名なサイトの場合は掲載費用が
改正電気通信事業法が施行だけど、またしても何も知らなかったWebサイトやアプリ運用者のために書いておくぜ - フジイユウジ::ドットネット
2023年6月16日 から改正電気通信事業法が施行なんですけど知ってました？ これ、収益目的なら企業運営でも個人運営でもほとんどのWebサービス・スマホアプリが対象という、めちゃめちゃ広範囲にみんなが対応が必要なやつなんですけど、ヤバくない? 何もしてなくない? やっべえなというWEBサイト担当者/アプリ開発者が結構いそうな雰囲気がいんたーねっつから漂ってまいりました。 企業のオウンドメディアや、個人運営のアフィリエイト目的サイトなんかも対象になる場合があって、メディア系サイトはもちろんアプリ開発者にも影響ある感じですので、やるべき内容をブログにしたためておきます。 ※ぼくは法律の専門家ではないので、ちゃんと総務省の公式ドキュメントなどにも当たってくださいね。 ググると「外部送信規律」とか「電気通信事業者又は第三号事業を営む者」とか専門用語の記事ばっかり出てきて自分が何をしたらいいのかの情
Web制作を楽にする便利なSVGツール53個まとめ
この記事では、Webデザイン制作の面倒な作業を楽にこなす、便利なSVGツール53個をまとめてご紹介します。 背景テクスチャやSVGシェイプから、オンラインSVGツールやSVG最適化ツールなど、SVGにまつわるあらゆるツールを揃えています。 新しいツールが見つかり次第アップデートしていく予定なので、ブックマークしておくと良いかもしれません。 Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ Web制作をもっと楽に！便利なSVGツールまとめ Haikei ユニークなSVGシェイプや背景、シームレスパターンを作成できるオンラインツールで、グラデーションや波ウェーブなど基本的なシェイプはほぼ揃います。 配色やサイズなど、本格的なカスタマイズができるのも特長で、作成したデザインはSVGやPNGファイルとして無料ダウンロード可能です。 Cool Backgrounds お好みの配色をつか
the peculiar case of japanese web design - sabrinas.space
the peculiar case of japanese web design a project that should not have taken 8 weeks how is japanese web design different? in this 2013 Randomwire blog post, the author (David) highlighted an intriguing discrepancy in Japanese design. While the nation is known abroad for minimalist lifestyles, their websites are oddly maximalist. The pages feature a variety of bright colours (breaking the 3 colou
（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード
なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。 まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。 続編は多分今月中に書きます。 こちらは基礎編です。 対象者 普段jQueryでWebサイトを制作している 生のJSはあん
開発効率をあげてくれるツール｜苦しんでプログラミングを学んだ柴犬（くるしば）
※こちらの記事がはてブの総合人気エントリ、noteの「先週もっとも多くよまれた記事」「先週もっともスキされた記事」に入りました！ こんにちは。 苦しんでプログラミングを学んだ柴犬こと、くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 今年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに6000人以上の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — 苦しんでプログラミングを学んだ柴犬（くるしば） (@shiba_program) September 13, 2022
調べて、整理して、発信するのが好き。「とほほのWWW入門」管理人が26年間も更新を止めない理由｜tayorini by LIFULL介護
調べて、整理して、発信するのが好き。「とほほのWWW入門」管理人が26年間も更新を止めない理由 #老後も楽しむ 公開日 | 2022/12/12 更新日 | 2025/08/06 インターネットが世の中に急速に普及した、1990年代後半から2000年代前半ごろ。当時はまだ、ブログやSNSといった手軽な情報発信ツールが一般的ではありませんでした。 そんな時代に情報発信をするにはWebサイトが必要で、Webサイトを制作するためには専用のHTML言語を習得する必要がありました。 書籍だけでなくインターネットにもHTMLを学べるコンテンツはさまざまありましたが、中でももっとも多くの人が参照したであろうサイトが「とほほのWWW入門」。Webサイト制作に関する膨大な情報がきれいに整理されており、素人でも分かりやすくHTMLについて学習できる「先生」のような存在です。 とほほのWWW入門は1996年に開
【コンテンツマーケティング】オウンドメディア構築時のCMS選定方法 - はてなビジネスブログ
これからオウンドメディアを始めたい、あるいは既存のオウンドメディアをリニューアルしたいという時、CMSの選定は今後の運用体制にも影響する重要な検討課題となります。今回は、オープンソースのCMSの代表格であるWordPress、SaaS型CMSの「はてなブログMedia」を中心に取り上げ、それぞれのメリット・デメリット、選定のポイントについてまとめてみました。 目次 目次 CMSはコンテンツ管理のためのシステム CMSのメリット：CMSを使わない場合と比較 コンテンツ更新作業の効率化 コンテンツ管理のしやすさ 機能が豊富 複数のユーザーで権限を分けて利用できる SEOをしやすい CMSのデメリット デザインの自由度が低い データベースの知識が必要 インストール型CMS：WordPress WordPressのメリット 無料で利用できる テーマ、プラグインが豊富 サイトの移転などがしやすい W
webエンジニアの「業務委託単価表」が公開 - Digital Shift Times（デジタル シフト タイムズ） その変革に勇気と希望を
Resource株式会社は、3,000の実績データをもとにwebエンジニアの業務委託単価表を公開したと発表した。 現在の単価が適正単価なのか、次の単価レンジに行くにはどうすれば良いか、開発発注プラットフォーム「ISSUE」の実績を使い調査したとのことだ。 2022年11月ではISSUE上に1,800人以上のユーザーデータと2,000以上の単価診断結果があるという。またISSUEではクラウドソーシング形式で企業とマッチングすることにより、報酬を獲得することができる。その際の契約時給単価を今回の相場作成の参考にしているとのことだ。 ・1,000〜2,000円 インターン・アルバイトレベル。プログラミングを始めたての学生や勉強中の人が対象になる。実務経験としては0〜1年ほどの人が当てはまる。プログラミングの概念を学んでいる段階なので、外部APIなどの公式ドキュメントを理解するのが難しい場合もある
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール
Web Design Clip [WEBデザインのクリップ・リンク集]![Web Design Clip [WEBデザインのクリップ・リンク集]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5f481647ac1eb2cd87c65cb220881cb5c1c55bf/height=288;version=1;width=512/http%3A%2F%2Fwebdesignclip.com%2Fimg%2Fogp.png)
アトリエマッシュ
