環境構築からWEBアプリ開発・スマホアプリ開発まで。ときには動画制作やゲームも。

supilog
すぴろぐ

【Bootstrap4入門】05.メインコンテンツ-4カラムのグリッド

bootstrap-image

前回、メインコンテンツ部分のカード型のお知らせ枠を作成しました。だいぶWEBサイトとしてまともな見た目になってきましたね。 今回挑戦するのは、ココの部分。一見すると、カード型と同じような配置に見えますが、グリッドという便利な機能を使って、コンテンツを並べています。 グリッドを使ったデザインを入れる Bootstrapの […]

【Bootstrap4入門】04.メインコンテンツ-お知らせを作る(カード型)

bootstrap-image

前回、メインコンテンツ部分のトップ画像を作成しました。少しページがにぎやかになってきましたね。 今回挑戦するのは、ココの部分、サイトのお知らせやニュースみたいなパーツで使われがちな、カード型のパーツを並べてみたいと思います。 お知らせを作成する まずはcontainerを配置して、タイトルをつける 前回勉強したcont […]

【Bootstrap4入門】03.メインコンテンツ-トップ画像を作る

bootstrap-image

前回、ヘッダ部分のナビゲーションバーを作成しました。今回はいよいよメイン部分を作成してみます。メインコンテンツの中でも一番目立つトップ画像です。 トップページに目立つように配置する大きな画像をヒーロー画像と呼んだりしますが、今回はそこまでのものではなく、挨拶程度の横長の画像を配置してみます。 トップ画像の配置 画像ファ […]

【Bootstrap4入門】02.ナビゲーションバーを作る

bootstrap-image

今回から実際にコンテンツを作成していきます。今回作るのはナビゲーションバーです。この部分です。 大枠を作成(header, main, footer) まず始めに、前回作成したindex.htmlを開き、以下のようにheaderタグ、mainタグ、footerタグを配置しましょう。(Hello World!!の文字は削 […]

【Bootstrap4入門】01.まずはBootstrapの導入

bootstrap-image

入門などとえらそうな事を書いておきつつ、自分の復習用のメモでもありますが、勉強してみたいという要望があったので、書いています。バージョンは5でも良かったのですが、まだリビジョンが浅かったので、今回は安定の4.5.3を用います。本講座では、簡単なデザインのHTMLを1枚、Bootstrapを使って完成させてみたいと思いま […]

Let’s EncryptでSSL証明書発行(CentOS7/nginx)

「Let’s Encrypt」を利用してSSL設定をしていきます。無料です。以前と違って、どのようなサイトを作る場合でも暗号化は必須なので、割とお世話になると思います。 前提 お持ちのドメインのDNS設定が完了してあるものとします。今回は、yourdomain.example.comというドメインを指定したものと仮定し […]

【初心者向け】サーバーを立てたら、まずやること(3)-おまけ【CentOS7】

1と2でログインまわりの設定を行いました。残り作業はおまけとして、今回ざっと書いてみます。「おまけ」とはいえ、やったほうが良い作業! その他の作業(おまけ) yum update すでにインストールされているパッケージは全て最新にしてしまいます。環境によっては、少し時間がかかります。 SELinux セキュリティの問題 […]

【初心者向け】サーバーを立てたら、まずやること(2)-SSHログインポート変更【CentOS7】

SSHはデフォルトでは22番ポートが使用されますが、攻撃対象にされやすいので、問題がなければポートを変更します。ダイナミック/プライベートポート(49,152〜65,535)の中で選びましょう。今回は、テキトウに「50326」にしてみます。 また、設定ファイル(sshd_config)には他にも修正ポイントがあるので、 […]

Let’s EncryptでSSL証明書自動更新(CentOS7)

Let’s Encryptの証明書は90日間の有効期限なので、定期的に更新をする必要があります。インストール手順で、certbotをインストールしていると、そのままタイマーが使える設定も配布されているので、それを使って自動更新の設定していきます。 自動更新設定 設定ファイルはこちら ファイルはこちらにあります。確認して […]

Let’s EncryptでSSL証明書発行(CentOS7/apache)

みんな大好き「Let’s Encrypt」を利用してSSL設定をしていきます。無料です。以前と違って、どのようなサイトを作る場合でも暗号化は必須なので、割とお世話になると思います。 前提 お持ちのドメインのDNSレコードにて、Aレコードが設定してあるものとします。(このアドレスにアクセスしたら、このIPアドレスに遷移す […]