サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
デスク環境を整える
mizukazu.minibird.jp
レスポンシブサイトでテーブルを実装するならjQuery「FooTable」がいいね！ WordPress-プラグイン「FooTable」とは 「PCサイトでテーブル作ったけど、スマホで見たときはみ出すからCSSで調整しないと！」 「いっそのことPC用とスマホ用二つ作ろう！」 なんてことはよくあるとかないとか。 jQuery「FooTable」なら簡単設定でPC用スマホ用と表示を切り替えてくれるし「ソート」「フィルタ」「ページネーション」も必要に応じて使えるのですごく便利！ PC表示時はスタイル通りの横長テーブルを表示。 スマホ表示時は見せたい見出しを表示して残りは折りたたまれる状態で表示してくれます。 ちなみに「FooTable」は、通常のHTMLサイトでも使えるし、Bootstrapを使用したサイトでも使える css/js もダウンロード出来る。 詳しくは：FooTable – jQue
では「User Role Editor」をインストールして柔軟にカスタマイズしていきます。 ちなみにこの「User Role Editor」はWordPressデフォルト権限グループの各権限変更が出来ますが、新たに権限グループを作成することも出来る。 今回はWordPressデフォルト権限グループはそのままで新たに権限グループを作成して権限を追加していきます。 「User Role Editor」バージョン 4.25.2のプラグインのインストール。 [プラグイン] → [新規追加] 「User Role Editor」で検索してインストール後有効化。 「User Role Editor」バージョン 4.25.2の日本語化。 下記アドレスにある「 user-role-editor-ja.mo 」日本語化ファイルをダウンロード。 バージョンが違いますが日本語化に問題ないです。 http://y
Foundation6を使ってみよう。グリッドシステム編 cssフレームワークといえばやはりグリッドシステムでしょう。 Foudation6 のグリッドも Bootstrap 同様、デフォルトでは12カラムになるようにします。 ブレイクポイントは Bootstrap と異なるので注意ですね。 ユーザーによるグリッド数やガターのサイズ変更など出来ますが、ここではデフォルトの設定を基準とします。 *ブロックグリッド（Block Grids）ついては次回 Foundation6のグリッドシステムについて 横幅は12等分されたグリッド、そのうちいくつ使うかを指定 class=”row” で囲む。（Bootstrap では class=”container” が必要） .small-#, .medium-#, .large-#, というクラスで画面幅に応じて何グリッド使うかを指定する。（#は数字１～
Sass(SCSS)を使ってみよう。導入編 CSSプリプロセッサーを知って数年。 SassかLESSか・・・ Rubyのインストール..コマンドライン..コンパイル..なんか面倒・・CSS3だってろくに覚えてない・・・ そんな風に思ってきたけどやっぱり便利な方がいいし、今時知らないと・・みたいになってきたので。 LESSはSassの機能限定版？みたいな感じのJacascriptベース（SassはRubyベース）で記述もCSSとほぼ同じで覚えやすそうですが、それはSCSSでも同じだし、なによりSass(SCSS)で使えるCompass（Sassを更に便利に使いやすくするためのフレームワーク的なもの）に興味深々。 それとBootstrap3ではLESS・Sass(SCSS)を使っていて、Bootstrap4からはSass(SCSS)になったので、この際Sass(SCSS)を覚えていこうと決心。
Bootstrap3-Navbarの配色を変更してみる Navbarの色をそのまま使う場合はほとんどないと思うので、今後の参考のためにも色変更したときのcssをメモメモ。 Bootstrapのcssはそのままで新たにstyle.cssを作って上書きで、デフォルトのNavbarの色を変更。 http://getbootstrap.com/components/#navbar 例として以下のように。 デモサイトはこちら ＊formは外しています。 /* navbar 全体の背景色とボーダーカラー */ .navbar-default { background-color: #65baad; border-color: #3e6962; } /* navbar テキストカラー */ .navbar-default .navbar-nav > li > a { color: #ffffff; }
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 制作編６ではフッター部を作成。 フッター部左側には会社のロゴや住所などを、右側部分には問い合わせフォームを設置。 スマホでは一列表示となる。 また、最下部にはコピーライト表示をつける。 シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ シングルページ作成 HTMLを記述する
Bootstrap+jQuery Validation Engineでお問い合わせフォームを作成してみた。 Bootstrap の Forms を使って、お問い合わせフォームを作成し、作成したフォームに「j […]
Bootstrapを使ってみよう。フッター編（Sticky footer） 今回はBootstrapで用意されている、フッター「Sticky footer」を利用してみよう。 「Sticky footer」はメインコンテンツ部分の情報量が少なく高さが足りない場合でも画面最下部にフッターを配置できるというもの！ ＊この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。 Bootstrap「Sticky footer」の利用HTML編 Bootstrapのサイトからコピー＆ペーストする。 Bootstrapのサイトの上部グローバルナビメニューよりGetting startedを選択して開く。または、右サイドメニューより「Examples」を展開後「Custom components」をクリックする。 「Custom components」のカテ
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 制作編１ではグローバルナビゲーション（Static top navbar）を設置するところまでの記録。 シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ ＊Bootstrap3.3.4 Bootstrapのファイルはダウンロード済み ダウンロード方法は導入編にて。 シングルペ
Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。 Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。 変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。 制作編７では前回までで一通り完成したシングルページを利用して、ページ下部にスクロールした際によくある「ページ上部へ戻る」ボタンの配置をしてみたい。（jQuery使用、ソースはwebopixel様のを使わせて頂きました） シングルページ制作編 Bootstrap-シングルページ制作編１ Bootstrap-シングルページ制作編２ Bootstrap-シングルページ制作編３ Bootstrap-シングルページ制作編４ Bootstrap-シングルページ制作編５ Bootstrap-シングルページ制作編６ Bootstrap-シングルページ制作編７ シング
Bootstrapを使ってみよう。画像スライド編（Carousel（カルーセル）） 今回はBootstrapで用意されている、JavaScriptを使ったコンポーネント「Carousel（カルーセル）」を利用してみよう。 「Carousel（カルーセル）」は複数の画像をスライド表示してくれるもの。 インジケーターやコントローラーもセットされていてすぐに使うことができる！ ＊この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。 Carousel（カルーセル）の利用方法 まずはBootstrapのサイトで用意されているカルーセルをみてみよう。 Bootstrapの上部メニューより「JavaScript」をクリックしてページ移動後、右サイドメニューから「Carousel」をクリック。 すると「Carousel」のExamplesが表示されている
Bootstrapを使ってみよう。グローバルナビゲーションバー編 前回まででBootstrapを使う準備ができているので、今回はグローバルナビゲーションバー部分を付けてみたい。 とくに難しいことはなくBootstrapのサイトに用意されたHTMLタグを貼り付けるだけでカタチは出来上がるはず。 また、Bootstrapには最初からサイト全体を整えるテンプレートタグも用意されいるが、ひとつひとつ組み立てていきたいと思う。 ＊この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。 Bootstrapのサイトからコピー＆ペーストする Bootstrapのサイトの上部メニューよりGetting startedを開く ページを下にスクロールすると「examples」の項目内に「Navbar」があるので今回はこれを使ってみたい。 （Getting sta
Bootstrapを使ってみよう。ヘッダー編（jumbotron） 前回はサイト上部にグローバルナビゲーションバーを設置。 今回はサイトのメインイメージを与えるバナーを設置してみたい。 Bootstrapでは「jumbotron」というクラス属性を使いコンテンツ幅全体に展開するブロックを作ることができる。 今回はここをヘッダー領域としてイメージ画像とテキストを配置してみる。 ＊この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。 Bootstrapのサイトからコピー＆ペーストする Bootstrapのサイトの上部メニューよりComponentsを選択して開く。 Components画面が開いたら右サイドナビより「jumbotron」をクリック。 jumbotronの項目へ移動するとイメージ画像とタグが表示されているので、タグをcopyボタ
このページを最初にブックマークしてみませんか？
『みずかず | WordPress・Bootstrapなど』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
