HTML

HTML JSを使わずにform内の複数のinputから別々のパスにsubmitする

こんにちは。レモンティーです。今回はinput type=submitのお話です。 developer.mozilla.orgHTML5からはjavascriptを使用しなくてもinputごとに別々のパスにpostできるようです。 やりかたはinputにformaction属性を指定するだけです。 form自体のactionと…

はてなブログのコードブロック(pre,code)でファイル名やパスを一緒に表示する

こんにちは。レモンティーです。今回ははてなブログでのソースコードの表示についてです。コードを載せるとき、そのファイル名やパスも一緒に表示したいことがありますよね。先日紹介したテーマNavyDarkCodeにこの機能を追加しました。 blog.hatena.ne.jp使…

JavaScript入門 Canvasで2dの描画

こんにちは。レモンティーです。今回はJavaScriptのCanvasを使って2dの描画をします。Canvasで様々な描画を行うには、 まずCanvas要素のcontextを取得します。 var canvas = document.getElementById('canvas1'); var con = canvas.getContext('2d'); これで…

CSS はみ出した要素の処理 overflow

こんにちは。レモンティーです。今回は、はみ出した要素をどう扱うかを選べる overflowについてです。この間このブログで 一つの記事を表示しているときは問題なくても ブログのトップページで最近の記事が並んで表示されているときに 枠から中身がはみだす…

CSS 要素が半透明に透ける opacity

こんにちは。レモンティーです。今回は要素を半透明にします。 使うのはopacityです。 .test{opacity:0.5;}のように書くと、指定した要素が透けます。要素の透明度は0~1で指定でき、0に近いほど透明です。 アルファ値みたいですね。さっそく↓を透けさせてみ…

CSS 要素を隠す・非表示 display none と visibility hidden

こんにちは。レモンティーです。今回は、CSSで要素の非表示をやります。 使うのは display : none と visibility : hidden です。これらはともに要素を見えなくしてくれますが違いがあります。 display : noneだと そもそも存在しないかのように扱われますが…

CSS セレクタ ~ で以降の要素を指定

こんにちは。レモンティーです。今回は~セレクタについてです。これは↓のように書くと X ~ Y{ }X以降で同じ階層の全てのYにCSSを適用できます。 同じ階層、というのは親が同じということです。 つまりXと親が同じで、Xより後ろにあるYに適用されます。たとえ…

CSS セレクタ + で隣接している要素を指定

こんにちは。レモンティーです。今回は+セレクタについてです。これを使うと ある要素のうしろで隣接している要素にCSSを適用できます。例えば X + Y { }と書けば、 Xのうしろで隣接しているYにのみCSSを反映させられます。 (X Yの順番で隣接している場合に…

HTML リストをつくる olとulとli

こんにちは。レモンティーです。今回はリストの作成についてです。 つかうのはOL・UL・Liの3種類のタグです。OLはOrdered Listの略で 名前の通り、順番に数字がついたリストです。ULはUnordered Listの略で 順番の数字無しのリストです。Liタグはこれらのlis…

CSS はてなブログのタイトル下にカテゴリのリンクをつける

こんにちは。レモンティーです。今回は、タイトル下にカテゴリ別のリンクのボタンをつけます。読者になってる他の方のブログとかを見てると タイトル下におおまかなカテゴリごとのボタンがある方が ちらほらいたわけです。これが見る側からするとかなり便利…

CSSとは? はてなブログのデザインCSSを初心者が使ってみる

こんにちは。レモンティーです。 #TestID{color:blue; font-family:serif;} .test{color:red; border:solid 3px blue;} 今回はCSS入門についてです。CSSというのはざっくり言うとサイトを飾るための道具です。HTMLで文章や画像やリンクがつくれますが それだ…

HTML リンクをつくる aタグ

こんにちは。レモンティーです。今回はHTMLでリンクをつくります。 使うタグはaタグです <a href="URL">リンク</a> こんな感じで aタグにhref属性の値としてURLを設定して使います。 これでaタグの中身がリンクになります。試しにはてなブログにリンクをつくると リンクこんな…

HTML・CSS記事マップ

CSS 入門 セレクタ 【+】隣接している後続の要素 【~】同じ階層の後続の要素 【:hover】マウスポインタが乗った要素 プロパティ 【border】枠で囲む・線を引く 【font-family 】フォントの指定・変更 【Padding Margin】余白や間隔をとる 【display:none】【…