Gitのデフォルト・ブランチ名を変更する方法
masterやslaveといった用語が奴隷制度を連想させる ということで、自分の開発環境でも極力それらの用語は避けたいと思っています。1人でも不快な気持ちにさせる可能性があるなら使いたくないというか。それらの用語をあえて使い続ける理由もないというか。 ということで、今後、自分の開発環境ではGitのデフォルト・ブランチ名をmasterからmainにしようと思います。 Gitのデフォルト・ブランチ名を設定する Gitのバージョン 2.28 からconfigでgit initで作成するリポジトリのデフォルト・ブランチ名を設定できるようになっています。 たとえば、以下のコマンドでデフォルト・ブランチ名をmainに設定できます。 git config --global init.defaultBranch main これでgit initコマンドでリポジトリを作成する際に作られるブランチ名がmain
【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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法
レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で
初心者のためのよく使うLinuxコマンド一覧
最近ターミナルでの作業が増えてきて「あれってどうやるんだっけ？」とか「これができたら便利なのに」と思うことが増えてきたので、基礎からコマンドラインの使い方を覚え直しています。使ってないとまたすぐに忘れてしまうので覚え書きです。 とりあえず「これくらい知ってれば便利に使えるはず」というのをざっくりまとめてみました。 ちなみに「6日間で楽しく学ぶLinuxコマンドライン入門 」という本をベースに学び直しています。以下にまとめたコマンドだけでなく、viの使い方からシェルスクリプトの書き方、さらにはシステム管理などについて、すごく丁寧に解説されていてオススメです。 目次 頻繁に使うコマンド一覧 たまに使いそうなコマンド一覧 覚えておくと便利な記号 覚えておくと便利なキー操作 Linux系システムのディレクトリ構造 確認に使った実行環境 頻繁に使うコマンド一覧 コマンド 説明 オプション
モバイル対応でレスポンシブWebデザインとSEOが向かう先（前編）
かなり久々の投稿になってしまいましたが、今回はレスポンシブWebデザインとSEOについて、最近考えていることや調べていることを整理してみました。若干長めの文章ですが、久々にお付き合いください！前・後編の2回に分けて公開する予定です。 では、さっそく本題に入ります。 検索エンジンからのトラフィックの流入に収益を依存しているビジネスの場合は特に、SEOはビジネスの死活に関わる大きな問題です。80〜90%のトラフィック流入元がGoogleの自然検索というサイトも少なくないのではないでしょうか？現在、制作を手伝わせてもらっているサイトも自然検索からの流入が多いサイトで、モバイル対応にもUXへの影響だけでなく検索エンジンの評価への影響も考慮して、かなり慎重に進めています。 そこで、今回の投稿では、デスクトップ向けのウェブサイトをレスポンシブWebデザインでリニューアルする際、また、デスクトップにしか
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由
レスポンシブWebデザイン（RWD）で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要？」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び気になったので自分の考えをまとめてみました。 モバイル版ブラウザの「デスクトップ表示」機能 たとえばDolphinやChromeといったモバイル向けブラウザにはデスクトップ版を表示するための機能が用意されています（FirefoxやMobile Operaにもついてるそうです）。わざわざこういうった機能が装備されているということは、これがユーザに求められる機能だからだと思います。（以下はiPhone
CompassとSassの基礎の覚書（インストールとツール編）
Compassを使えたら便利だろうなぁと思うことが結構増えてきたので、年末に時間をつくって基礎を勉強してみました。僕のような初心者にはとっつきにくいところもあったので、備忘録として基礎をまとめてみました。 目次 そもそもCompassやSassってなに？ SassやCompassを使うメリットは？ CompassやSassを使うには？ コマンドラインツール GUIツール Compassのコマンドラインツールの基本的な使い方 Compassの設定ファイル（config.rb）について まとめ 参考 そもそもCompassやSassってなに？ SassはSyntactically Awesome StyleSheetの略で、CSSをプログラム言語のように拡張するものです。CSSでは使えない変数や関数のようなものを使えるようにするものです。SASSで書いたものは一度プロセス（コンパイル）してCS
Chromeの便利な隠れ設定と拡張機能3つ
Chromeの便利な隠れ設定と拡張機能を見かけたので備忘録的にメモ。 User Agentを変更する方法 下に表示されるダウンロードバーの隠し方 隠れ設定にすぐアクセスできるようにする拡張機能：ChromeAcess の3本です。 User Agentを変更する方法 たとえばiPhoneでしか見られないサイトをデスクトップPCでチェックしたいときなどに重宝しそうです。 まずは、Chromeの「インスペクタ」を開いて、右上のギアアイコンをクリック。 黒透明の背景でいろいろな設定が現れるので、User Agentにチェック ドロップダウンが出てきて、User Agentとして使いたいブラウザを選べます。 【参考】 Chromeで超簡単にUser Agentを変える方法 — 5509 下に表示されるダウンロードバーの隠し方 アドレスバーに chrome://flags と入力すると「試験運用機能
緊急時のウェブサイト運営についてまとめてみた
3月11日に起こった地震のあと、企業のウェブ担当者や運営を請け負っている制作会社の方々は、緊急対応に追われた方も多かったのではないでしょうか？電話やメールが通じないため、お問い合わせはできない。でも、ウェブサイトは見られる。そんな状況のなか、ウェブサイトで発信する情報が重要な役割を果たした企業も多かったと思います。 僕にとっては、改めてウェブサイトの重要性を感じさせられると共に日頃の準備の大切さを実感させられる体験となりました。そこで、今回は緊急時のウェブサイト運営やそのための準備について一連の体験を通して思ったことを記録しておきます。 組織のサイズや業界によって異なる部分はあると思いますが、基本的な考えはあまり変わらないと思います。 以下の項目に分けてまとめてみました： 緊急時の更新環境の整備 緊急時のワークフローの整備 緊急時のお知らせ掲載場所の整備 緊急時のお知らせ掲載における優先順
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
