プログラミングHTML&CSS

プログラミングHTML&CSSプログラミングHTML&CSS

このサイトは”WordPress”にテーマ”Cocoon”で作っています。ブログを書いて投稿・更新していくだけなら、このままで問題は無いのですが、運営していくうちにデザインの変更や機能の向上など、やりたい事が増えてきます。

そのために便利に使える”プラグイン”が用意されているのですが、もっと自由にカスタマイズしようとすると、サイトを形成しているプログラム(主にHTMLとCSS)を書き替えたり追記したりしなければなりません。

このサイトも、様々なサイトを参考にしながら”HTML”と”CSS”を使いカスタマイズしているのですが、プログラムの基本が理解できていないと難しい部分があり、カスタマイズを断念したこともあります。

このような事から”HTML”と”CSS”の基礎を記事にしていきます。

私自身の備忘のための記事になりますが、初心者の方の参考になれば幸いです。

プログラミングHTML&CSS

Chromeデベロッパーツール|最終適用スタイルの確認とデバイスモードの使い方

Chromeデベロッパーツール上で最終適用スタイルの確認とデバイスモードの使い方を図解で分かりやすく紹介しています。
プログラミングHTML&CSS

Chromeデベロッパーツール上でCSSを編集する方法

Chromeデベロッパーツール上でCSSを検証・編集する方法を図解で分かりやすく紹介しています。
プログラミングHTML&CSS

Chromeデベロッパーツール上でHTMLを編集する方法

Chromeデベロッパーツール上でHTML検証・編集する方法を図解で分かりやすく紹介しています。
プログラミングHTML&CSS

Chromeデベロッパーツールの基本的な使い方!「Elementsパネル」

Chromeデベロッパーツールを使ってWebページのHTMLとCSSを検証する方法を図解で分かりやすく紹介しています。
プログラミングHTML&CSS

Chromeデベロッパーツールの基本的な使い方!起動方法と表示設定

Chromeデベロッパーツールはサイト開発に関わるエンジニアの必須ツールです。 プログラミング初心者、これから始める人向けに使い方を解説。
プログラミングHTML&CSS

最低限知っておきたいWebサイトで使える画像ファイル形式とその特徴

Webサイトに表示される画像は、見た目を調えると同時に、情報を分かりやすく伝えたりするために重要な役割をもっています。そして画像をうまく使うことでサイトのデザイン性が良くなり、ブランディング効果も高まります。 Webサイトを制作するには「H...
プログラミングHTML&CSS

HTML&CSS|無料のWebフォントサービスを使う方法

「Webフォント」はデバイスにインストールされていないフォントでも簡単に実装できます。 テキスト部分を画像で制作するより、無料で使える “Google Fonts” は種類が豊富なので大変便利です。
プログラミングHTML&CSS

HTML|ファビコンを設置する方法と、さまざまなデバイスに対応してくれる”RealFaviconGenerator”

サイトを開くとパソコンの上に表示されるタブ。その右端にはサイトのブランドをイメージできるアイコンがあります。これを「サイトアイコン」または「ファビコン」と呼び、Webサイトのシンボルです。 Favicon(ファビコン)とは、Favorite...
プログラミングHTML&CSS

HTML&CSS|デフォルトCSSをリセットする

ブラウザには、それぞれ独自のデフォルトCSSが指定されている。 リセットしない場合、デフォルトCSSに上書きされるのでブラウザによって表示に違いがでる。 CSSをリセットする"ress.css" と "destyle.css"
プログラミングHTML&CSS

HTML&CSS|リストの作り方

HTML の<ul> <ol> <li> タグでリストを作る方法と CSS でリストマーカーの装飾およびリストのインテント、行間の調整をする方法。