CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
はじめに Webシステムの開発に携わりたくて転職して9か月，知らない事ばかりで日々勉強しております。 自分の勉強用メモとして知っておくべき技術をまとめようと思いました。 (こちらの記事にインスパイアされたものです) 技術用語について，なるべく2～3行で概要を説明できる事を目指しています。 情報が多過ぎるので，主流な技術は見出しを赤字にしています。(主観強め) また，今後需要が増えそうな技術は青字にしています。(かなり主観強め) とはいえ，新しい技術が登場すれば，数年でトレンドが変わってしまう事も多々あると思います。 ほとんどはあくまでも初心者がネットで情報をかき集めた程度のものです。 誤りがあればご指摘，ご意見など頂きたいです。 ※2023/2/6追記 不正確・不十分だと思った記載はひっそりと随時修正しています。 また，「そういえばこんなんあったな」という項目も追記しています。 あと，自分
どうも！フジグチです！ 今回はCappuccinoのデモサイトに設置している、プロフィールカードのカスタマイズを公開いたします。 「近日中に公開する」とデモサイトに書いていたのですが、まさかのテーマ２作目の製作をするという想定外のことが起きて、自分でそう書いていたことも忘れていました。（小声） せっかく公開するのならと、色々なプロフィールカードのパターンを作ったので、お好きなデザインを選んで使ってください。 この記事のカスタマイズの特徴を以下に挙げます。 この記事の特徴 入力フォームでコードを作成できる その場でプレビュー デザインを１０種類から選べる その場でカラーの変更が出来る ワンクリックでデザインの切り替え ワンクリックでコードのコピー このカスタマイズは、はてなブログに関わらずHTMLを入れることが出来るブログサービス（WordPressとか）であれば、お使いいただくことが出来る
IEがいなくなり安心して使えるようになった CSS Grid Layout (display: grid;)。 みなさん、使っていますか？ これまでに面倒だった記述が楽に書けるようになるのはもちろん、 要素数が増えたり減ったりしてもイイ感じに配置できたり、 ウィンドウ幅が変わってもイイ感じに配置できたりと、 Gridは レイアウトの対応力を高める強力な武器 となります。 Gridの便利さをお伝えするため、Gridの活用例をこれでもかと詰め込んだCodePenのサンプルを作成しました。 （ウィンドウ幅によって変わる仕組みもありますので、ぜひ別タブで開いてご確認ください） この記事では、ここで使用している個別の活用例10個を紹介します。 それぞれの項目の中では、どのようなプロパティで機能を実現しているか説明していきます。 （この記事にはほぼすべてのgrid関連プロパティが登場します！） 1.
【はてなブログカスタマイズ】トップ画面をホームページへ変える方法 - あひるの化粧品と戯れる日記
どうも、化粧品開発者のあひるです。 カスタマイズ系の記事がよく読まれますので、カスタマイズ系の記事を書いていきましょうかね。 なんか悲しいな（笑） 今回は、固定ページ活用、その２です！ その１は、「【はてなブログ】固定ページ活用方法 プライバシーポリシーとお問い合わせの作り方」という記事で書いています。 何度も言いますが、おそらく誰にでもできます（笑） だって、私にできたんですからね。 トップ画面、ホームページ風に変えたくないですか？ はてなブログだと、みんなほぼ同じく、トップ画面は記事一覧ですからね・・・。 少しは自分の色、好みを出してもいいかと思います。 ではでは、どうやってやるのか、ご説明します。 当ブログのホームページ 固定ページをブログのホームページ風へ 固定ページの作り方 サイドバーを消す タイトルと日付も消そう！ ホームページのボックスカスタマイズ 固定ページへのリダイレクト
ハンバーガーメニューの実装方法 それでは実装方法を解説していきます。 HTML <header class="header"> <nav class="global-nav"> <ul class="global-nav__list"> <li class="global-nav__item"><a href="">メニュー1</a></li> <li class="global-nav__item"><a href="">メニュー2</a></li> <li class="global-nav__item"><a href="">メニュー3</a></li> <li class="global-nav__item"><a href="">メニュー4</a></li> <li class="global-nav__item"><a href="">メニュー5</a></li> </ul>
HikoPro こんにちは！大学生クリエイターでWebライター｜エンジニア｜YouTuberとして活動していますHikoProです！ 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています！ Web制作を独学で勉強して月に5万円くらい稼ぎたいけど、どうすればいのか分からない。この通りに勉強すれば、月5万円のWeb制作の案件が受注できる学習マップが欲しい！ このような方に向け、今回の記事では、僕がWeb制作の案件を受注できるまでに学習したことを学習マップにして、0円で公開したいと思います。 HikoPro プログラミング学習歴は1年、フリーランスエンジニアとして独立し2ヶ月目で時給5000円を突破しました！ この記事では、完全未経験（プログラミングが何か知らない人）〜Web制作で月5万円稼げるノウハウが詰まっているコンテンツなので、この通りにやればパソコン音痴の人でも、文系
クライアントからWEBサイト制作の依頼を受ける立場。 自社内にデザイナーがいるためデザインは出来るが、コーディング出来る人がいないため、外注に依頼したい。 もしくは、デザイン・コーディング両方を内政化しているが、リソースが足りないためさばき切れない案件を外注に依頼したい。 以上のように、クライアント直請けではなく制作会社を挟んだ二次受けになる事が多いです。 デザインスキルもあり、WEBサイト制作を一気通貫で行える人であれば、クライアントさんから直請けしやすいでしょうし、仕事の幅も一気に増えると思います。 自分の場合は、凝ったデザインで無かったり既存サイトの改修であれば、クライアントさんから直請けする事もありますが、デザインセンスが壊滅的にないので、基本デザインは行っていません。。 STEP0：制作環境について 制作フローの話の前に、マークアップエンジニアとして案件をこなすために準備しておき
HTMLの3種類のdisplay要素について HTMLの表示形式は主に3つに分かれています。 block inline inline-block 主にこの3つに分かれていて、この3つの特性をよく理解していないと中央寄せにしたい場合などでどうしていいか分からず混乱してしまいます。初学者の段階でしっかりと理解を深めて行きましょう。 block ブロック要素の特徴は3つ 横幅の大きさは文字数で決まらず、端から端まで広がる 自由な高さと幅を指定できる 横並びには出来ない 主な要素としては以下です <h1>~<h6> <p> <ul> <div> <header>,<footer> <section> などなど、文書を覆う一つの塊として扱うという特徴があります。 See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen. このように画
この記事は31億市場!? チャットの作り方[1日コース]の2コマ目の記事です。 今回やること まずはUIをhtmlとcssだけで作っていきます。 内容は初歩的な内容なので、初心者の方以外は読み飛ばてください。 これができると何が良い？ チャットUIを作ることで、チャットに必要なHTMLとCSSの構造がだいたい理解できます。 大枠のhtmlを作る 今回は、まずHTMLとCSSだけでチャットUIを作ってみます。 エディタはVS Code使ってます。 新規ファイルを作成してindex.htmlとします。 コードを入れていきましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
ヘッダーの領域を分かり易くするために、ヘッダーの背景に白（#ffffff）、ボディーの背景にグレー（#e6e6e6）をCSSで設定しています。 どこで書いているかはCSSを書き込む項で出てきます。 ちなみに、背景色を透明にすればダイナミック全画面デザインのファーストビューにも良くマッチします。 ほんの少しの手間でこういうデザインが作れます。 こちらも、記事後半で全コード紹介します。 それでは早速解説していきます。 まずHTMLでヘッダーをコーディングまずheaderタグを書きますhtml5で推奨されている、ヘッダーであること示す「headerタグ」を書きます。 <header> ここにタイトルやナビメニューを書きます </header> h1タグを使ってサイト名を表示ヘッダーの左側に配置する、サイト名をh1タグで囲みます。 タイトルを押すと、サイトのTOPページに遷移するように、h1の中に
【模写コーディング】おすすめの練習サイト【入門編～上級編】
最終更新日 2024.01.28 模写コーディングの練習におすすめのサイトを難易度にあわせて、入門編、初級編、中級編×２、上級編の5つ紹介します。最後に、総仕上げとして実案件をモデルにした練習課題を紹介していますので、ぜひ最後までご覧になってみてください。 【①：入門編】ウォーミングアップ用の模写サイト 【②：初級編】簡単なHTMLとCSSでできるLPの模写サイト 【③：中級編 その１】少し複雑な2カラムの模写サイト 【④：中級編 その２】実務を想定したグリッドレイアウトの模写サイト 【⑤：上級編】jQueryを使用した上級者向けの模写サイト 【⑥：実践編】実案件をモデルにした仮想案件にチャレンジ！ 上記の模写サイトでは、「レイアウト構成の考え方」についても解説していますので、コーディングを始める前に必要なサイト構成の組み立て方についても理解が深まるかと思います。 また、全ての練習課題にX
AWS Support - Troubleshooting in the cloud Workshopをやってみた③
AWS Support - Troubleshooting in the cloudとは AWSが提供するWorkshopの一つで、現在(2024/5)は英語版が提供されています。(フィードバックが多ければ日本語化も対応したいとのこと) クラウドへの移行が進む中でアプリケーションの複雑性も増しています。このワークショップでは様々なワークロードに対応できるトラブルシューティングを学ぶことが出来ます。AWSだけでなく一般的なトラブルシューティングにも繋がる知識が得られるため、非常にためになるWorkshopかと思います。また、セクションごとに分かれているので、興味のある分野だけ実施するということも可能です。 学習できるコンテンツ・コンセプトとしては、CI/CD、IaC、Serverless、コンテナ、Network、Database等のシステムに関わる全てのレイヤが網羅されているので、ぜひ一度
はてブロ読者増加につき今回は、はてなブログカスタマイズネタです。 ヘッダーにグローバルナビゲーションとも呼ばれるいわゆる横並びのメニューを追加してみたのでその方法について。 HTML/CSSで実装するので一般のサイト制作にも応用できます。そういったサイト制作者の方にも読んでもらえると嬉しいです。 そもそもブログにメニューって必要？ 方法を説明する前に少し考察から。 はてなブログでは初期にメニューのような存在はありません。 アメブロとかでもたしかそうですよね。ブログにメニューは不要なんでしょうか。 コーポレートサイトや店舗など一般的にはナビゲーションが必須 コーポレートサイトや店舗サイトなどの場合は、 各サービス案内、商品紹介 会社概要 ブログ的コンテンツ アクセスページ など異なる切り口のコンテンツが存在する場合がほとんどで、ユーザーも目的を持って何かを探して訪れる可能性が高いです。 お店
Stripeを導入するためにStripeのドキュメントを確認したけれどどこから何を始めていいのかわからなかったという人を対象にStripeを導入するために必要な組み込み方法を説明しています。Stripeでオンライン決済といってもプログラミングの得意な人向けの方法から全くプラグラミングがわからない人でもお手軽に導入できる方法まで幅広い方法が提供されています。その上、プログラミングを使って組み込む方法も一つではなくシチュエーションによって利用するAPIが異なるため混乱する人も多いと思いますのでぜひ参考にしてみてください。Stripeの料金体系や成り立ちなどの説明はなく組み込み方法を中心にStripeの基本的な仕組みを理解したい技術者向けの内容になっています。 アカウントの作成 Stripeを利用するためにはStripeのアカウントを作成する必要があります。テスト目的で利用する場合は名前、メール
実践的なWebサイト制作のスキルを身につけるためのコーディング学習サイト「Codejump」のオフィシャルアカウントです。 今回はHTMLを学習中の方向けに、note風サイトの作り方を解説していきます。 本家のサイトを参考にしながら、初級者の方が学習しやすいように、構成を少しシンプルにしてゼロから作ってみました。 JavaScriptは使用せずに、HTMLとCSSだけでコーディングしています。 完成イメージはこんな感じです。 今回はトップページだけですが、学べることは多いのでぜひ最後まで学習してみてください。 ちょっと長いので休憩しながら気軽に進めていってくださいね！ ▼対象者 ・HTMLを学習中の初級の方 ・HTML、CSSの基礎学習を一通り終えた方（Progateやドットインストールなど） ・そろそろ実践的なサイト制作にチャレンジしていきたい方 ▼学べること ・2カラムのタイル型レイア
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
Webシステム開発で関わる技術のまとめ(2022年に知った物) - Qiita
はてなブログ-プロフィールをおしゃれにカスタマイズするデザイン１０選 - フジブロっ！
【CSS】gridでできるこんなレイアウト10選（grid関連プロパティ総ざらい）
【ハンバーガーメニュー＆トグルニュー】クリックすると表示されるグローバルナビの実装方法
【独学でWeb制作】月5万稼ぐための学習マップ【0円！未経験でもOK】
駆け出しマークアップエンジニアのためのWebサイト制作フロー - Qiita
HTML/CSS block,inline,inline-block とは？ - Qiita
ゼロから作る、簡単WebチャットUIの作り方 - Qiita
HTML+CSSで作る定番のヘッダーデザインをサンプル付きで解説
【はてなブログ】ヘッダーに横並びのメニューを表示させる方法 - ABCウェブエンジニアblog
オンライン決済Stripe(ストライプ)を導入するための組み込み方法の基礎 | アールエフェクト
【無料コーディング練習】note風サイトを作ってみた｜Codejump【旧Codestep】