HTML / CSS
jQueryとBootstrapのCDN（Contents Delivery Network,）をよく使うのですが、使うたびにググってコピペしているので本記事にURLをまとめておきます。 jQuery jQuery CDN from The jQuery Foundation <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> なんらかの理由で本家よりもGoogleのCDNを使用したい場合…
CSS でも変数が使えるようになったようですのでご紹介します。 変数を扱うことの出来るプロパティVariables を使用します。 /* 変数を宣言する */ :root { --sample-color: green; } /* 変数を使用する */ .hoge { color: var(--sample-color); } Can I use.…
Web画面を作るときにはブラウザ間の違いを考慮する必要がありますね。その考慮すべきことの一つに「（IEで）この要素使えるかな？」があるかと思います。 Can I use という便利なサイト そんなときには Can I use というサイトが便利です。要素を検索すると…
リストの作り方 情報を整理して伝えるにはリスト形式が便利ですね。今回の記事では、様々なリストの作り方をご紹介します。リストは次のように３つのタイプに大別することが出来ます。 ・順序の関係ないリスト（Unordered list） ・順序の関係あるリスト（Or…
W3Cドキュメント検証サイト 私は驚きました。なんて便利なんだ、と。W3Cのドキュメント検証サイトが便利で感動したので紹介します。 validator.w3.org このサービスでは、URLを入力するだけでそのWebサイトがW3Cの標準規格に沿ってコーディングされているか…
今回の記事では可愛い系サイトに合いそうなローディングサンプルのご紹介です。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。 somegoro.hatenablog.com 画像やjavascriptは使用していませんので、とっても簡単にアプリに…
何にでも合いそうなローディングサンプルです。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。 somegoro.hatenablog.com 画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。 @chars…
Windows10っぽいサンプルです。HTML5 / CSS3 のみで作成しています。画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。 @charset "utf-8";.load-container {width: 200px;height: 200px;background: rgba(33, 150, 2…
先日の記事で吹き出しをHTML5/CSS3を作りました。 somegoro.hatenablog.com 今回はそれを応用して、矢印を２パターン作ってみます。 下向き矢印 下向き矢印はこんな感じになります。 ソースコードです。 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .formBalloon { padding-bott</meta></head></html>…
ギザギザの吹き出し 前回の記事で、HTML5/CSS3 だけで吹き出しを作る方法をご紹介しました。 somegoro.hatenablog.com しかし、公開した後になってだんだんと気になってきてしまったのです。ここのギザギザが。。。 これは線（border）を重ねて三角に見せて…
今回の記事では、HTML5/CSS3 だけで「吹き出し」を作る方法をご紹介します。 記事下にあるソースコードをコピー＆ペーストすると、このような「吹き出し」が出来ます。画像を使うよりも軽量かつサイズ操作が簡単なのでおススメです。 .formBalloon{padding-b…
直下の要素のみスタイル指定する方法 たまに使いどころが出てくる「直下の要素のみスタイル指定」したいケースへの対応です。 「idがparentの要素」の直下である「div要素」のみ背景色をつけています。 #parent > div { background-color:#4CAF50; } #hatena…
HTML5.1からpictureという要素が使用可能になりました。今まで知らなかったのですが、これがなかなか便利らしいというので調べてまとめてみることにします。 ブラウザの対応状況 さて、HTML5.1から使用可能とのことでしたがブラウザの対応状況はどのような状…
HTML5/CSS3ではflexが登場して、上下中央揃えがとても楽になりました。 要点を掴めばこんな風によそ見してても簡単に出来ます。 ぜひこの記事を読んで、要点を掴んでいってください。 さてそれでは、今回の記事では次の２つの上下中央揃えパターンをご紹介し…
角を丸くする HTMLで角を丸くする方法のご紹介です。 .radius_div{ border: 1px solid black; border-radius: 6px; width: 100px; height: 40px; } <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .radius_div{ border: 1px solid black; border-radius: 4px; width: 100px; height</meta></head></html>…
HTML 網掛け＆hover テーブル 今回は「網掛け＆hover テーブル」の作り方をご紹介します。 table.shade_table { font-size:11px;/* ここでテーブルサイズが決定する */ border-collapse: collapse; background-color: white; } table.shade_table th { borde…
リンクを押せる範囲を拡大する方法 divで範囲を決めて、aはいっぱいに広げる。 .link_wrapper{ border:solid 1px black; height:50px; position:relative; width:200px; } .link_wrapper a{ height:100%; position:absolute; width:100%; } .link_wrapper a:…
今回はHTML5/CSS3で、シンプルなテーブルの作り方をご紹介します。 久しぶりにWebページを作るときに忘れがちですよね。 また、プログラム経験が浅い方はテーブル作りに手間取ることもあるでしょう。 今回の記事ではそんなテーブルを出来るだけシンプルな形…
今回の記事では、HTMLのみを使ってアイコンを制御する方法をご紹介します。 以前の記事で、アイコンを表示する方法をご紹介しました。今回はその応用編で、アイコンを制御する方法です。 somegoro.hatenablog.com アイコンを制御する方法 制御したいアイコン…
末尾省略記号の表示のさせ方 今回の記事では、領域が足りないときに三点リーダーで表示する方法をご紹介します。 テキストが領域からはみ出すときに、「...」と表示させて残りを表示させていないWebページをよく見かけますよね。あれです。画像で見るとこん…
今日（2016年7月4日）は大雨でしたね。久しぶりに嵐のようでした。台風が来ているようなので引き続き警戒していきましょう。 さて今回の記事では、スタイルシート（css）を使ってアイコン表示をする方法をご紹介します。 以前の記事で、HTMLのみでアイコンを…
スタイルシート（css）上で計算して値を設定する方法をご紹介します。 スタイルシート（css）の値を記載するところに、calc(計算式)といった具合に記載します。 例： /* 横幅を設定 */ width: calc(100% - 8px); 上記の例では計算して値を算出、算出した値を…
今回の記事では、次のようなアイコンを使う方法をご紹介します。 アイコンを自由に使えることが出来れば表現の幅が大きく広がることでしょう。上記アイコン以外にも沢山の種類のアイコンが使用できます。それらの方法をまとめてご紹介します。ですので、きっ…
今回は、スタイルシート（css）の「 content 」についてご紹介します。 何に適用できるのか contentは、疑似要素の「before」「after」のみに適用することが出来ます。 何が出来るのか 「content」には文字列や画像を指定することが出来ます。疑似要素「befo…
今回は「flexboxプロパティ」を使用して、横幅が足りなくなったら複数行にするデザインを作っていきます。 まずは完成図です。 １．横幅が足りるときはこのとおり。 子２は固定幅で 300px とします。 ２．そして横幅が足りなくなると、複数行で表示されます…
レスポンシブデザインを作るにあたって、flexbox は非常に有用です。今回はその「flexboxプロパティ」を使用して横幅が可変なデザインを作っていきます。 まずは完成図です。 指定した要素を伸ばすことで可変長のデザインを実現しています。このようにすれば…
擬似要素 ::before ::after の使い方 をご紹介します。 「擬似要素 ::before ::after」は指定した要素の前後に挿入されます。 例を出して、実際に確かめてみましょう。 スタイルシート(css) p::before {content:"まぁ、";} p::after {content:"うん、たぶん…
