【CSS】上下中央揃えのレイアウトの仕方（Flexbox・Grid） - monoのメモ帳
※独学で勉強している素人の記事なので間違いがありましたらコメント欄で教えていただけると嬉しいです。 CSSの勉強をしています。今日はFlexboxとGridを使ったときの上下中央揃えのサンプルコードをメモしておきます。 Flexboxを使った上下中央揃えのサンプルCSS <div class="container"> <div class="container_inner"> </div> </div> .container { display: flex; justify-content: center; align-items: center; } Gridを使った上下中央揃えのサンプルCSS .container { display: grid; place-items: center; } place-itemsについて補足 place-itemsプロパティは align-item
見出しタグに日本語と英語を併記する場合のHTMLとCSSの書き方メモ - monoのメモ帳
サイト作成をしているとたまに h2 や h3 の見出しタグに英字と日本語が併記されている場合があります。 そんな時、皆さんはどんなふうにコーディングされていらっしゃいますか？ <h2> <span class="ja">ニュース</span> <span class="en">News</span> </h2> こんな風に見出しタグの中に spanタグを入れて日本語と英語それぞれにCSSを充てる方法もあると思います。 今日は、擬似要素を使った方法をご紹介します。 擬似要素を使った英語と日本語の見出しタグの併記の仕方 今回紹介する方法は擬似要素を使った見出しタグの表示の仕方です。 コーディングとしては日本語が主で英語が飾りのような位置づけになります。 <h2 data-title="company">会社概要</h2> HTMLはどのように描くかというと、title や data-title
Progateで学んだSassのまとめ - monoのメモ帳
前回はjQueryを勉強したのですが、今回はCSSの上位互換ともいえるSassです。CSSの記述が簡単になるということで、ちょっと勉強してみました。 Sassとは、CSSを拡張して扱いやすくしたもので、書きやすく、見やすいと使い勝手がいいようです。Sassはそのままでは利用できないので、CSSに変換するためにコンパイルが必要になります。 わたしの場合は、VScodeを利用しているので、VScodeの拡張機能を入れることで簡単にSassを利用することができました。 VScodeでSassを利用するためにやったことメモ VScodeでSassを利用するための拡張機能はいくつかあるようですが、今回は「DartJS Sass Compiler」を導入してみました。Sass公式がDart Sass（ダートサス）を推奨して、VScodeの「DartJS Sass Compiler」はインストールして有
Progateで学んだjQueryのまとめ - monoのメモ帳
プログラミングの基礎が学べる『Progate』の有料会員(税込¥1,078/月)になったので、サイト制作に関連するプログラミングを学んでいます。 今回はjQueryをやってみたので、学んだことを自分用にまとめてみました。 jQueryとは JavaScriptのライブラリで、jQueryを利用することでJavaScriptの記述が簡単に実装できるようになります。 jQueryを使用するには jQueryを利用する方法としては、jQueryの本体をダウンロードして利用する方法と、CDNを利用してサーバーから読み込む方法があります。 Progateで紹介されていた方法はCDNから読み込む方法でした。 jQueryを読み込む手順 ヘッダーにjQuery本体のCDNを読み込ませる <body>の終了タグ直前でjsファイルを読み込む。 jsファイルには、$(document).ready()の中身に
プログラミングの基礎が学べるProgate[プロゲート]のHTML＆CSSを試してみた - monoのメモ帳
Twitterで見かけたProgate[プロゲート]というサイト。プログラミングの基礎が学べるオンラインプログラミング学習サービスサイトで、「初心者から、創れる人を生み出す」というコンセプトで運営されています。 わたしは学校に通って HTML や CSS や JavaScript を勉強しているのではなく、書籍を購入して独学で勉強しているので学習が進んでいるのかどうかがわからないのと、書籍を読むだけではなくて手を動かして覚えたいのですが、適当な教材が見当たらなくて困っていました。 そんな時に見つけたちょうど見つけた Progate 。早速試してみました。 公式サイト:Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート] Progate で学習できるプログラムの種類 Progate[プロゲート]のHTML＆CSS 初級編 をやってみた Progate[プロゲ
![プログラミングの基礎が学べるProgate[プロゲート]のHTML＆CSSを試してみた - monoのメモ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/b56cf0753d6a16d43b27504c49358ef6605a65c3/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fl%2Flifelogtan%2F20221026%2F20221026071213.png)
Visual Studio Code(VScode)をインストールしてからやったことのメモ - monoのメモ帳
HTMLやCSSやJavaScriptを独学で勉強中なのですが、コードエディタにVisual Studio Code(VScode)を使い始めました。 まだ触りだしてから数週間しか経っていないのでわからないことばかりです。 今までは昔からあるTeraPadを利用していたのですが、今の時代はVScodeが主流なのだとか。 少し前だと、brackets(Adobe社)を利用されている方が多かったようですが、bracketsは2021年9月1日にサポートが終了していて、パートナー関係にあるマイクロソフト社のVisual Studio Codeへの移行が推奨されています。 今からHTMLエディタをインストールされる方は、マイクロソフト社のVisual Studio Codeがメインになっていくのでしょうか。 ということで前置きが長くなりましたが、VScodeの使い方が全然慣れなくて、まだ勉強途中な
はてなブログで記事のタイトルとURLをコピーするボタンを設置する方法の備忘録 - monoのメモ帳
※自分用の備忘録として記録している記事です。 WordPressを利用されている方のブログによく設置されている「記事のタイトルとURLをコピー」するボタン。 記事のタイトルとURLをコピーするボタン わたし個人はこのボタンを使い勝手がわからずに全く使っていなかったのですが、若い世代の方はクリップボードにコピーしてLINEやTwitter投稿することが多いらしいので、試しに設置してみました。 でも、わたしの知識では作ることができないので、今回参考にさせていただいたサイトはこちら。 参考サイト： 「なてなブログ」で、記事のタイトルとURLをクリップボードにコピーする機能を作成 - retireSakiの日記 JavaScriptのソースコードはそのままコピペで利用させていただいて、CSSの部分は自分のサイトに合うように変更しました。 それから、今回はFont Awesomeのアイコンは使わずに
AI Programmer(日本語で指示を出すだけでコードを自動生成)がすごい - monoのメモ帳
Twitterで話題になっていた日本語で指示を出すだけでコードを自動生成してくれる『AI Programmer』。 AI Programmer 現在プロトタイプが無料で公開されていて、言語を選択してAI Programmerに書かせたいコードの処理内容を入力するだけで、コードを自動生成してくれます。 HTML ＆ CSS を試してみた AI Programmerでトップへ戻るボタンを作ってみた AI Programmerでグローバルナビを作ってみた結果 AI Programmerを使ってみた感想 対応している言語は SQL Python JavaScript HTML ＆ CSS Solidity C++ PHP Go R Perl Ruby 正規表現 Haskell Lisp C# Lisp HTML ＆ CSS を試してみた 面白そうなので早速試してみましょう。 AI Programm
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
