kharukaのブログ~お金と技術とキャリア~

Edu Fin~金融×教育~若いうちからお金について学ぶってだいじ!学んだテクノロジーはみんなの財産。過去、現在、将来の人生についてのブログ

HTML&CSS

【はてなブログ】下線を蛍光ペン装飾に変更する方法

はてなブログ Perfect GuideBook作者: JOE AOTO出版社/メーカー: ソーテック社発売日: 2016/07/22メディア: Kindle版この商品を含むブログを見る 下線を蛍光ペン装飾に変更する方法 CSS 参考 下線を蛍光ペン装飾に変更する方法 CSS デザインCSSに以下のCSSを…

はてなブログ 目次に背景色をつける方法

はてなブログ Perfect GuideBook作者: JOE AOTO出版社/メーカー: ソーテック社発売日: 2016/07/22メディア: Kindle版この商品を含むブログを見る 目次に背景色をつける方法 CSS リストに背景色が繁栄されない問題の解決方法 参考 目次に背景色をつける方法 C…

【はてなブログ】目次を表示/非表示する方法

はてなブログ Perfect GuideBook作者: JOE AOTO出版社/メーカー: ソーテック社発売日: 2016/07/22メディア: Kindle版この商品を含むブログを見る 目次を表示/非表示する方法 JavaScript CSS 参考 目次を表示/非表示する方法 ヘッダ若しくはフッダのHTMLに以…

Webスクレイピング~Webからの情報抽出その2~

目次 前提条件 Webスクレイピング 目次 1. Webからの情報抽出その1 2. Webからの情報抽出その2 Webからの情報抽出その2 1. コマンドプロンプトでJupyter Notebookを起動します。 2. 写経したソースコードはGitHub Repositoryを参照してください。 参考: 前…

Webスクレイピング~Webからの情報抽出その1~

目次 前提条件 Webスクレイピング 目次 1. Webからの情報抽出その1 2. Webからの情報抽出その2 Webからの情報抽出その1 1. コマンドプロンプトでJupyter Notebookを起動します。 2. 写経したソースコードはGitHub Repositoryを参照してください。 参考: 前…

jQueryで奇数、偶数番目にCSSのプロパティ指定をする(:even、:odd)

目次 前提条件 jQueryで奇数偶数番目にCSSのプロパティ指定をする 偶数番目にCSSのプロパティ指定をする(:odd) 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 XAMPP 5.6.3-0 jQueryで奇数偶数番目にCSSのプロパティ指定をする 偶数番…

JavaScriptでHTMLに乱数を表示する(.innerHTML、Math.random())

目次 前提条件 JavaScriptでHTMLに文字を表示する window.onload=function onload(){}を使う場合 window.onload=function onload(){}を使わない場合 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 JavaScriptでHTMLに文字を表示する win…

はじめてのPython+DjangoでWebサービス開発

前提条件 はじめてのPython+DjangoでWebサービス開発 1. 以下コマンドでDjangoインストール 2. 以下コマンドでDjangoインストール確認 3. PyCharm Professionalのインストール 4. DjangoでWebサービス開発 4.1. プロジェクト作成 4.2. データベースのセット…

HTMLのフォーム入力項目グループにタイトルをつける(legend)

目次 前提条件 HTMLでURLの入力欄を作成する 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLでURLの入力欄を作成する fieldsetタグでグループ化されたフォームの入力項目にlegendでタイトルをつけます。 <form action="test.php" method="post"> <fieldset> <legend>ブックマーク</legend> <p><label>URL名:<input type="text" name="url_name"></label></p> <p><label>URL</label></p></fieldset></form>…

HTMLでURLの入力欄を作成する

目次 前提条件 HTMLでURLの入力欄を作成する 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLでURLの入力欄を作成する input typeでurlを指定します。 <form action="test.php" method="post"> <fieldset> <legend>ブックマーク</legend> <p><label>URL名:<input type="text" name="url_name"></label></p> <p><label>URL:</label></p></fieldset></form>

HTMLで日付の入力欄を作成する

目次 前提条件 HTMLで日付の入力欄を作成する 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLで日付の入力欄を作成する input typeでdateを指定します。 <form action="test.php" method="post"> <p><label>日付:<input type="date" name="date"></label></p> <p><input type="submit" value="送信する"></p> </form> 参考 HTML5/フォーム/input要素 日付の入力欄を作る…

HTMLタグのa要素で同じページ内にリンクする

目次 前提条件 HTMLタグのa要素で同じページ内にリンクする 例 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLタグのa要素で同じページ内にリンクする aタグで遷移先にidを指定してあげます。 例 遷移元 <a href="#contact">Contact</a> 遷移先 <div id="contact"> <h2>Contact</h2> <P>em</p></div>…

CSSの疑似クラス:hoverでマウスオーバーした時に枠線を表示する

