サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.riarise.com
現在「Bootstrap 3」で制作されているサイトは多いと考えられますが、果たして「Bootstrap 4」へのバージョンアップは可能なのでしょうか。簡単な検証をしてみたいと思います。 ※2015年8月24日現在、Bootstrap 4 alphaが発表されたばかりであり、この検証の正確性は保証しておりません。 Bootstrap 3 から Bootstrap 4へのバージョンアップ検証方法 下記の方法で検証してみたいと思います。 「Bootstrap 3.35」のComponentsとJavascriptのページからHTMLソースをダウンロードし不要なソースを削除。 Bootstrap 4 alphaのCSSとJSをそのページで読み込みます。CSSとJS読み込みはなるべく正確になるように、CDNから読み込みます これで簡単な検証が可能ですね。 検証してみましょう Bootstrap 3
Vol.1 – Bootstrap4に学ぶ、アクセシビリティ(WAI-ARIA)対応のレスポンシブWebサイト制作 Bootstrap4 alphaが発表されたので、それをベースにアクセシビリティ対応(WAI-ARIA)の勉強をしていきたいと思います。 ※Bootstrap4 alphaについての概要・変更点などについては「Bootstrap 4 alpha発表！SASS、ECMAScript6などに刷新！」の記事をご覧ください。 まずは、Button Groupで利用されているaria-labelとaria-labelledby まずはButton Groupのソースコードから。 <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button"
Bootstrapは大変便利なものですが、ちょっとしたCSSを追加するともっと便利に利用できるようになります。 今回はBootstrapのグリッドシステムの溝（gutter）を複数設定できるようにします。 1.グリッドシステムに対して、溝の設定を追加する 追加するCSSコードは下記のコードです。（BootstrapのCSSは既に読み込まれている前提です） /*溝幅 20pxの場合*/ .gutter-20{ margin-left:-10px; margin-right:-10px; } .gutter-20 > [class*='col-'] { padding-left:10px; padding-right:10px; } /*溝幅 10pxの場合*/ .gutter-10{ margin-left:-5px; margin-right:-5px; } .gutter-10 > [c
[vc_row][vc_column][vc_column_text]Wordpressでサイトを制作する際に「ここは後で設定でカスタマイズできるように構築したい」というご要望をいただくことが多いです。 そんなときに役に立つのが「Option-tree」というプラグインです。このプラグインを利用すると簡単にテーマ用の設定が可能になります。設定した項目は、テンプレートから簡単に利用できるようになっています。Advanced Custom Fieldsは投稿においてカスタムフィールドを実現しますが、そのテーマ版というとイメージがつきやすいかもしれません。 利用方法は以下のとおり簡単です。 1.Option-treeのインストール プラグイン > 新規追加画面で「Option-tree」と入力してプラグインを検索しインストールしてください。有効化すると左のメニューに「OptionTree」と表示
Bootstrapは大変便利なものですが、ちょっとしたCSSを追加するともっと便利に利用できるようになります。 今回はBootstrapのグリッドシステムをセンタリングします。 1.基本的なBootstrapのグリッドシステムの拡張 追加するCSSコードは下記のコードです。（BootstrapのCSSは既に読み込まれている前提です） .row-center{ text-align:center; letter-spacing:-0.4em; } .row-center > [class*='col-'] { display:inline-block; letter-spacing:0; vertical-align:top; float:none !important; }
このページを最初にブックマークしてみませんか？
『RiARiSE - WEB制作（Wordpres、Elementor）京田辺市 全国リモート対応』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
