2020年よく読まれた記事、エンジニアブログ運営50記事まとめ

レッスンの質問への返答や、案件での調べ物などメモがわりに始めた、当ABCウェブエンジニアblog。 10月初旬から2020年の大晦日の当記事執筆時点まで約3ヶ月。ぼちぼち更新して50記事弱となりました。 3ヶ月のアクセス合計は5000弱。 始めた当初はアクセスも少なく、一時はてなブログからのアクセスが一瞬増えた時期がありましたが、現在の流入の85%ほどはGoogleから。Yahooやその他も合わせると約90%が自然流入となっています。 Web技術のブログを書いてるので、何か困った際に検索してお越しいただき、お役に立ててるなら書き甲斐を感じますし、非常に嬉しいです。 今後もお役に立てるように、こ…

【Laravel】.envファイルの環境変数に半角スペースを含む方法

Laravelで環境変数を設定する「.env」ファイル。 サイトの基本情報やデータベースの接続情報はじめ、サーバーごとに異なる変数設定を読み込むことが出来ます。 この.envファイルに設定した変数は以下のような使い方で他のファイルで呼び出して使用することが出来ます。 ▼.envに環境変数を定義する記述 APP_NAME=設定する値 ▼bladeファイル内で.envに定義した環境変数を呼び出す方法 <p>{{ config('app.name') }}</p> この環境変数に半角スペースを含む値を設定するとエラーが出てしまいます。 「APP_NAME」などは特にサイトのタイトルとして使いたかった…

IEではline-heightが効かない？！Internet Explorer対応の見解

Webブラウザ界の問題児Internet Explorer、通称IE。 サイト納品の際に一安心したと思ったら後からIEでの表示がおかしいと、対応に追われるなんてことがよく起こります。 こういった問題が起きないよう、受注の際にブラウザ対応、特にIEについてどこまで対応範囲とするか、はっきりさせておくのが大事です。 今回はIE11においてline-heightが効かずデザインが崩れているという事例があったので、IEへの対応についての見解を含め、解説していきたいと思います。

【HTML/CSS】中央揃えにしたい!!のに出来ない時に見る記事 Part.3「absoluteとcalc()でのセンタリング編」

要素を中央揃えや自在に配置したい時の方法としてcalc()関数を使ったテクニックを解説しています。 positionと組み合わせて幅広いレイアウトが可能なので是非ご参考ください。

【HTML/CSS】初心者向け！コーディングでよく使うタグ、プロパティまとめ

今回はWebサイト制作・コーディングについて学習し始めて間もない方向けの基礎まとめです。 よく使う基本のHTMLタグやCSSプロパティについてざっとまとめてるので、初心者の方はもちろん 、久々のコーディングでブランクがあるという方にもご参考頂ければ幸いです。 模写コーディングなどする際にコーディングが捗るよう、いつでも見返せるようブックマークなどして是非活用してください。

【Laravel】直接DBへ追加！php artisan tinkerでユーザー作成

PHPフレームワークLaravelでは「tinker」という対話型のデバッグ機能が標準装備されています。 $ php artisan tinker こちらのコマンドを使ってターミナル等からLaravelアプリケーションに直接処理をすることが出来ます。 Eloquentクラスやその他のクラスの読み込むことも可能なので、動作確認をしたり、アプリケーション上にない処理をしたり、色々な事が出来ます。 今回実際に既に稼働済みのサイトで、ユーザーの新規追加が管理画面などで出来ない仕様にしてるサイトがあり、そちらのサイトへtinkerを使用してユーザー追加をしました。 その処理の流れを備忘録として記しておき…

【SEO】ブログのサムネイルやSNSのOGP画像に最適な縦横アスペクト比・推奨サイズ

TwitterやFacebookなど大手SNSのアイキャッチともいえるOGPに最適とされる画像の縦横比は何対何がベストなのか。 今回はOGPに設定すべき画像の縦横の比率(アスペクト比)について調査してみたので、記したいと思います。

【SEO】URLの正規化、www有無・httpとhttpsの統一方法。エックスサーバー設定例有り

SEOのひとつに、サイトのURLの正規化というものがあります。 サーバーによって初期設定では同じ内容で別のURLが混在してしまっているので、wwwの有無、SSL接続の有無を統一することを言います。 http://サイト名.com https://サイト名.com http://www.サイト名.com https://www.サイト名.com 上記のように1つのページに対していくつものURLが存在する状態のままだと、検索エンジン評価が分散してしまい、SEOに悪影響となってしまいます。 URLの正規化とはこういった同じ内容のページのURLを統一することを指します。 今回はこのURLの正規化の方法…

【HTML】サイトにファイルのダウンロードリンクを貼る方法

ウェブサイト上でユーザーに対して何らかのファイルのダウンロードを促す時があるかと思います。 今回はそういったダウンロードリンクを貼る方法について、記したいと思います。

【CSS/Google Fonts】フォントが太字にならない場合の対処法。テキストシャドウ＆ウェブフォント。

font-weight: boldが効かない！そんな、思うように文字の太さを調整出来ない時、太字を適用させる対処法「text-shadow」を用いる方法と「ウェブフォント」を用いる方法、2つをご紹介します。

【VScode】GitLensがサイドバーから消えた場合に復活させる方法

動作が軽快かつ、様々な拡張機能が使えて便利なコードエディタ「Visual Studio Code」、通称VScode。 とても使いやすいですが、たまに予期せぬ動作で困ることもあったりします。 今回はGitLensがサイドバーから消えて困った時の対処法です。

レスポンシブのviewport設定とスマホの解像度の理解

レスポンシブにスマホ対応する際にviewport設定が何故必要なのか、理解するためにはスマホの画面の解像度がどのようになっているか理解する必要があります。 この設定についての理解がおろそかなまま、レスポンシブなコーディングをしようとしていてつまづいている方がいらっしゃったので解説したいと思います。

【HTML/CSS】CSSで斜線ストライプ背景、liner-gradient()をマスター。完全解説。

CSSでは背景にlinear-gradient()関数を用いてグラデーション表現が可能です。 二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。 developer.mozilla.org このグラデーションを応用して、色の変化を急にすることで、斜線やストライプの表現ができます。 サンプルのコードなどは調べると他でもたくさん出てくるかと思いますが、どういう仕組みでそうなるのか、すっきり理解できていないという方向けに解説したいと思います。

【HTML/CSS】ハンバーガーメニューPart.2「CSSのみでシンプル実装コード編」

CSSだけで簡単ハンバーガーメニューの実装コード例をご紹介。JS無しで各ブログサービスにも導入しやすい、お手軽な方法です。 アイコンのアニメーションについても説明しています。