サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
taneppa.net
画像を使わないので、サイズやカラー変更もできて便利です！コピペでも使えますので、ぜひ使ってみてください。 はじめに ベースとなるHTML、CSSはこちらになります。（※CSSリセット済み） <ul> <li>テキストが入ります。<br>改行しました。</li> <li>テキストが入ります。</li> <li>テキストが入ります。</li> </ul> <style> ul{ font-size: 14px; line-height: 1.5; } li + li{ margin-top: 5px; } </style> 丸 塗りつぶし テキストが入ります。 改行しました。 テキストが入ります。 テキストが入ります。 <style> li{ position: relative; padding-left: 15px; } li:before { content: ""; position:
ベースになるHTML・CSS はじめに、下記のようなレイアウトを作ります。 テキストと写真をまとめて<li>で囲み、その部分に「display: flex;」をかけて横並びにしています。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。テキストが入ります。 テキストが入ります。テキストが入ります。 <style> ul { max-width: 600px; } ul li { display: flex; align-items: center; } ul li .photo, ul li .txt { width: 50%; box-sizing: border-box; } </style> <ul> <li>
borderを使った方法 borderで三角形を作る仕組みを利用して、セクション間に配置する方法です。 セクションに擬似要素（before,after）で三角形を作ります。 背景画像を使った方法と同じく、ブラウザサイズによって、三角形の形が多少伸縮するので、角度が変わると困る場合は 気をつけてください。 ※三角形の作り方が よくわからない人は、「三角形の作り方」を書いているページがあるので、ご覧ください。 「CSSで三角形をつくる方法 | たねっぱ！」 <div class="section1"> <p>コンテンツ</p> </div> <div class="section2"> <p>コンテンツ</p> </div> .section1, .section2{ /*レイアウト用のCSS*/ padding: 50px; } .section1{ position: relative;
以前は、高さを揃えるためにjQueryを使ったり、cssで作るにしても少し手間がかかりましたが… Flexboxなら簡単に実装できるので紹介します。 以前は、高さを揃えるためにjQueryを使ったり、cssで作るにしても少し手間がかかりましたが… Flexboxなら簡単に実装できるので紹介します。 今回は、コンテンツ量の異なるボックスを用意して、高さを揃える。 それから、ボックス内の下にボタンを配置するよくあるレイアウトをFlexboxで作ります。 Step1. Flexboxを使って高さを揃える １）今回は「li」の高さを揃えたいので、その親要素ulに「display: flex;」を追加するだけ！ (高さを揃えるプロパティはalign-items: stretch;ですが、flexを使うと初期値で設定されているので省いてます。) liが横並びになり、高さも揃います。 ２）さらに、「ju
リストの最後の行だけ、○○したいんだけど・・ と悩んでしまった人＆いつか悩むかもしれない人へのTipsです♪ ※サンプルのHTMLは、背景色付きのliを並べただけです。 最後の行だけ適用しよう（２列の場合） ２列の場合は、最後の行の要素が１つor２つの時では指定方法が変わりますよね。 １つで固定の場合はlast-childだけで大丈夫です。 どちらになっても大丈夫な指定をするなら、 last-childで一番最後にある要素を指定し、 さらに最後から２つめの要素が奇数ならその要素を選択する…という指定ができればOKです！ <style> /* 最後の要素 + 最後から２つ目のliが奇数の場合、その要素 */ li:last-child,li:nth-last-child(2):nth-child(odd) { background-color: pink; } </style> 最後行が１つ
background-imageを使ってレスポンシブ？ 例えば、写真の上にテキストやイラストがのっているときに、 その写真の比率を保ったまま可変することが、できるようになります。 サンプル サンプル写真をbackground-imageで表示し、 横幅100%でレスポンシブしてみました。 （実際にブラウザのウィンドウを縮めたりしてみてくださいね） <div class="box"></div> <style> .box{ width: 100%; height: 0; /* (画像の高さ / 画像の横幅) × 100 */ padding-top: 66.6666666667%; background: url(画像のパス); background-repeat: no-repeat; background-position: center center; background-size:
sass / scss / cssコーディングで使用できるものに限定した、Emmetおすすめショートカット一覧です。 皆さんはEmmetを使っていますか？ Emmetチートシートという便利なものもありますが、 実際に使っているのは、この中の一部だったりします。。 ということで、 今回はsass/cssコーディングで使用できるものに限定し、 その中でもオススメを紹介します！ ちょこっと応用編もありますので、合わせてチェックしてみてください。 早速紹介していきます〜 おすすめショートカット（基本編） ※コマンドに使用している「：」は省略できます。 display コマンド 展開後
pngquantで圧縮した画像がMacのFirefox/Chromeで暗くなるという問題の原因と解決法に関してご紹介したいと思います。 自分はタスクランナーとしてGulpを利用しており、png画像の圧縮にはpngquantを使っているのですが、先日「MacのFirefoxとChromeだけ圧縮したpng画像の色が暗くなる」という状況に遭遇してしまいました。 色々調査した結果、原因と解決法がわかりましたので、今回はそれに関してご紹介したいと思います。 結論 Gulpでpngquantを使用する場合は以下のようにgulpfileを書いているかと思います。 var gulp = require('gulp'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); gulp.ta
WEBサイトの運用・保守時や大規模サイトの構築時には致命的になりかねないそんなモジュールのスタイルのバッティング問題。その解決方法の１つである「BEM」に関して今回はご紹介したいと思います。 複数のページに共通して登場するデザイン（以降モジュールと呼びます）のCSSを共通CSSファイルに書いたら、ページ毎のCSSとバッティング（名前が被ること）して困った経験は無いでしょうか？ WEBサイトの運用・保守時や大規模サイトの構築時には致命的になりかねないそんなモジュールのスタイルのバッティング問題。その解決方法の１つである「BEM」に関して今回はご紹介したいと思います。 具体的な例を上げて説明 モジュール作成 例えばこのようなパーツのデザインカンプがあったとします。 このデザインは複数のページに登場するため、モジュールとしてHTMLとCSSは以下のように記述したとします。 <div class=
レスポンシブサイトでは「ブラウザ幅によってレイアウトが切り替わる」という特性からほぼ毎回必要になるようなJSの処理があります。今回はその処理に関してご紹介したいと思います。 レスポンシブサイトの案件が最近多く、作っている中で「ブラウザ幅によってレイアウトが切り替わる」という特性からほぼ毎回必要になってくるJSの処理が固まってきました。 そこで今回、僕自身がレスポンシブサイトを作成する際にどのようなJSを準備として毎回書いているかご紹介したいと思います。 現在のレイアウトの状況を判別する関数の作成 レスポンシブサイトを作成していると、「スマホレイアウトの時だけこの処理をしたい」といったような、現在のレイアウトの状況を取得したい場面が頻繁に登場します。 そのため、以下のようなコードをいつも記述しています。 CSS #MqMark { display: none; } @media (min-w
色々なサイトを見て回っていると、GoogleMapのデザインがグレースケールだったり、マーカーが普通と違うデザインになっていたり、カスタマイズされたGoogleMapを利用しているサイトをよく見かけますよね。今回は、GoogleMapをカスタマイズする方法を、グレースケール&オリジナルマーカーのデザインを例としてご紹介したいと思います。 ※※※※※2017年6月 現在 Google Map APIの利用のために API KEY取得が必要になっております。 色々なサイトを見て回っていると、GoogleMapのデザインがグレースケールだったり、マーカーが普通と違うデザインになっていたり、カスタマイズされたGoogleMapを利用しているサイトをよく見かけますよね。 今回は、GoogleMapをカスタマイズする方法を、グレースケール&オリジナルマーカーのデザインを例としてご紹介したいと思います。
「デバイステキスト使って好きなテキスト入れれるようにした上で、左揃えのままセンタリングしたい」なんて状況がよくあります。そんな時にどういうふうにコーディングすればいいのかご紹介したいと思います。 左揃えのまま中央寄せ？？ もう正直何言ってんだお前的なタイトルですが、要はこういうパターンです。 こんな風に「デバイステキスト使って好きなテキスト入れれるようにした上で、左揃えのままセンタリングしたい」なんて状況結構あります。 自分がマークアップ初心者の頃は、こんなレイアウトは出来ないものと勝手に思ってたのですが、実は簡単にできちゃいます。 どうするかというと、inline-blockの特性を活かしてやっちゃいます。 実例 実際のソースコードは以下のとおりです。 ソースコード <style> .wrapper { max-width: 300px; margin: 0 auto; text-ali
javascriptにはイベントのバブリングという概念があります。この概念を知らないと、理解不能な状況に陥る事があるので、今回はバブリングを紹介したいと思います。 javascriptにはイベントのバブリングという概念があります。 この概念を知らないと、理解不能な状況に陥る事があるので、今回はバブリングを紹介したいと思います。 バブリングとは？ バブリングとは、「ある要素でイベントが発生した際に、親や祖先要素にも同じイベントが発生する事」です。 上の画像のように、子要素をクリックしてclickイベントが発生すると、その親要素、祖先要素でもclickイベントが発生します。 具体例 以下の例では、表示されている3つのボックスが親子関係で、それぞれにclickイベントを設定し、クリックするとアラートを出すようにしています。 ここで、ChildBox(青色のボックス)をクリックすると、ChildB
CSSの:before,:afterは他のものとは違う独特の動きをしており、初心者が理解し難いため避けられがちな内容かと思います。今回は、そんな:before, :afterを初心者でも出来るだけわかりやすいようにご紹介したいと思います。 CSSの:before,:afterは他のものとは違う独特の動きをしており、初心者が理解し難いため避けられがちな内容かと思います。 今回は、そんな:before, :afterを初心者でも出来るだけわかりやすいようにご紹介したいと思います。 本記事の対象者 本記事は、以下の3点を全て満たす方を対象として書かれています。 HTML/CSSの初心者 :before,:afterを理解していない、または初めて名前を聞いたという方 インライン要素、ブロック要素を理解している(まだよくわかってない！という方はこちらで勉強しよう！) :before, :afterの
Wordpressの超有名パッケージ「Advanced Custom Fields」。それを更に柔軟にしてくれる拡張パッケージ「Flexible Content Field」の使い方を今回はご紹介したいと思います。 Flexible Content Fieldとは？ Advanced Custom Fields（以下ACF）は便利なのですが、予め設定しておいた数・種類・順番でしか入力出来ないのが難点です。場合によってパーツの数や種類、順番が変わるようなページはそもそも実現出来ないか、出来ても非常に使いづらい管理画面になってしまいます。 そんな難点を解決するのが拡張パッケージであるFlexible Content FieldやRepeater Fieldsです。 注意としては、有料パッケージな点です。といっても各パッケージ$25AUD（記事記述時点）で現状のレートで2000円前後の価格ですの
jQueryを使っていると、頻繁に要素のサイズや位置を取得する機会があります。サイズや座標を取得する関数は複数あって「どれがどこのサイズ、座標を取得するの？」ってごっちゃになりがちなので、今回はサイズ、位置関係のそれぞれのjQuery関数の違いなどをまとめて紹介したいと思います。 jQueryを使っていると、頻繁に要素のサイズや位置を取得する機会があります。 サイズや座標を取得する関数は複数あって「どれがどこのサイズ、座標を取得するの？」ってごっちゃになりがちなので、今回はサイズ、位置関係のそれぞれのjQuery関数の違いなどをまとめて紹介したいと思います。 目次 サイズ取得関係の関数 サイズ取得の基本 ページ全体のサイズやブラウザサイズを取得したい 要素の座標の取得方法 座標取得の基本 番外編：offsetParentってoffsetと関係あるの？ スクロールした距離を取得する方法
「マウスホバーで開閉するナビをjQueryで作ったものの、カーソルを連続で往復させるとカーソルを止めてもしばらくナビが開閉し続けてしまう」なんて状況に遭遇したことはないでしょうか？今回はそんな問題の解決法に関して原因とともにご紹介したいと思います。 「マウスホバーで開閉するナビをjQueryで作ったものの、カーソルを連続で往復させるとカーソルを止めてもしばらくナビが開閉し続けてしまう」なんて状況に遭遇したことはないでしょうか？ ちょうどこの前そんな状況に遭遇したので、今回はこの問題の解決法に関して原因とともにご紹介したいと思います。 問題のあるパターン 「カーソルを乗せると開き、カーソルを外すと閉じるナビ」なんてものを作ろうとした場合、最初に思いつくのは以下のようなコードかと思います。 ソースコード $(function() { var $subNav = $('.subNav'); $(
今回論理プロパティ（margin-startとか）は説明に入れません。(IE8以前は未対応だし。。。またおまえかIEたん;) これは後日「【CSS】marginについてちょっと本気出して説明してみた」にて詳しく説明いたします。 ではまず、ボックスモデルを確認してみましょう。 このように、marginとは要素の外に対するものなのです。 なので、たとえばdivに背景色を付けていても、marginは外の間隔のことなので、marginの領域にそのdivの背景色は付きません。 なんのこっちゃ抹茶に紅茶な方は、borderやbackgroundを付けてみましょう。 実際にやって見るとよくわかります。百聞は一見に如かずです( ｰ`дｰ´)ｷﾘｯ ではもっとわかりやすくするため、divを並べてみましょう。 <style> .contBox { width: 480px; padding: 25px 0;
jQueryでチェックボックスやラジオボタンの状態を取得しようとする時、attr関数では上手く取得することが出来ません。そこで今回はjQueryでのチェックボックスやラジオボタンの状態を取得する方法に関して説明したいと思います。 jQueryでチェックボックスやラジオボタンの状態を取得しようとする時、最初は $('#TargetID').attr('checked') で取得しようとしたのですが、この取得方法には問題がありうまく状態を取得することが出来ませんでした。 そこで、今回はjQueryでのチェックボックスやラジオボタンの状態を取得する方法に関して説明したいと思います。 取得方法 まず、結論として取得する方法を紹介します。 方法は下記の2通りです。 $('#TargetID').prop('checked') $('#TargetID').is(':checked') 両方共、チェッ
iOS8では改善されましたが、iOS7以下でスクロールイベントを取得したいという状況も結構発生するかと思います。そこで今回はiscroll-probe.jsを使用して、スクロールイベントを擬似的に取得する方法をご紹介したいと思います。 以前はiOSではスクロール中はスクロールイベントが発生せず、スクロール終了時にイベントが発火されるという仕様でしたが、それがiOS8になり改善され、スクロール中にもイベントが発火されるようになりました。 ただ、まだiOS7使用者が無視できない割合で居ることから、案件の対応OSにiOS7が入ることも多く、iOS7以下でスクロールイベントを取得したいという状況も結構発生するかと思います。 そこで、今回はiscroll-probe.jsを使用して、スクロールイベントを擬似的に取得する方法をご紹介したいと思います。 iScroll5ライブラリの取得 iScroll
どうもおはこんばんちわ、暑がりで寒がりな面倒くさいやつ…やのっぱです(´・ω・｀)おほー 今回はお役立ち記事が [...] どうもおはこんばんちわ、暑がりで寒がりな面倒くさいやつ…やのっぱです(´・ω・｀)おほー 今回はお役立ち記事が思い浮かばないので、装飾つくって遊んだだけです。 こういうのお好きな方は参考にしたり、もっとこうしたほうがいいよね…など考える材料にしたりしていただけると幸いです。 なお、今回IE9～6は無視してます。border-imageなどがIE10以降実装になってるからですね。 IEでも表示したい！って方はCSS3 PIEやcssSandpaperを使って対応させると良いですよ(´・ω・｀)ｂ 今回写真は「ぱくたそ」さんから拝借いたしました。 写真のチョイスは僕の趣味ですｗ 包まる娘っていいよね♪(´・ω・｀) それではちょこちょこやっていきましょう！ まずは、bor
※以前はクリックした回数に応じて処理を変更出来るtoggleというイベントが存在しましたが、jQueryバージョン1.9で削除されました。 [クリック関係あるある]右クリック、左クリックを判別したい ある範囲内でマウスクリックした際に、左or右クリックによって動作を変える必要がある場合、以下の問題に直面します。 どうやって左or右クリックを判別するか 右クリックした際に出るコンテキストメニューを出したくない場合どうすればいいか 「１」に関しては、 $('#IdName').on('mouseup', function(e) { // e.whichには // 左クリック: 1 // 中クリック: 2 // 右クリック: 3 // が入っています。 console.log(e.which); }); のように、e.whichで判断する事で解決できます。 「２」に関して、何も対策していないと右
さて、今回はこちら【display:table;】です ここでは【display:table;】とそれに付随する【display:table-cell;】などもあわせて一挙にご紹介します。 前回での流れ通り、この値を与えると強制的にtable要素のようにかわります。 tableとその中のcellをdivなどを使ってつくるのですが、その前にtableの利点を考えてみましょう。 ほぼtableで組まないと出来ないこと、まずはフレキシブルな枠組みですね。 たとえばfloatで3カラムをつくった場合、高さはそれぞれのカラムで違ってしまいますが、tableであれば一番長いカラムに合わせて3カラムが均等な高さにそろいます。 それに、borderの繋ぎ目が簡単ですね。floatだと:first-childやclassをつかってborderが重ならない様にしなければいけませんが、tableだとその手間があ
今回はCSSの display: inline、display: block、display: inline-block をマスターしよう！で紹介していますdisplayプロパティの他の値を掘り下げてみようとおもいます。 目 次 へ 戻 る CSSの【display】プロパティでよく使うものをあつめてみた。【第一回 list-item・flex・その他編】 みなさま、お久しぶりでございます。やのっぱでございます(´・ω・｀)ﾌﾞﾋｰ 今回はCSSの display: inline、display: block、display: inline-block をマスターしよう！で紹介していますdisplayプロパティの他の値を掘り下げてみようとおもいます。 displayはよくinlineやblock,inline-block,noneを使用しますが、他にもたくさんの値が用意されています。 たく
html5shiv, reset css などHTML5でコーディングするときに必ずといってもいいほど必要な記述を紹介します。IEを対象ブラウザにする場合はとくに…! おはこんばんちわ、あなたのわたしのやのっぱです(´・ω・｀)おほー 最近、HTML5で記述することも多くなってきたのではないでしょうか？ 初めてのHTML5！といった記事を書こうとおもったのですが、収まり効かなくなりそうなので 小出しにいたします。 今回は準備編です！ HTMLを勉強したてでHTML5はまだよくわからない！ でもなんだか最新ですごそう！使ってみたい！ そんな声が聞こえてきます（幻聴） というわけで、初心者がよく抜けている【記述前にする準備】を紹介するよ(´・ω・｀)ｂ まずは、え？なんの準備よ？ってお話ですが、HTML5はモダンブラウザはほぼ対応しています！、しかしながらIEはIE8以前は対応していません。ま
Dreamweaver CC でHTML5なのに画像挿入すると 最後に / (スラッシュ)が入ってしまいます。そのバグを直す方法を紹介します！ おはこんばんちわ、毎年かならず風邪を3度は患うやのっぱです(´・ω・｀)おほー 本日はあの煩わしかったDreamweaverCCの画像挿入バグ改善法をご紹介します。 この改善方法が、意外とググっても出てこないんですよね。。。 というわけで、ふたっぱのジェバンニ（Boss）が一晩でやってくれました←ものの4～5分 その前に、どのようなバグかと申しますと、DreamweaverCCを使用してドキュメントタイプHTML5でコーディングしていくとき 画像挿入をすると、<img src=”*****.jpg” width=”300″ height=”300″ alt=”"/>と出ます。 なにがおかしいの？っと思いますよね… よくご覧になってください。 そう…
※ベンダープレフィックス必須 ということです。 これでは、なんのこっちゃ抹茶に紅茶ですよね。 ざっくり言いますと、今までの記事でもありましたがborderやpaddingはwidth・heightに影響を及ぼします。 そのたびに計算して、width・heightを調節していたのですが このbox-sizingの値をborder-boxにすると、自動算出によりwidthやheightの値に合わせてborderやpaddingの分、ボックスサイズが小さく調整されます。 つまり、width決めてたらborderとかpaddingとか足しても勝手にwidth内に収まるようにしてくれるんです。 これは今までレスポンシブでグローバルナビを作る時など、borderが邪魔で縮んでる途中でカラム落ちしていたのが、border含めたwidthになるのでカラム落ちしなくなります！ Oh my コンブ！ ２カラム
Dreamweaverのコーディングを楽にする方法（スニペット・ショートカット・コードヒント・プラグイン・Emmet Zen-Codingなど）を紹介します！
CSSで中央寄せ方法(inlineやblockで方法をかえよう！)。text-align:centerやmargin:auto。レスポンシブの場合なんかも紹介します！ CSSで中央寄せにする方法(inlineとblockで方法をかえよう！) おはこんばんちわ、やのっぱです(´・ω・｀) そういえば、周りでcssによる中央寄せがうまくいかないって声をよく聞いてたのでいくつか書いてみたよ。 思いつく限りの中央寄せの方法を書きます。 注意！ 本記事はreset.css、clearfixを導入した状態を基準としてソースコードを載せています。 １．margin: 0 auto;【block要素を中央に】 定番の中央寄せです。 でも、要素がwidth:100%;だと無理です。 margin取れないからです。 例） <style> .marginTest { width:100%; height:40p
次のページ
このページを最初にブックマークしてみませんか？
『たねっぱ！ | コツコツあつめるWeb作りのためのたね たねっぱ！Web系情報ブログ ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
