XMLHttpRequestというオブジェクトを使うことによって、ページを更新しなくても、ページ内のデータを反映することができる ツイキャスのコメビュに使えそうだから、少し使ってみた 今回やったことは「ページ表示時にサーバーへリクエストし、サーバーでJSON…

辞書型からJSON形式のデータに変換するときにはjson.dumps()を使う また、JSON形式のテキストデータになる！(JSONはテキストの形式だから当たり前か...) >>> import json >>> testDict = { ... 'one': 1, ... 'two': 2, ... } >>> json.dumps(testDict) '{"o…

CSVファイルへの書き込みにはCsvHelperというのを使うといいらしい 書き込み用のクラスを作って、書く！！ github.com パッケージマネージャーを使ってインストールする ツール > NuGet パッケージ マネージャー > パッケージ マネージャー コンソール PM> I…

Pythonの補完を行えるjedi-vimを入れてみた。 VimのPython3が有効になっていない場合はここを参考に有効にする まずは、jediをインストールする。 $ pip3 install --user jedi インストールされていることを確認 $ pip3 list | grep jedi jedi 0.11.1 次に、…

jedi-vimを使いたい！でも、VimでPython3が有効になっていないと使えないらしい。 Vim内で以下のコマンドを実行すると有効になっているかわかる。 :echo has('python3') 結果が1であれば、Python3が有効になっている。 自分の場合、これが0となっていたため…

レスポンスのHTTPステータスコードの確認を行うにはstatus_codeプロパティを使う。 >>> import requests >>> res = requests.get('https://www.google.co.jp') >>> res.status_code 200 また、結果の確認で使えるようなコードもある requests.codes.okなど …

background-attachmentスクロール時に背景画像もスクロールするかどうかを設定できる。 指定できる値 fixed：スクロールしても画像はスクロールしない scroll：スクロールに合わせて画像もスクロールする デフォルト値はscroll 実際にfixedを指定してスクロ…

背景画像のパスを指定する。url()を使って、パスを指定する .main { background-image: url(../../images/ponta.jpg); } 相対パスで指定する場合、CSSを外部ファイルに記述しているときにはCSSからの相対パスになることに注意 設定できる値 URL：画像のURL n…

background-positionプロパティを使うことで画像を表示する開始位置を設定できる。 background-repeat: no-repeat;のときに使うことが多いらしい。 background-position: xの位置 yの位置;と記述する 値の指定方法 値の指定方法は３つある キーワードで指定 …

背景画像の繰り返し表示の設定をする。 指定できる値 値 説明 repeat 縦横に繰り返し表示 repeat-x 横に繰り返し表示 repeat-y 縦に繰り返し表示 no-repeat 繰り返し表示しない デフォルト値はrepeatになっている。 参考文献 background-repeat - CSS | MDN …

背景色を変えるにはbackground-colorプロパティを使う。 .main { background-color: #fafafa; } 値にtransparentを設定すると透過色という意味になる。 .main { background-color: transparent; } 色を透過するとき 背景色と文字を透過：opacityプロパティを…

opacityプロパティは要素全体の透明度を設定できる 文字色を透過したい場合には色を設定するときにrgbaで設定する。 設定する値 0〜1の数値を設定する。0に近づくほど透明になる。初期値は1になっている。 例）少し透過する .main { opacity: 0.8; } 参考文献…

横並びにして、回り込みをさせないようにしたい！！ 結論 overflow: auto;を使う！！ イメージこんな感じ アイコンの下の部分にはテキストが回りこないようにしたい まずは失敗例から 失敗例 See the Pen 回り込みをさせない(悪い例) by tamago (@tamago324)…

marginは周りのボックスとの距離 marginの相殺 これのせいでややこしくなるらしい。今はよくわかっていない。 上下のmarginは重なることもある(条件が揃わないと重ならない) CSSのmarginとは？paddingとは？余白の指定方法まとめの4.marginの相殺にも書いて…

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)のChapter6のsection4のめも div自体に意味はなく、要素をまとめたり、グループ化するために使われる デザインをもとにdivで囲むのではなく、情報のまとまりをもとにdivで囲む 見出しとその…

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)のChapter6のSection2と3のまとめ ul：順序なしリスト ol：順序ありリスト リストにはデフォルトでCSSが設定されている。(デフォルトCSS) list-style-typeで・や番号がつく marginとpadding…