目次 前提条件 CSSの疑似クラス:hoverでマウスオーバーした時に枠線を表示する 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 CSSの疑似クラス:hoverでマウスオーバーした時に枠線を表示する HTML <div class="box"> <div> } CSS .box{ width: 100px; hight: 1</div></div>…

はじめてのBootstrap(2018年2月27日)

目次 前提条件 はじめてのBootstrap 以下サイトからファイルをダウンロード ダウンロードしたZIPファイルの確認 htmlファイルを配置 コピペで簡単にいい感じのデザイン作成 GitHub 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 はじめ…

CSSでフラットデザインのボタン作成

目次 前提条件 CSSでフラットデザインのボタン作成 GitHub 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 CSSでフラットデザインのボタン作成 CSSのソースコードはGitHub若しくは参考をご参照ください。 セミフラットのデザインいい感じ…

tableタグのborder-spacingプロパティでセルの境界線の間隔を調整する方法

目次 前提条件 tableタグのborder-spacingプロパティでセルの境界線の間隔を調整する方法 セルの境界線の間隔を0pxにする 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 tableタグのborder-spacingプロパティでセルの境界線の間隔を調整…

tableタグのセルの枠線を表示しない方法

目次 前提条件 tableタグのセルの枠線を表示しない方法 テーブルの両端のボーダーが表示されなくなります。 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 tableタグのセルの枠線を表示しない方法 テーブルの両端のボーダーが表示されな…

CSSのborder-collapseプロパティでセルのボーダーの表示を調整する

目次 前提条件 CSSのborder-collapseプロパティでセルのボーダーの表示を調整する 隣り合うセルのボーダーを重ねて表示します。 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 CSSのborder-collapseプロパティでセルのボーダーの表示を…

WebサイトにGoogleMapを埋め込む方法

目次 前提条件 WebサイトにGoogleMapを埋め込む方法 1. GoogleMapで住所を検索します。 2. 共有アイコンをクリックします。 3. 地図を埋め込むタブをクリックします。 4. 以下の様なiframeをhtmlにコピペします。 参考 前提条件 macOS High Sierra version 1…

HTMLのh1~h6タグとCSSのfont-sizeプロパティ

目次 前提条件 HTMLのh1~h6タグとCSSのfont-sizeプロパティ 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLのh1~h6タグとCSSのfont-sizeプロパティ h1~h6タグ px em h1 32 2 h2 24 1.5 h3 18 1.125 h4 16 1 h5 12 0.75 h6 10 0.625 …

HTMLタグのonfocus属性onblur属性とは

目次 前提条件 HTMLタグのonfocus属性onblur属性とは 例 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLタグのonfocus属性onblur属性とは onfocus属性はtextarea要素などでデフォルトで書かれている文字(入力してください。など)…

HTMLタグのinput要素のrequired属性とは

目次 前提条件 HTMLタグのinput要素のrequired属性とは 例 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLタグのinput要素のrequired属性とは input要素のrequired属性を指定するとその入力項目を入力必須にすることができます。 例 <form class="xxx" action="xxx.php" method="post"></form>…

htmlで電話アプリを起動する

目次 前提条件 電話アプリを起動する(スマートフォン対応) 例 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 電話アプリを起動する(スマートフォン対応) a要素のhref属性にtel:<発信先電話番号>を書きます。 例 <a href="tel:00000000000">000-0000-0000</a> 参考 …

htmlでメールアプリを起動する(2018年3月2日更新)

目次 前提条件 メールアプリを起動する 例 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 メールアプリを起動する a要素のhref属性にmailto:<送信先メールアドレス>を書きます。 例 <a href="mailto:hoge@fuga.com">hoge@fuga.com</a> 参考 HTMLタグ/リンクタグ/リンクのク…

HTMLタグのtarget属性とは

目次 前提条件 HTMLタグのtarget属性とは _blankキーワード 例 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLタグのtarget属性とは target属性はリンク先の内容やフォームの結果をどのウィンドウに表示するかを指定します。 _blank…

HTMLタグのrole属性とは

目次 前提条件 HTMLタグのrole属性とは 例 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLタグのrole属性とは role 属性は要素が示す役割を明示するための属性です。 例 <div id="content" class="body" role="main"> 参考 blog.e-riverstyle.com xn--lcki7of.jp</div>

HTMLタグのdir属性とは

目次 前提条件 HTMLタグのdir属性とは ltr キーワード 例 rtl キーワード 例 参考 前提条件 macOS High Sierra version 10.13.3 ATOM 1.23.3 x64 HTMLタグのdir属性とは dir属性は要素のテキストの記述方向を指定します。 ltr キーワード 「左から右に記述さ…

Sublime Textのインストールと環境設定(2017/10/11)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)作者: 狩野祐東出版社/メーカー: SBクリエイティブ発売日: 2016/10/27メディア: 単行本この商品を含むブログを見る 目次 前提条件 Sublime Textのインストール 1. 以下リンクからSublime Tex…

はてなブログ-改行-(Markdown)2018年3月25日更新

はてなブログ Perfect GuideBook作者: JOE AOTO出版社/メーカー: ソーテック社発売日: 2016/07/22メディア: Kindle版この商品を含むブログを見る 改行 記述方法 表示 参考 改行 記述方法 hoge 改行<br> fuga 表示 hoge 改行 fuga 参考 Markdown記法まとめ(見出し…

【はてなブログ】中央寄せ・右寄せ・左寄せ~Markdown~(2018年3月25日更新)

Pythonで動かして学ぶ!あたらしいブロックチェーンの教科書 (AI & TECHNOLOGY)作者:株式会社FLOC出版社/メーカー: 翔泳社発売日: 2019/11/11メディア: 単行本(ソフトカバー) 中央寄せ 記述方法 表示 右寄せ 記述方法 表示 左寄せ 記述方法 表示 参考 中央…