Webデザインを独学で始める方で、まず何から手をつければ良いか分からない方がいらっしゃると思います。 HTML/CSS等のWebデザイン入門系の参考書を手に取って一通り読み終えても、そこから「独学を進めることが出来ない…」という相談も実際のレッスン生の方…
前回、2020年振り返りということで、アクセスの多い記事をまとめてご紹介しました。 webabc.hatenablog.jp 年明け初投稿の今回も、引き続きまとめ記事シリーズ第2弾。 Web制作を学ぶ上で役立つ記事をなるべく学習ステップ順にまとめていこうと思います。 入…
レッスンの質問への返答や、案件での調べ物などメモがわりに始めた、当ABCウェブエンジニアblog。 10月初旬から2020年の大晦日の当記事執筆時点まで約3ヶ月。ぼちぼち更新して50記事弱となりました。 ３ヶ月のアクセス合計は5000弱。 始めた当初はアクセスも…
Laravelで環境変数を設定する「.env」ファイル。 サイトの基本情報やデータベースの接続情報はじめ、サーバーごとに異なる変数設定を読み込むことが出来ます。 この.envファイルに設定した変数は以下のような使い方で他のファイルで呼び出して使用することが…
Webブラウザ界の問題児Internet Explorer、通称IE。 サイト納品の際に一安心したと思ったら後からIEでの表示がおかしいと、対応に追われるなんてことがよく起こります。 こういった問題が起きないよう、受注の際にブラウザ対応、特にIEについてどこまで対応…
要素を中央揃えや自在に配置したい時の方法としてcalc()関数を使ったテクニックを解説しています。 positionと組み合わせて幅広いレイアウトが可能なので是非ご参考ください。
今回はWebサイト制作・コーディングについて学習し始めて間もない方向けの基礎まとめです。 よく使う基本のHTMLタグやCSSプロパティについてざっとまとめてるので、初心者の方はもちろん 、久々のコーディングでブランクがあるという方にもご参考頂ければ幸…
PHPフレームワークLaravelでは「tinker」という対話型のデバッグ機能が標準装備されています。 $ php artisan tinker こちらのコマンドを使ってターミナル等からLaravelアプリケーションに直接処理をすることが出来ます。 Eloquentクラスやその他のクラスの…
TwitterやFacebookなど大手SNSのアイキャッチともいえるOGPに最適とされる画像の縦横比は何対何がベストなのか。 今回はOGPに設定すべき画像の縦横の比率(アスペクト比)について調査してみたので、記したいと思います。
SEOのひとつに、サイトのURLの正規化というものがあります。 サーバーによって初期設定では同じ内容で別のURLが混在してしまっているので、wwwの有無、SSL接続の有無を統一することを言います。 http://サイト名.com https://サイト名.com http://www.サイト…
ウェブサイト上でユーザーに対して何らかのファイルのダウンロードを促す時があるかと思います。 今回はそういったダウンロードリンクを貼る方法について、記したいと思います。
font-weight: boldが効かない！そんな、思うように文字の太さを調整出来ない時、太字を適用させる対処法「text-shadow」を用いる方法と「ウェブフォント」を用いる方法、２つをご紹介します。
動作が軽快かつ、様々な拡張機能が使えて便利なコードエディタ「Visual Studio Code」、通称VScode。 とても使いやすいですが、たまに予期せぬ動作で困ることもあったりします。 今回はGitLensがサイドバーから消えて困った時の対処法です。
レスポンシブにスマホ対応する際にviewport設定が何故必要なのか、理解するためにはスマホの画面の解像度がどのようになっているか理解する必要があります。 この設定についての理解がおろそかなまま、レスポンシブなコーディングをしようとしていてつまづい…
CSSでは背景にlinear-gradient()関数を用いてグラデーション表現が可能です。 二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。 developer.mozilla.org このグラデーションを応用して、色の変化を急にすることで、斜線やストライプ…
CSSだけで簡単ハンバーガーメニューの実装コード例をご紹介。JS無しで各ブログサービスにも導入しやすい、お手軽な方法です。 アイコンのアニメーションについても説明しています。
多くの方がご愛用の「Googleマップ」。 お店のサイトなど、直接足を運んでもらうような集客が必要なサイトでは是非アクセス案内として掲載しておきたいですよね。 このGoogleマップの埋め込みについては非常に簡単な方法と、Googleの提供している「Google Ma…
2020年現在、Web制作においてCSSでベンダープレフィックスを何につければいいのか質問を受けたので、少し調査してみました。 ベンダープレフィックスとはCSSの比較的新しいプロパティに各ブラウザを対応させる記述です。 「vendor」ベンダー…各ブラウザの提…
aタグのmailto属性を使って件名や本文定型文、CC、BCC入力済の状態でメールソフトを起動する方法を解説しています。WebサイトのリンクからOutlookなどOS標準メーラーが起動するようにできます。
Slick.jsや、当ブログでも解説記事を書いたSwiper.jsなどの便利なスライダープラグイン。 ウェブのフロントエンド制作においては必須クラスに重宝すると思います。 今日も、とある案件作業でlaravelアプリケーションのフロントエンドでサクッと使用しようと…
レンタルサーバーは安定した老舗も良いですが、このところはより高速な「LiteSpeed」採用やWordpress特化型など、新鋭のサーバーも人気になってきています。 例えばよく聞くクラウド型レンタルサーバーだと 老舗エックスサーバーから登場のWordPress専用クラ…
コーディングに用いられるエディタの定番といえばVScode/Brackets/Dreamweaver/ATOMなどでしょうか。 今回はどのエディタでも使えるコーディングが爆速に捗る省略記法、 「Emmet」 を紹介したいと思います。 映画のTENNETに似た感じでエメットと読みます。 T…
たまに、ウェブ上で調べものをしてるとテキストをコピーするボタンってみかけますよね。 「これをコピペしてください。ボタンを押すとコピー出来ます」的な。 「 」こういうアイコンと一緒に表示されてたりもしますね。 通常コピーしたい部分を選択してCtr+C…
前回、スクロールに合わせてふわっと表示させるJavaScriptのライブラリ ｢AOS (Animate On Scroll)｣ について導入、実装について解説しました。 webabc.hatenablog.jp AOSの標準機能だけでお手軽簡単にふわっとフェードインなどの効果が実装出来ますが、今回…
ウェブサイトの見た目は通常、HTMLにCSSのファイルを読み込んで、タグやclassやidによる指定で装飾を施して成り立っています。 HTMLで構造を記述 CSSで装飾を指定 という具合。 その際に、classとidはどう違って、どう使い分けるべきなのか。 Webデザイン勉…
// サイトを印象付ける方法としてアニメーションが用いられているのをたまに見かけると思います。 ページをスクロールさせると、その場所に来たタイミングでふわっとタイトルや画像がフェードインしてきたりするアニメーション等ありますよね。 こんな感じに…
スマホやタブレット対応といえば、CSSで画面幅に応じて要素のスタイルを変更したり上書きするメディアクエリを用いた方法が主流です。 ただ状況によってはJavaScriptでもうまくスマホ/タブレット対応する必要があります。 例えばスマホの場合は余計なファイ…
前回解説したJavaScript製のスライドショープラグイン「Swiper.js」について、カスタマイズ方法をもう少し詳しく見ていきたいと思います。 カスタマイズによっては上の画像のような昔のiTunesっぽいカーバフロースタイルにも出来ます。 導入については前回記…
ウェブサイトではトップ画面などによくスライドショー/スライダーを見かけますよね。 でもHTML/CSSだけではスライダーは実装出来ません。 なるべく簡単に実装できるよう、私もよく利用するSlick.jsやbxSliderなどのプラグインがありますが、jQuery必須だった…
Flexを使って横並びにした要素に均一の左右縦ボーダーを引く例です。 横並びメニューなどでよく左右にボーダーがついてる場合、全ての要素に左右ボーダーとしてborder-leftとborder-rightを指定してしまうと、隣合わせの要素のボーダーが二重になって太くな…