パンくずリストを作るにはリストを使う HTMLでの記述でのポイント olを使う CSSでの記述でのポイント インラインボックスにする：横並びになる 各要素の後ろに”»”をつける：階層になる 最後の要素だけ"»"はつけない "»"は好きなものに変えられる .breadcrumb…

text-decorationプロパティを使う a { text-decoration: none; } a:hover { text-decoration: underline; } カーソルが重なったときだけ、下線を引くようにしている！ 色を変えるとかもするといいのかもね！ See the Pen MVJLGW by tamago (@tamago324) on C…

これに関してはあまり理解できていないと思う。(2018/3/19) floatとoverflowの2つのプロパティを使って、実装する Emmentでは以下のようになる .float-clear>.float-box,p .float-clear { overflow: hidden; } .float-box { float: left; } <div class="float-clear"> <div class="float-box"> <img src="google.com" alt=""> </div> <p>回り込み回り</p></div>…

Visual Studio 2017でインストーラーを作る方法のメモ まずは、Visual Studioに拡張機能のMicrosoft Visual Studio 2017 Installer Projectsを追加する。 自分の環境の場合、Webページからダウンロードして追加できなかったため、Visual Studioの機能を使っ…

imgタグをaタグで囲むだけ a>img <a href="http://google.com"> <img src="google.jpg" alt="Googleへ"> </a> 画像の下のテキストも含めてリンクとする 画像だけだと、それがリンクなのかがわからないため、テキストを表示するとよい aタグの中にテキストを表示することで、画像とテキストがリンクになる a>div>img<p <a href="http://google.com"> <div> <img src="google.jpg" alt="Googleへ"> </div> <p>Googleへ行く</p> </a>…

imgタグを使うことで画像を表示できる <img src="画像のパス" alt="画像が表示できなかった場合に表示するテキスト" width="横幅" height="高さ"> 例) <img src="images/asakusa.jpg" alt="浅草の風景" width="900", height="600"> width属性とheight属性 画面サイズによって画像のサイズを変えることが多いため、widthとheightは指定しないらしい？ 画像の表示サイズはできるだけ指定するようにしましょう。画像サイズを指定することで、画像…

::afterみたいなものを擬似要素という。 疑似要素 (Pseudo-elements) - CSS | MDN ::after: 選択した要素の後ろに装飾を行う ::before: 選択した要素の前に装飾を行う contentプロパティを使って、装飾する内容を設定する 例）メインとサブにそれぞれ装飾を…

属性や属性の値によって、要素を選択できるセレクタ。タイプセレクタやclassセレクタでは指定しにくい要素の場合に使う。 以下の4つの要素を指定できる。 属性が値のとき 属性が追加されているとき 属性が値で始まるとき 属性が値で終わるとき

下線を消すにはtext-decorationプロパティを使う。 例）aタグの下線を消す a { text-decoration: none; } また、リンクのデフォルトでは下線は表示されているが、一般的にはマウスカーソルが当たったら下線を表示するようになっているらしい。 ツイキャスの…

例えば、「カーソルが当たっているときにテキストの色を変える」とか a:hover { color: green; } aタグ全てにスタイルを設定する場合(擬似クラスを設定していなくても適用したいスタイル) a { color: blue; } 擬似クラス 擬似クラス：a:hoverのhoverの部分の…

リンクを作成するにはaタグを使う。 リンクのテキストはaタグの開始タグと終了タグの間に記述する リンク先のURLはhref属性に書く 別タブで開くにはtarget属性に_blankをつける

サブタイトルのためのタグはないため、作るときにはh1の中にspanとbrを使って実装する span br サンプル HTML <h1>東雲めぐの配信最高！！<br> <span class="subtitle">〜毎朝、早起きして癒やしてもらおう〜</span> </h1> h1内にタイトルとサブタイトルを記述し、span内にサブタイトルを記述する CSS h1…

colorプロパティを使う。 値の指定の仕方 16進数(6桁の数値)で指定する R(赤)、G(緑)、B(青)をそれぞれ16進数で2桁ずつで表現する。 #赤緑青で指定する body { color: #808080; } カラーキーワードで指定する redやblueやblackなどのキーワードで指定するこ…

Google Maps APIというもので簡単にGoogle Mapを表示できるらしいからやってみた！ 今回は「Google Maps Embed API」を使って表示してみる。 JavaScriptを使う「Google Maps JavaScript API」もあるらしい。 4つのモード Google Maps を表示するときは4つモ…