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

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

デザイン

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

下線を蛍光ペン装飾に変更する方法 CSS 参考 下線を蛍光ペン装飾に変更する方法 CSS デザインCSSに以下のCSSを記述します。デフォルトでtext-decoration:underline;の記述があるのでnoneで無効化します。 /*下線の色*/ u{ text-decoration: none; background…

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

目次に背景色をつける方法 CSS リストに背景色が繁栄されない問題の解決方法 参考 目次に背景色をつける方法 CSS デザインCSSに以下のCSSを記述します。 .entry-content ul { margin: 0 0 0 1.5em; padding: 0 0 0 1.5em; } .table-of-contents{ padding: au…

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

目次を表示/非表示する方法 JavaScript CSS 参考 目次を表示/非表示する方法 ヘッダ若しくはフッダのHTMLに以下のJavaScriptを記述します。最近はbodyタグの末尾に記述するのが主流らしいですね。とりあえず、今回はフッダに記述しました。 JavaScript // jQ…

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 キーワード 「左から右に記述さ…

はてなブログ-脚注の付け方-(Markdown)2018年3月25日更新

脚注の付け方 記述方法 表示 参考 脚注の付け方 記述方法 hoge((ほげ)) 表示 hoge*1 参考 affiliate-hatekun.hatenablog.com はてなブログ Perfect GuideBook作者: JOE AOTO出版社/メーカー: ソーテック社発売日: 2016/07/22メディア: Kindle版この商品を含…

Pythonプロフェッショナルプログラミング-Webアプリケーションを作る(画面を作る)-

Pythonプロフェッショナルプログラミング 第2版作者: 株式会社ビープラウド出版社/メーカー: 秀和システム発売日: 2015/05/21メディア: Kindle版この商品を含むブログを見る 目次 前提条件 Webアプリケーションを作る 目次 1. 画面を作る 2. 機能を作る 2.1.…

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

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

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

中央寄せ 記述方法 表示 右寄せ 記述方法 表示 左寄せ 記述方法 表示 参考 中央寄せ 記述方法 <div style="text-align: center;"> 中央寄せ </div> 表示 中央寄せ 右寄せ 記述方法 <div style="text-align: right;"> 右寄せ </div> 表示 右寄せ 左寄せ 記述方法 <div style="text-align: left;"> 左寄せ </div> 表示 左寄せ 参考 Markdownで中央寄せにする はてなブログ Perfect G…

はてなブログ記事の「トップに戻る」2018年3月25日更新

はてなブログ記事の「トップに戻る」 参考 はてなブログ記事の「トップに戻る」 読みやすいブログ作成のため「トップに戻る」機能を追加してみました。 参考記事通りに本当にコピー&ペーストで実装出来るので簡単です。 はてなブログ Perfect GuideBook作者…