たくさんのWebサイトで採用されている固定ヘッダーや固定フッターをBootstrap 4を用いて簡単に実現する方法を紹介します。 固定ヘッダーと固定フッターを設定するにはHTMLやCSS、場合によってはJavaScriptの知識が必要になるので、想像以上に設定が難しいものですが、 Bootstrap 4を利用すればHTMLタグにclassを追加するだけ固定ヘッダーと固定フッターを簡単に設定できます。 Bootstrap 4の利用を前提としているので、まだ準備ができていない人は以下のページを参考にしてください。 https://www.marorika.com/entry/setting-bootstrap 固定ヘッダー、固定フッターとは 固定ヘッダーとは 固定ヘッダーとは、Webページの上部に固定されているヘッダーのことを言います。 スクロールしても上部に固定され続け、隠れずに残った状態と
Webフレームワークとして人気であるBootsrapをみなさん使いこなしているでしょうか。 先日、Bootstrapが正式にバージョン4にアップグレードされました。 まだBootstrapを使ってない人は、正式なメジャーバージョンが発表された今のタイミングに使い始めてみてはいかがでしょうか。 私自身はBootstrapはバージョン3から利用しています。 今となってはBootstrapを使いこなせるようになりましたが、最初は使い方がわからず効率的ではありませんでした。 今回は、Bootstrapを使いこなせていない人に向けてまずは覚えた方が良い2つ使い方について紹介します。 たった2つの使い方を覚えるだけで、Bootstrapがどれだけ便利かがわかると思います。 Bootstrapとは BootstrapとはWeb部品の集まりを提供するフレームワークで、CSSやJavaScriptの詳しい知
ブロック要素は中央寄せにならないので、display: inline-block;でインラインにしてあげます。 margin: autoで中央寄せ margin: auto;を使って上下左右中央寄せにします。 ※中央寄せしたい要素の幅、高さを指定しないと親要素のサイズに合わせて伸びてしまうので注意。 .parent{ border: 1px solid #aaa; position: relative; height: 200px; width: 300px; } .inner{ border: 1px solid #aaa; width: 150px; height: 50px; top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: auto; }
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです! 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います! レスポンシブ対応の柔軟なレイアウトはもちろ
「IcoMoon」や「Font Awesome」はWebアイコン Webアイコンとは、見た目は画像ですが実はフォントという代物です。 これを使う利点は2つあります。 画像を用意しなくてもいい事と、大きさや色を自由に変えることが出来るという事です。 特に後者が有能で、サイトのデザインを変える度に新しい大きさの画像を用意するという煩わしい作業から解放されます。 デザインなんてそうそう変更する事は無い、と思いがちですが日常的にデザインが変わる機会があります。 それはレスポンシブで画面サイズが切り替わる時です。 例えば、注意書きとして以下のような一文を書いたとします。 気をつけて! ここで使っている黒丸のチェックマークはWebアイコンですが、これが画像だった場合スマホ用に文字サイズが小さく切り替わった時、一緒に小さくはなってくれません。しかし、Webアイコンであれば勝手に文字のサイズにピタリと合わ
Bootstrap4が正式リリースした 2018年あけおめムードも落ち着いて来た頃、つい先日(2018/01/18)にBootstrap4が正式リリースの声明を発表した。 ・ありがたいお言葉 https://blog.getbootstrap.com/2018/01/18/bootstrap-4/ ・公式 https://getbootstrap.com/ 全然盛り上がってない気がしてウケた 今やマテリアルデザインのCSSフレームワークなんて充実しまくってるし、選択肢はいくらでもあるし、今更Bootstrapなんて選ぶかよって感じですよ。 正直、筆者も永遠にBeta版なのかと思ってちっとも触ってなかった。 もっと言うとv4 alphaを取り込んでるサイトもちょいちょいあるし、だったら3.3.7でいいよねって思ってた。 中途半端に「マテリアルデザインっぽくしました!」感も否めないし、、、。
HTMLとCSSでグリッド システムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。 カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッド システムを実装するテクニックを詳しく解説します。 かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 グリッドの実装に必要な準備 グリッド システムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step
例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。 否定疑似クラス「:not」の便利な使い方と使う時の注意点(特に優先順位)を紹介します。 On :not and Specificity 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「:not」の便利な使い方 CSSセレクタの優先順位 101 「:not」を含む優先順位 「:not」を使う時の注意点 まずは、「:not」の各ブラウザのサポート状況。 2016年現在、どの環境でも特に問題なく、利用できると思います。 :not などセレクタの各ブラウザのサポート状況 「:not」の便利な使い方 否定疑似クラス「:not」は使い
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか!」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
はじめに JavaScriprで要素のスタイルを普通に変更しようとしても、元々のCSSで !important 指定されている場合変更できないという問題があります。 !important を使うこと自体ナンセンスな部分がありますが、仕事で使う機会があったのでいろいろな方法を挙げてみました。 それぞれの方法を見てみます。 いろいろな方法 それぞれのメリット・デメリットも含めて。 以下のようなHTMLがあるとします。(いろいろ省略してます) <style> #target { background-color: #f00 !important; } </style> <div id="target" style="width: 100px; height: 100px;"></div>
いつも忘れて、毎回どうだったっけって確認するのがめんどいのでまとめておきます。 仕様 参照する仕様は CSS3 とします。(ワーキングドラフトなので、この内容は変わる可能性があります) CSS3 の仕様は以下から探してください site:http://www.w3.org/TR/css3 - Google Search カスケーディングとは カスケーディングに関する言葉の意味は以下に書いてあります。 CSS allows several style sheets to influence the rendering of a document, and the process of combining these style sheets is called “cascading”. http://www.w3.org/TR/css3-cascade/#abstract 超意訳すると CS
※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました! こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 みなさんはGoogle Chromeのデベロッパーツールをご存知ですか? ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。 しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。 僕自身、何度か自分のTw
みなさん、こんにちわ! ジャングルオーシャンのラファエロです!! HTMLのタグには「デフォルトCSS」と呼ばれる、ブラウザに組み込まれたCSSがはじめから適応されているのをご存知でしょうか? 例えば、見出しをh1タグでマークアップするとfont-sizeでサイズ指定した訳じゃないのに大きなフォントサイズで表示されますよね? またliタグにはlist-styleを指定した訳じゃないのに文頭に「・」が付いていたり、pタグにmarginを指定した訳じゃないのにmarginが付いていたり… これがデフォルトCSSなんですが、結局のところ自分で書いたCSSで上書いてしまうので邪魔なんですよね(^^;) さらに面倒くさいのが、ブラウザごとに差異があること… ブラウザごとに見え方の違うWebサイト作るわけにはいかないですよね。 ということで、今回はデフォルトCSSの影響を受けずにコーディングするために
gulp-sassとgulp-sourcemapsを合わせて使ってみます。 サンプルコード gulp-sassとgulp-sourcemapsをインストールします。 npm install gulp-sass --save-dev npm install gulp-sourcemaps --save-dev gulpfile.jsに以下のように記述を追加します。 var gulp = require('gulp'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'); gulp.task('sass', function () { gulp.src('./scss/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.wr
BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような
BEMとは BEMは命名規則など、CSS設計の考え方のアイデアのことです。(構成案) BEMはBlock, Element, Modifierの頭文字をとったものです。 BEM 公式サイトの文章を引用します。 BEM Quick start BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copyin
こんにちは(・∀・) 今日はレイアウトする際に使うと便利なCSS3のbox-sizingプロパティの使い方についてご紹介して行きます。 box-sizingプロパティに関しての解説ページはこちらをご覧ください。 【CSS3リファレンス】box-sizing またflexboxでレイアウトする方法に関しての解説ページはこちらをご覧ください。 【labs】display:flexについて box-sizingプロパティ box-sizingプロパティで指定できる値はcontent-boxとborder-boxの2種類です。 content-boxを指定した場合paddingとborderの大きさは含まないで表示します。要素内容の大きさはwidthで指定したままの大きさで表示され、外側が大きくなります。 border-boxを指定した場合paddingとborderの大きさを含んで表示します。な
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか? これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く