表示されない場合うまく更新できていないファイル名が正しくない表示内容をよく見てみるいろいろ作ってみる最後に次の記事こんばんは、たねやつです。多忙につきあまりこのシリーズ更新が出来てません。いっても深く理解する必要はなくちょっとだけ使うという感じです。それだけでもグッとサイトが作りやすくなります。簡単にできるという代物です。用語を説明してみましょう。フレームワークCSSについては以前のボタンを作成した時に少し触れました。WEBサイトのデザインを担当してくれる部分です。一行のコードで実行できるようにまとめたコード群のようなものです。同じフレームワークを導入する限り、同じコードで同じ結果を取得できるのでソースコードを使いまわすのが容易になります。スマホなど)で同じようなデザインを反映できるような表示の仕方です。ブラウザの幅を縮めていくとある地点からりんごマークしか表示されなくなると思います。画像も横に広い画像から、縦に長い画像(スマホ向け)に変わると思います。このような感じで画面の幅を認識して、レイアウトが自動的に変わるような表示形式がレスポンシブ表示です。ちなみにこのたねやつの木はレスポンシブなデザインではありません。PCの場合とスマホの場合とで全く違うデザイン定義を使用しています。(色やヘッダーの色などは可能な限り近づけています。)いつかは自分のテンプレートでレスポンシブなブログにしようと思ってはや半年が経ちました(笑)覚えるべき点Bootstrapの以下の2点さえ抑えられれば、それなりのレスポンシブ表示ができるようになります。paddingをよく考えるただ絵で説明する技術が無いので、ココは先人のキレイな解説を読みましょう!このページの「グリッドシステムの使い方」という見出しの部分に12分割の考え方について書いてあります。今回の連載ではそこまで手の混んだレイアウトにはしないので、col系のタグの書き方をよく理解しておけば問題ないです。私も結局このページぐらいしか勉強しておらず、後は試行錯誤で作って覚えていくという感じでした。Bootstrapを導入まずは、公式サイトからファイルをとってきます。一部ソースを書き換えたい部分があるので、ローカルに保存して進めていきます。以下のページからダウンロード。古いバージョンになってしまいますがご了承を。Bootstrapの部分をクリックすると、ファイル群をダウンロード出来ます。解凍していつもの/var/www/html/にFFFTPやその他の方法で置きに行きましょう!以下のような感じで配置します。js置けたでしょうか?コレで導入自体は完了です。結局はただのCSSファイルなので置くだけぽんです。ページを作成する今おいたBootstrapを読み込んだhtmlページを作成します。以下のようなHTMLファイルをbootstrapのフォルダをおいた場所と同じところに置きます。名前はbootstrap.htmlとしておきましょう。</body></html>内容について解説ほとんどは以前のHTMLテンプレートの紹介の記事で書いたものと同じです。おさらいしておきましょう。href="./bootstrap-3.3.7/css/bootstrap.css"/>この部分でBootstrapのCSSフレームワークを読み込んでいます。あとあとこのbootstrap.cssファイルを少し触ります。href="./stylesheet/style.css">ほとんど同じような内容ですが、こっちは自作のCSSファイルを読み込んでいます。CSSは基本的には後から読み込んだ内容が優先されるので、BootstrapのCSSファイルよりも後に記述するようにします。後々このCSSファイルを作成していきます。src="./bootstrap/js/bootstrap.min.js"></script>よく理解は出来ていませんが、この4行はBootstrapを使う上で必要なもののようです。追加しておきましょう。jqueryははてなブログのカスタマイズでもよく使われるjavascriptフレームワークという感じです。ページにアクセスする作成できたらページにアクセスしてみましょう。アクセスできるはずです。中身は以下のような感じかと思います。わかりやすいようにCSSを追加していきます。先程のHTMLファイルの中で既に、自作CSSファイルの読み込みと、書くタグへのCSSの反映は完了しています。後は参照先のCSSのファイルを作成するだけです。bootstrapフォルダのある場所(/var/www/html/)に新たにstylesheetというディレクトリを作成します。その中にstyle.cssという名前のファイルを作成します。どちらも任意の名前で構いませんが、名前を変更した場合、HTML内で読み込んでいる部分の名前も変更してください。ファイルが作成できたら、以下の内容をstyle.cssへ書き込みます。/*背景色*/}ざっくりと以下のページの内容を参考にしています。CSSの記述についてですが、{}内のアイテムの順序は基本的には考えなくても大丈夫です。順番を揃えておくほうがわかりやすいです。文字以外に関する内容(最後に)背景色に関する内容といった感じで内容を揃えています。以上の内容をstyle.cssに追加して再度ページを表示(更新)してみると、、、こんな感じに表示されていると思います。以下のような理由が考えられます。うまく更新できていないページのキャッシュ(履歴のようなもの)が残っていて、新たに反映した変更が適応されない場合があります。他のブラウザでも大丈夫です。スマホでアクセスしている場合は、一旦ブラウザアプリを閉じて再度開くとページを再取得します。ファイル名が正しくない自作CSSのファイル名、もしくはそこのたどり着くまでのパスがおかしい可能性があります。bootstrap.htmlと同じ場所のあるでしょうか?表示内容をよく見てみる先程の作ったHTMLページです。<p>col-3</p></div>がそれぞれの四角形を作り出しています。col-xs-*で指定した数値/12の大きさの四角形が生成されているのがわかります。一行が12をどんな大きさでもOK(col-xs-1を12個とか)なので結構レイアウトが作りやすいんですよね。...></div>が一つの塊になっていて、class="..."でその塊の大きさなどを指定しています。<p>は以前にもやりましたが、文字列を表示するタグですね。この勢いで画面を分割して色々作っていきます!ちなみに、冒頭で説明していたレスポンシブ表示をココで試すことが出来ます。<p>1</p></div>とすれば、の下のような感じにできます。発展になるかもしれませんが、<div>を入れ子にして使うことも出来ます。これの上のような感じに横幅10の要素の中に、横幅3の要素を4つ配置しています。配置させることができます。コードとしては以下のようになります。</div></div>以上で基本的な使い方は終了です。つぎの記事からいよいよサイトを作成。Linux上でのファイルIN/OUTやSQLサーバーを建ててそこと連携というようなことが盛りだくさんな状態であり、かなり記事化するのが困難な字状態です。Windows間の差異(主にパスの区切り文字)を吸収しきれなく、環境構築も完了していない状態となっています。(なにか問題発生時には直ソースをvimで修正するというかなり怪しい運用です)ですので、以降の記事ではそんな中でも使えそうなモジュール単位で記事にしていこうと思います!例えばRSS配信しているサイトの最新記事を10行分表示するページやLinux上のシェルスクリプトを実行するなんかです。bootstrapの導入)Tweet関連記事2019-03-16【Node.js】foreverコマンドの基本的な使い方まとめ(過去に書いた記事を大きく修正してまとめなおしたものです。mini3(黒豆)を制御するExpressでAPIサーバーを作成しpython-broadlinkを実行できるよ...2018-10-10HTML/CSS/JavaScriptでAndroid/iOSアプリをつくる。Onse...2018-09-04QMKのビルド環境構築こんにちは、たねやつです。最近、tada68という自作キーボード...2018-06-0710年ぶりの復活。こんばんは、たねやつです。自作キーボードについていろいろ書いています。84を2年ほど使ってみた感想・打鍵音など。2019-12-14はてなブログの埋め込みコードの配色(背景・文字色)を自由に変更する2019-12-11イルミナイト万博(2019)行ってきました。背景を元に戻すAdはてなブログをはじめよう!ibuquicalligさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。