- 1. To Do
- 1.0.1. , , どれを使うか。
- 1.0.2. 【超簡単】iframeを使ってYouTubeを埋め込んだ場合に簡単にレイアウトを整える方法
- 1.0.3. HTMLで押したボタンの色を変える方法
- 1.0.4. Tips:background-image・ショートハンド・ディレクトリ構造
- 1.0.5. Audio/Video DOM のcurrentTime1とは
- 1.0.6. ド初心者がWEBデザイナーになる話。 #1
- 1.0.7. PHPでポートフォリオ 開発(イベント管理アプリ)
- 1.0.8. 【初心者でもわかる】flexboxのjustify-content: space-between;で最後の行を左寄せにする方法
- 1.0.9. 具体例で理解するmin-width・max-widthの使いどころ
- 1.0.10. #YoshiTech DAY2「基礎学習 HTML編」 やってみた
- 1.0.11. 【初心者でもわかる】cssを意味と見た目で分けて、綺麗に書く方法
- 1.0.12. DMMWEBCAMPでの記録(未経験から就職まで)
- 1.0.13. display: table-rowをすっかり忘れていた話。
- 1.0.14. javascriptを使って簡単な計算機を作るpart.last 入門者向け
- 1.0.15. chorome DevToolsのCSS Overview でwebサイトレビュー
Vuejs CLIにて一部を外部htmlファイルを読み込んで実装する方法
# Vuejs CLI環境下で一部をhtmlで実装したい時
Vuejs CLIでvue拡張子のファイル内で一部をhtmlファイルを読み込んで実装したい時がある方、
その方々に、試行錯誤を経て分かった方法を共有します。## 参考
– [Vue.jsで外部HTMLファイルをinclude(っぽく)する](https://qiita.com/ProjectEuropa/items/27d8604b857fc44dcdca)## 環境の整理
– 開発環境:Vuejs CLIでインストールしたばかりの環境##方法
1. [Vuejs CLI](https://cli.vuejs.org/)をインストールする。
2. HelloWorld.vueが生成される、その中を以下のように変更。“`HelloWorld.vue
Practice
<
【初心者でもわかる】一部だけ角丸をつける方法(border-radius)
# どうも、7noteです。今回は一部に角丸をつけたいときの方法を全パターン紹介。
### 左上だけ
“`
border-radius: 10px 0 0 0 / 10px 0 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-left-radius: 10px;
“`### 右上だけ
“`
border-radius: 0 10px 0 0 / 0 10px 0 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-top-right-radius: 10px;
“`### 右下だけ
“`
border-radius: 0 0 10px 0 / 0 0 10px 0; /* 水平方向の 左上、右上、右下、左下 / 垂直方向の 左上、右上、右下、左下 */
/*↑もしくは↓*/
border-bottom-right-radius: 10px;
“`### 左下だけ
“`
border-ra
よく見る『中央寄せ横並びレイアウト』を3パターンのCSS Flexboxで実装してみる
[CSS Flexbox](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)とはCSS 3から導入されたレイアウトモジュールです。正式名称は『CSS Flexible Box Laout』です。
Flexboxを活用することでボックスレイアウトが簡単に実装できます。
特に横並びの配置に関しては従来の`float`よりもFlexboxのほうが簡単に実装できるので、**横並びの配置ではFlexboxを積極的に活用していくとよいでしょう。**そこで今回はFlexboxを利用して横並びのレイアウトを実装する方法について紹介します。
具体的には、横並びの配置のなかでもよく目にする『3つのカード状のアイテムを画面中央に均等に配置する』というレイアウトを実装します。
– 今回のゴール
– Flexboxの概要について理解する
– 中央寄せ横並びレイアウトをFlexboxで実装する方法を理解する
– center、space-around、space-betweenの違いにつ
OS標準のテキスト エディタを使ったHTMLの編集方法
## 拡張子とは?
ファイルには様々な種類があります。その種類を区分しているのものと捉えてください。
ファイルの種類は写真や音楽や書類のカテゴリがありさらに写真は jpg、png。音楽にはmp3、wav。書類にはtextやdoc等に枝分かれします。そのようにファイルと用途が紐付いてる事もあり、ファイルをクリックすると対応したアプリケーションで開くことができるようになっています。
この動画で解説するホームページを作成するHTMLは拡張子もhtmlになります
HTMLの詳しい解説は別の資料で行うので、割愛させていだだきます。
拡張子は慣習で多くは小文字で表記します。またコンピュータの世界では漢字やひらがな、カタカナなど通常の日本語の文字を表現する全角文字列とアルファベット等を表現する半角があります。
ファイル名はどちらでも問題ありませんが拡張子は半角のアルファベットで書くようにして下さい。また、プログラミングにおいては基本的に半角アルファベットでフォルダ名、ファイル名を使うのが慣習になっております。
ホームページ内の文字列の表現等を除いて全角文字列はエラーの原因になるので注
ul・olタグ
ulをよく見かけますが、olがある日出てきてなんだこれとなったので調べました。
ざっくりいうとこんな感じです。ol:順番を持つリスト(ordered list)
ul:順番を持たないリスト(unordered list)“`html
HTMLの勉強
To Do
- 本を読む
- 不動産に連絡する
- 買い物に行く
- 郵便局へ行く
優先順位
,
リンクを付与するときには、aタグ、buttonタグ、inputタグのどれでいくか。
### 結論
初心者の僕が悩みながら、どれを使うかを調べた結果、– 一般的には、aタグでボタンタイプをつける。
– formタグでつかいたいなどの特殊なときは、button を使うこととする。
buttonタグを使う場合は、
リンク先は、onclick=”location.href=’aa.html’”と記述する。aタグよりもちょっと長くなる。#### 参考文献
https://www.ameamelog.com/html-a-button/
【超簡単】iframeを使ってYouTubeを埋め込んだ場合に簡単にレイアウトを整える方法
こんにちは、[Yui](https://twitter.com/yui_active)です。
今回はiframeを使ってYouTube動画を埋め込んだ際にものすごく簡単にレイアウトを整える方法をお伝えします。(私はVueで書いてますが、要はCSSを工夫するだけなので、HTML/CSSを使ってwebページを作成しているときにも使えます。)
先日[Vue.jsでVuetifyを使ってページを作成してたら変に上部のスペースが空いて困った件](https://qiita.com/Yui_active/items/3583b98889f1d1a20a7d)という記事を書いたのですが、その最後の完成形として上げていたこちらの写真、確かにpaddingは消えていますが、**「え、Youtube画像細長すぎない???バランス悪すぎない???」**ということで、今回はレイアウトを整えることにしました。
HTMLで押したボタンの色を変える方法#Aタグではできない
まず前提としてAタグではできません(正確にはできないと言う訳でではなく探したらやり方があるのかもしれません)。そう言う訳なので、ラジオボタン要素を使います。#ラジオボタン要素の書き方
ラジオボタン要素の書き方の紹介です。“`html:HTML
“`
ラジオボタンだけを追加するならこのコードだけで大丈夫です。`label`の`for`のところには`input`の`id`に書いたものを入れてください。
(https://jsfiddle.net/ このページでコードのチェックができます)#ラジオボタン要素の装飾
コレだけだとボタンっぽくないのでcssで装飾します。“`c
Tips:background-image・ショートハンド・ディレクトリ構造
自分用
今日覚えたこと## background-image
どうしても出なくて困った。
階層も画像の名前も確認した、要素に高さも指定した。
それでも出ない・・・下記の構文エラーが原因だったらしい。
“`background-image: url(images/top.png) no-repeat;
“`
*no-repeat* はショートハンドでしか記述できないとのこと。
“`background: url(images/top.png) no-repeat;
“`## ショートハンドとは・・?
長文のコードを短く省略して1行で書くこと▼ 参考
[CSSの一括指定(ショートハンド)のチートシート](https://webliker.info/css-short-hand/#:~:text=CSS%E3%81%AE%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AB%E3%81%AF,%E3%81%8C%E7%94%A8%E6%84%8F%E3%81%95%E3%82%8C%E3%81%A6%E3%8
Audio/Video DOM のcurrentTime1とは
#Audio/Video DOMとは
bodyブロックに書く音声や映像の情報。
例)
``#current Timeの使い方
“`
window.addEventListener(‘keydown’, function (e){
const audio = document.querySelector(`audio[data-key=”${e.keyCode}”]`);
//再生時間を取得
var time =audio.currentTime;
});
“`例えば
“`
audio.currentTime=0;
“`
とすると
再生時間が最初に戻る
ド初心者がWEBデザイナーになる話。 #1
# 超初心者が独学でWEBデザイナーを目指す話。
一人で心が折れそうなのと
どれくらいまでやったかよくわかんなくなってきたので整理のために書こうと。
道標というよりかは必死にあがいてる様を垂れ流すだけの場所とする。## 今のところやった事
– htmlとCSSの本でサンプルサイト作成
→それを自分用にアレンジ
– Javascriptを甘噛み
→なんとなくそこはかとなく書いてあることはわかる(詳しくはわかんない)
– jQueryを甘噛み
→なんとなく以下略
– 簡単そうなサイトを模写をする(トップページのみ)
– 1ページのオリジナルサイト作成
→CSSおしゃれ装飾やJsのコピペしてちょこっと変えたりして使ってみる
– WordPress甘噛み中(本使って勉強中)
→現状なんとなく以下略な感じWordPress難しすぎて脳みそが爆発しそう。
頑張らないといけない…。
正直こんな勉強方法であってるかどうかもわからない。
確実に言えるのは何となくはわかる…ただそれだけでは意味が無いので確実に理解そして応用できるようにならねば。。。道は険しい、ゲボでそう()
PHPでポートフォリオ 開発(イベント管理アプリ)
##記事の概要
私が開発したWebアプリ(ポートフォリオ)の解説をします。
開発にいたる背景から、作成手順、機能、工夫したところ、課題などをまとめました。開発したWebアプリは[EventRunner](http://160.251.8.13:8080/login.php)にて公開中。
以下のテストユーザーでログインできます。↓↓
アドレス :test0001@gmail.com
パスワード:test0001開発に必要な設計書や要件定義書は以下のリンクからご覧ください。
[GitHub](https://github.com/KasumiHarada/EventRunner)
[設計書URL](https://bit.ly/3j6WZvr)
##開発の背景私は、学生の頃から兵庫県に拠点を置く、ボランティア団体に所属しています。
この団体では、2ヶ月に1回のペースで、行事(地域奉仕活動やワークショップなど)が行われます。それらの行事への参加者を募るために、毎回SNSで情報を共有し、出欠をとり、参加者をSNSグループに招待し、運営していました。
これが、かなり手間で、
【初心者でもわかる】flexboxのjustify-content: space-between;で最後の行を左寄せにする方法
# どうも、7noteです。flexboxは便利ですが、たまに思い通りにならないパターンの解決方法を書いていきたいと思います。
今回はflexboxを使った**4列(3列でも可)での方法**になります。
5列以上の場合はまた後日、記事書く予定です。## こんな時、flexboxが便利ですが、、、
↓こんな配置をしたい時、、、
ーーーーーーーー
■ ■ ■ ■
■ ■ ■ ■
■ ■
ーーーーーーーー“`style.css
ul {
display: flex;
justify-content: space-between;/* 横方向に等間隔に並べる */
flex-wrap: wrap; /* 子要素が横にはみ出たら改行させる */
}
ul li {
width: 1em;
}
“`**しかし、実際これをしてしまうと、こうなります。↓**
ーーーーーーーー
■ ■ ■ ■
■ ■ ■ ■
■ ■
ーーーーーーーー
一番下の行がjustify-content: space-between;の影響で、左右に配置されてしまいます。## 改善す
具体例で理解するmin-width・max-widthの使いどころ
`width`の最短・最長を指定できる`min-width`・`max-width`はレスポンシブな画面を作成する際によく使われるCSSプロパティです。
今回は`min-width`と`max-width`の具体的な利用シーンについて紹介をします。
## min-widthの使いどころ
`min-width`とは要素の最短幅を定義するCSSプロパティです。
以下では具体的な`min-width`の利用シーンについて紹介します。### 要素が狭くなりすぎないように最低限の幅を確保したい場合
相対値で`width`の指定をしている場合、画面が狭くなれば要素も狭くなります。例えば画面幅に応じてテキスト幅を変更するデザインの場合、画面が狭くなりすぎるとデザイン崩れを起こす可能性があります。
以下にデザイン崩れが起きるサンプルを用意しました。
#YoshiTech DAY2「基礎学習 HTML編」 やってみた
#はじめに
初Qiitaです。
@CJ3さんの投稿に感化されて、書いてみました!
DAY2で黒澤さん(@kurosawa_kuro)に頂いたお題を、少しアレンジしました。Qiitaの書き方については、
[Qiita Markdown 書き方 まとめ](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1) を参考にさせていただきました。
(見出しのつけ方、コードの挿入方法、リンクの挿入方法、画像の埋め込み、引用の方法、
文字の修飾(太字))DAY1に登場したChromeデベロッパツールのConsoleで
コードをEnterで実行した後に訂正したり一部削除したりする方法がわからなかったので
そのことを材料にして、ホームページを作りました。#材料
【知りたいこと】
Consoleでコードを書いてEnterで実行した後に、書いたコードを訂正する方法
【やったこと】
「Chrome Console 訂正」「Console 実行したあと」等、
GoogleとQiitaで思いつくワードを検索にかけた
【結果】
恥ずかしながら、答えを
【初心者でもわかる】cssを意味と見た目で分けて、綺麗に書く方法
# どうも7noteです。cssを綺麗に書くための手法を紹介していきます。
今回はcssを綺麗に書くための考え方や手法を広めていけたらと思います。
## 「class名は意味で書く!」
こんな例を見てみましょう。
これを例にcssを作っていきます。### あまりよろしくない例
“`よろしくない.html
赤色のもの
- 炎
- いちご
- りんご
青色のもの
- 空
- 海
- スライム
DMMWEBCAMPでの記録(未経験から就職まで)
###はじめに
この度DMMWEBCAMPを卒業し、就職を決めることが出来たので学習の記録を書きます。###投稿しようと思ったきっかけ
以下記事を読ませて頂いて【卒業生】DMMWEBCAMPに通おうか迷っている人に伝えたい事
https://qiita.com/yuki82511988/items/37be28f2486e166fd48f僕もこれからプログラミングをやろうとしている方、学校に通おうと思っている方の役に立てればなという思いから書こうというところに至りました。
###僕のこと
軽く自己紹介をします。現在26歳今年27歳になります。
長野県出身でDMMWEBCAMPに通い転職する目的で引っ越しました。DMMWEBCAMPに通うまでは
MOSやワープロ検定1級を専門学校の時取得したくらいで、ターミナルやgithubを触ったことはありませんでした。
タイピングがちょっと速くてMicrosoft製品ちょっと使えるぜ!レベルです。
入学する半年くらい前にちょこっと本当に少しProgate(無料版)をやったり、SkillHuckという教材を購入して少しやった程度
display: table-rowをすっかり忘れていた話。
#flexやgridばかり使ってた
IE11以降、そして、autoprefixerを使っていると、あまりブラウザの差異を考えずに、
flexやgridを多用していて、display:tableなんて使わなくなっていたけど、
久しぶりに汎用的なcssスタイリングをするにあたり、
項目名と値のテーブル的なレイアウトのものが来た時に、
項目名の幅を揃えたいけど、mobile(SP)表示ではテーブルレイアウトじゃなくしたいなんて、
デザイナーが言うもんだから、困った。#[display:table] > [display:table-cell]ばかりだと思ってた。
どこでどう間違えたか、[display:table]直下には[display:table-cell]か、くらいかと思ってた。#[display:table-row]が存在してた。
すっかり忘れた。#でも、そもそも、セマンティックな考えなら、tableタグ使えばよくない?
そうなんだけどね。
でも、デザイナーの中にはhtmlやcssの概念をいまいちちゃんと理解できない人がいるから、項目と値の関係性が崩れたデザインをdesk
javascriptを使って簡単な計算機を作るpart.last 入門者向け
#計算機を作る
##完成物
See the Pen
jOWgaGJ by ライム (@raimumk2)
on chorome DevToolsのCSS Overview でwebサイトレビュー##chorome DevToolsとは
chorome上で右クリック押して検証から開けるやつ.
ElementでDOMとかCSSを操作してみたり,consoleでjsの操作をしたりする人が多いのでは.
詳しい説明は[こちら](https://developers.google.com/web/tools/chrome-devtools?hl=ja).##CSS Overview
chorome DevToolsに2020/7追加された新機能.
まだテスト段階みたいですが現状でも充分に活用できそうです.
特に,Webサイトの分析やレビューをする初学者の方におすすめです.##使用方法
DevToolsを開き,
右上の歯車>Experiments>CSS Overviewにチェック
DevToolsを一旦閉じて,再度開くとタブに追加されます.##できること
CSS Overviewで現状できることをQittaのトップページに使用しながら紹介します.###Overview summery
ページのCSSの概要を確認できます.
要素の数や,外部CSS利用数などの具体的な数値を確