CSS

はてなブログの新テーマSunlightを公開しました

こんにちは。レモンティーです。はてなブログの新しいテーマSunlightを公開しました blog.hatena.ne.jpこのブログで現在使用しているNavyDarkCodeとよく似ていて、機能面では互換性?があります。 つまりグローバルメニューやSNSシェアボタンはNavyDarkCode…

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

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

はてなブログのテーマ作成で--output-style compressedにするとレスポンシブ対応が効かなくなるのを解決

こんにちは。レモンティーです。今回は、はてなブログのテーマ作成についてです。このブログではずっと公式テーマを使っていたのですが 最近見た目を変えてみたくなってテーマをつくりました。 blog.hatena.ne.jp テーマは公式のBoilerplateをクローンしてsa…

JavaScript入門 CSSのプロパティを操作

#sample2{display:none; } #sample3{position:absolute;} こんにちは。レモンティーです。今回はJavaScriptでCSSのプロパティを操作してみます。↓のように要素を取得して、.style.プロパティ = 値 とすればOKです。 let x = document.getElementById("testId…

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 padding margin で余白や間隔をつける

CSS

こんにちは。レモンティーです今回は余白についてです。 使うのはPaddingとMarginです。これらは共に余白をつくってくれるものでPaddingは枠の内側の余白で、 Marginは枠の外側の余白です。言葉より実際に見た方がわかりやすいかもしれません。いまから↓の二…

CSS ポインタが乗ったら変化をつける :hover擬似クラス

CSS

こんにちは。レモンティーです。今回は、ポインタ(カーソル)が乗った時だけデザインに変化をつける方法です。 使うのは:hover擬似クラスです。 xxx:hover{~}と書くと、xxxにポインタが乗っている間だけ反映されるデザインを設定できます。例えばこういうや…

CSS フォントの指定・変更 font-family

CSS

こんんちは。レモンティーです。今回は、フォントの変更や指定です。使うのはfont-familyプロパティです。使うとこんな感じです。↑は HTML <p class="sample">使うとこんな感じです。</p> CSS .sample{font-family:serif; } となっています。字体はsans-serif ゴシック系serif 明朝…

CSS 枠で囲む・線を引く borderプロパティ

CSS

こんにちは。レモンティーです。今回は、こんなのとかこんなのとかこんなのみたいに、枠をつけたり線を引いたりします。使うのはCSSのborderプロパティです。これは boder:線の種類 太さ 色; のように使います。例えばサンプル↑の場合はHTML <p class="sample">サンプル</p> CSS .s…

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

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

HTML・CSS記事マップ

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