メンバー募集のページを公開しました。

2025年01月06日に作成された記事です。
Cateories: 日常
Tags:

Overview

私たち1%で一緒に活動してくれるメンバー募集のページを公開しました。

Motivation/Context

これから、1%に入った人は全員「こんな人に入ってほしい」っていうのをウェブページにまとめて公開してもらおうかなって思っています。

すでに1%にいる人が、どういう人に入ってほしいのか。
それを書く個人が表現してみるのも面白いかもって思ったからです。

今回は第一弾として、運営者の一人であるボクがページを1つ作ってみました。

ぜひ、ご覧になってみてください。

https://onepercent-kumamoto.github.io/recruit-io

Get Started!!

今回はページを無料で公開しました。
そして、ソースコードもこちらで公開しています。

公開中のソースコード(Github)

どうやって公開しているの?

GithubPagesというGithubで無料でページを公開できる機能を利用しています。
htmlみたいな静的なページであれば無料で公開できるので、初心者の訓練としてはもってこいですね。

ソースコードを公開しても良いの?

今回はhtmlと画像ファイルみたいなシンプルなコードなので全然大丈夫です。
機密情報もありませんので、コピーして利用してもらっても大丈夫ですよ。

また、ソースコードを公開したことで、開発中のcommitややり取りも閲覧できるかと思います。
ぜひ、みてみてください。

どうやって公開しているの?

具体的な公開方法は別記事でご紹介しようと思いますが、ここでは簡単に流れだけ紹介しますね。

  1. Githubアカウントを作成。
  2. リポジトリを作成(公開・非公開どちらでも)
  3. docs/index.htmlを作成。
  4. 設定->Pagesからindex.htmlを公開

ざっくりと、以上のような流れであなたの作ったhtmlを無料でインターネットに公開できます!

なぜほとんどcssを書いていないの?

今回はBootstrapというcssフレームワークを使ってページを作りました。
Bootstrapにはすでに無数のcssが最初から定義されています。

ページ内では、そういったcssクラスを再利用しるので、少ない記述でデザインできるっていう仕組みです。

基本的にBootstrapのクラスだけで賄えるので、とても便利ですね。。

html内に書かれているこういうのがBootstrapのクラスです。

<div class="col-12 col-lg-8 offset-lg-2">

コードはこちら

ちなみに、上記のコードは画面を横に12分割した時に、右と左に2マスずつ空白を作るよっていうレイアウトです。
これにより、すっきりした見た目になりますね。
cssは一切不要ですので、シンプルです!

この記事を書いた人

IO

基本バックエンドなエンジニアですが、デザインとかも好きだったり。 休日はどこかのカフェで何かを勉強してます。 さあ、いろんな話をしましょう! 16パーソナリティは指揮官 (ENTJ-A)です!