ハンバーガーメニューって美味しそうな名前ですね。 よくスマホサイトなんかに使われる事の多い、アイコンをタップすると開閉式でニュっと出てくるナビゲーションの事です。 このサイトでは現在スマホで見た時に使っています↓ 三本線のアイコンがハンバーグ…
JavaScriptでウィンドウを閉じる動作が動かない件について調べてみた内容を解説しています。 window.close();だけで以前は閉じれたウィンドウやタブが現在効かなくなっています。
Web制作で良く出てくる上下中央揃え、天地センタリングの方法を解説しています。 HTML/CSSを使って一番簡単なFlexboxを用いた実装方法を例にしました。 前回、要素の左右中央揃えを解説した続きの記事です。
はてなブログでメニューを表示したいという方向けにカスタマイズ方法を解説しました。 HTML/CSSを用いて横並びのメニューを実装例になるべくコピペで簡単に出来るよう解説。 ブログの上部にナビゲーションは必要か不要かも論じています。
プラグインなしでWordpress以外でもInstagram埋め込み可能な方法を解説しています。 SnapWidgetというサービスを用いた方法でインスタフィードを取得する方法となっています。
前回のTwitterウィジェット埋め込み方法に続きまして、今回はInstagramのワードプレス埋め込みについてご案内します。 前回記事はこちら↓ webabc.hatenablog.jp Twitterの埋め込みは公式でウィジェットが提供されていてとても簡単でした。 Instagramはどうか…
Wordpressでブログを始めた or やってる方、 「ブログとSNSをうまく連携させたい」 今の時代の当然の願望ですよね。 ちょっと前、生徒さんでWordpressにTwitterのツイートやInstagramの写真なんかを埋め込みたいという方がいたのでご案内しました。 すごく簡…
Googleフォームをサイトに埋め込む連載、第三回目です。 前回までの回はこちらから↓ 【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.1 - ABC ウェブエンジニアblog 【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.2 カスタマイ…
Web制作、コーディングで中央揃えがなぜか効かない、、という方へ。 中央揃えの方法についてきっちり理解出来るようインライン、ブロックレベルの違いも合わせて解説しています。 右寄せについても補足説明あり。
Wordpress、非常に手軽なサイト管理/作成ツールですが、PHP/MySQLなどのサーバー環境が必要です。 既に何かしらレンタルサーバーなどご契約されてる方であれば簡単インストール機能などで導入しやすくなってるかと思いますが、 それよりもっとお手軽にWordpr…
私もよく悩みますが、class名って「どうしよう…？」ってなりますよね。 英語強い方ならそう迷わないかもしれませんが、あまり英語に慣れていない方だと困りますよね。 自分だけであればローマ字でも問題なかったりもしますし、場合によってはありですが、案…
CSS3のdisplay: flex;を使いこなせば横並び、縦並び、中央揃え等レイアウト自由自在！コーディングレベルがぐっと上がります。 使い方の基本のご説明から各プロパティ使用まとめも記載。
HTML/CSSはじめたての人がつまづくポイント、要素の重ね方。 通常はhtmlは縦に積まれていくので、要素同士は重なりません。 今回は「position(ポジション)」というCSSプロパティを使って要素を重ねたり、自由に配置出来る方法を図解していきます。 ではやっ…
前回の続きです。 【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.1 - ABC ウェブエンジニアblog 前回ではサイトにGoogleFormsの見た目のままiframeというタグの貼り付けで埋め込む方法を実践しました。 ただそれでは見た目がサイトに合わない…
ホームページ制作を学んでいくとまずHTML/CSSから学んでJavaScriptという流れが一般的かと思います。 ただその流れの中では「フォーム」の見た目の部分は作れても実際の処理は実装は学べません。 よくあるお問い合わせなどのコンタクトフォームは、入力され…
sectionとarticle、ややこしいですよね。 asideはこれらと比べるともう少しわかり易いですが、それぞれシンプルに解説していきます。 section…「章・節」などひとつのまとまりを表す汎用的な分け方。例えば導入部、新着情報、連絡先など。 article…「記事」…
LaravelのEloquent ORMはSQLを意識せずデータベースを扱えてとても便利です。 ただリレーション先のカラムで主テーブルごとソートするのは一工夫必要。 一工夫というかクエリビルダの「JOIN」を使います！ //USERSのリレーション先のPLANSテーブルのTYPEカラ…
「display: flex;」これが使えるようになってFloatは過去のものになってきています。 ウェブの歴史においてデザインの自由度が少なかった時代からテーブルを駆使したレイアウトなどを経て、長らく横並びのレイアウトにはfloatが主流となっていました。 そし…
CSSの基礎、marginとpaddingの余白の違いをしっかり理解する事は脱初心者として重要です。 margin…要素の外側の余白 padding…要素内側の余白 この図のような感じでボーダーを境目に内側がパディング、外側がマージンとなっています。 これはdivやpタグ、h1～…
Laravelで長い文字列を省略したりする時に便利なのがヘルパ関数 5.6までは str_limit() だったんですが、Laravel5.7以降はこちら↓ Str::limit()
レスポンシブや要素が重なり合ってる際など特定の場合にクリックやタップを無効にしたりしたい時がまれにあると思います。 そんな時にCSSでpointer-eventsというプロパティが使えます。 pointer-events: none; これでマウスイベントを無効化します。
ABCウェブエンジニアblogにおける「個人情報の利用目的/広告について/アクセス解析ツールについて/免責事項/著作権について/リンクについて」等を記載しています。
